举例说明table怎么合并行和列的？

前端表格 (table) 合并行和列主要通过 HTML 的 rowspan 和 colspan 属性实现。下面我分别举例说明：

1. 合并行 (rowspan):

rowspan 属性规定单元格可横跨的行数。

<table>
  <tr>
    <td>姓名</td>
    <td>科目1</td>
    <td>科目2</td>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>90</td>
    <td>85</td>
  </tr>
  <tr>
    <td>95</td>
    <td>92</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>88</td>
    <td>78</td>
  </tr>
</table>

在这个例子中，"张三" 对应的单元格使用了 rowspan="2"，这意味着它会跨越两行。因此，下一行中姓名列的位置就空出来了，"张三" 的名字占据了原本两行的位置。

2. 合并列 (colspan):

colspan 属性规定单元格可横跨的列数。

<table>
  <tr>
    <td>姓名</td>
    <td colspan="2">成绩</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>90</td>
    <td>85</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>88</td>
    <td>78</td>
  </tr>
</table>

这里，"成绩" 对应的单元格使用了 colspan="2"，表示它会跨越两列。因此，第一行只有三列，"成绩" 占据了原本两列的位置。

3. 同时合并行和列:

rowspan 和 colspan 可以同时使用在一个单元格上。

<table>
  <tr>
    <td rowspan="2" colspan="2">学生信息</td>
    <td>联系方式</td>
  </tr>
  <tr>
    <td>123456789</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>987654321</td>
  </tr>
</table>

在这个例子中，"学生信息" 对应的单元格同时使用了 rowspan="2" 和 colspan="2"，它会跨越两行两列。

需要注意的点：

• 使用 rowspan 或 colspan 时，需要确保表格的结构仍然正确。被合并的单元格会被移除，因此需要仔细计算行数和列数，避免表格错位。
• 合并单元格可能会对屏幕阅读器用户造成困扰，因此在使用时需要考虑可访问性，并提供适当的替代方案。 例如，可以使用 CSS 样式来视觉上模拟合并单元格的效果，而不是直接使用 rowspan 和 colspan。

希望这些例子能帮助你理解如何在前端表格中合并行和列。