[分享]css两个表格合并单元格

在HTML和CSS中，合并单元格是一个经常用到的技巧。使用它可以使表格更加易读，更加美观。CSS提供了许多方法来合并单元格，下面我们将通过一个例子来掌握其中的两种方法。 姓名 课程 数学 语文 ...

在HTML和CSS中，合并单元格是一个经常用到的技巧。使用它可以使表格更加易读，更加美观。CSS提供了许多方法来合并单元格，下面我们将通过一个例子来掌握其中的两种方法。

<table>
  <tr>
    <th rowspan="2">姓名</th>
    <th colspan="3">课程</th>
  </tr>
  <tr>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>78</td>
    <td>89</td>
    <td>92</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>84</td>
    <td>95</td>
  </tr>
  <tr>
    <td>王五</td>
    <td colspan="2">86</td>
    <td>90</td>
  </tr>
</table> 

在上面的代码中，我们使用了两个属性：rowspan和colspan。

rowspan属性用于合并行，它可以让一个单元格跨越多行。在上面的代码中，姓名这一列是合并了两行的，因此我们使用了rowspan="2"这个属性。

colspan属性用于合并列，它可以让一个单元格跨越多列。在上面的代码中，课程这一行的三个单元格都是在合并列，因此我们使用了colspan="3"这个属性。

除了rowspan和colspan之外，我们还可以使用table-layout属性来控制表格的布局。这个属性有两个值：fixed和auto。fixed表示表格的列宽由表格本身来设置，而auto表示列宽将由单元格中的内容来决定。

table {
  width: 100%;
  table-layout: fixed;
}

td {
  word-wrap: break-word;
} 

在上面的代码中，我们将table-layout设置为fixed，这样可以让每列的宽度相等。同时我们还将单元格中的内容以字母为单位进行换行，这样可以避免出现文本溢出的情况。

总之，合并单元格是表格设计中的一个重要技巧。通过使用rowspan和colspan属性以及table-layout属性，我们可以轻松地控制表格的布局，使其更加美观和易读。