使用HTML表格以及样式解决复杂排版：纵横驰骋，尽展风采

2023-11-18 03:11:01

HTML表格基础

1. 创建表格

要创建一个表格，我们需要使用

元素，它包含了表格中的所有内容。在元素内部，我们可以使用元素来创建表格的行，使用

元素来创建表格的表头，使用

元素来创建表格的数据。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

2. 表格属性

元素支持一些属性，可以用来控制表格的整体样式。例如，我们可以使用border属性来设置表格的边框，使用width属性来设置表格的宽度，使用height属性来设置表格的高度，等等。

<table border="1" width="100%" height="200px">
  ...
</table>

3. 表格行属性

元素也支持一些属性，可以用来控制表格行的样式。例如，我们可以使用align属性来设置表格行的对齐方式，使用valign属性来设置表格行中数据单元格的垂直对齐方式，等等。

<tr align="center" valign="middle">
  ...
</tr>

4. 表格头属性

元素支持一些属性，可以用来控制表格头的样式。例如，我们可以使用colspan属性来设置表格头的跨列数，使用rowspan属性来设置表格头的跨行数，等等。

<th colspan="2">姓名</th>

5. 表格数据属性

元素也支持一些属性，可以用来控制表格数据单元格的样式。例如，我们可以使用align属性来设置表格数据单元格的水平对齐方式，使用valign属性来设置表格数据单元格的垂直对齐方式，等等。

<td align="right">20</td>

CSS样式应用于表格

除了使用HTML属性来控制表格的样式之外，我们还可以使用CSS样式来控制表格的样式。CSS样式可以让我们更加灵活地控制表格的样式，例如，我们可以使用CSS样式来设置表格的边框颜色、背景颜色、字体颜色、字体大小、等等。

table {
  border: 1px solid #ccc;
  width: 100%;
  height: 200px;
}

th {
  background-color: #f5f5f5;
  text-align: center;
}

td {
  text-align: center;
}