HTML表格-掌握表格标签与属性

HTML表格是网页设计中用于展示数据的强大工具，它通过一系列标签和属性来控制表格的布局和样式。

一、HTML表格的基本结构

HTML表格由<table>标签定义，内部包含多个行（<tr>）、单元格（<td>或<th>）。<th>标签通常用于定义表头单元格，而<td>标签则用于定义标准单元格。

<table>：定义整个表格。

<thead>：定义表格的页眉。

<tbody>：定义表格的主体。

<tfoot>：定义表格的页脚。

<caption>：定义表格标题。

<colgroup>：定义表格列的组。

<col>：定义表格列的属性。

<tr>：定义表格中的一行。

<th>：定义表头单元格，通常位于表格的第一行或第一列，文本内容默认加粗并居中。

<td>：定义标准单元格，用于填充表格的数据内容。

表格结构主要部分：<table>、<tr>、<th> 和 <td>。

<table><colgroup><col span="1" style="background-color:red"><col style="background-color:blue"></colgroup><caption>人员管理</caption><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr><tr><td>王五</td><td>28</td><td>广州</td></tr></tbody>
</table>

二、HTML表格的属性

HTML表格标签支持多种属性，用于控制表格的布局和样式。以下是一些常用的属性：

1.border

定义表格边框的宽度（以像素为单位）。例如，border="1"表示边框宽度为1像素。

2.width 和 height

定义表格的宽度和高度（可以是像素值或百分比）。例如，width="100%"表示表格宽度为父容器宽度的100%。

3.cellpadding

定义单元格内边距（已废弃，建议使用CSS）。该属性控制单元格内容与单元格边缘的距离。

例如，cellpadding="10"表示单元格内边距为10像素（但建议使用CSS的padding属性代替）。

4.cellspacing

定义单元格之间的间距（已废弃，建议使用CSS）。该属性控制单元格与单元格之间的间距。

例如，cellspacing="5"表示单元格间距为5像素（但建议使用CSS的border-spacing或margin属性代替）。

5.bgcolor 和 background

设置表格的背景颜色或背景图片。例如，bgcolor="#99cc66"表示背景颜色为浅绿色；background="路径/图片名.jpg"表示背景图片为指定路径下的图片（背景图片的优先级高于背景颜色）。

6.align

定义表格在页面中的水平对齐方式。可取值包括left（左对齐）、right（右对齐）和center（居中对齐）。

7.bordercolor、bordercolorlight 和 bordercolordark

分别设置表格边框的颜色、上/左边框及单元格右/下边框的颜色（用于3D效果）、以及右/下边框及单元格上/左边框的颜色（也用于3D效果）。

8.colspan

在<td>或<th>标签中使用，定义单元格跨越的列数。例如，<td colspan="2">表示该单元格跨越两列。

9.rowspan

在<td>或<th>标签中使用，定义单元格跨越的行数。例如，<td rowspan="2">表示该单元格跨越两行。

***HTML属性虽然提供了基本的样式控制，但高版本废弃了很多东西。开发时更推荐使用CSS来美化和布局表格。CSS提供了更丰富的样式选项，如边框样式、背景颜色、字体样式、内外边距等。

例如，可以使用CSS的border-collapse属性来合并表格边框，使表格看起来更加整洁；使用padding属性来控制单元格内边距；使用background-color和background-image属性来设置表格的背景颜色和背景图片；以及使用text-align属性来设置单元格内文本的对齐方式等。

三、示例代码

以下是一个包含表头和多行数据的简单HTML表格示例，并使用了CSS样式进行美化：

html代码

<table><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>张三</td><td>28</td><td>工程师</td></tr><tr><td>李四</td><td>32</td><td>设计师</td></tr><tr><td>李四</td><td>32</td><td>设计师</td></tr>
</table>

css代码

table {width: 100%;border-collapse: collapse; /* 合并边框 */
}
th, td {border: 1px solid #ddd; /* 边框样式 */padding: 8px; /* 内边距 */text-align: center; /* 文本对齐方式 */
}
th {background-color: #f2f2f2; /* 表头背景颜色 */text-align: center; /* 表头文本对齐方式 */
}
tr:nth-child(even) {background-color: #878787; /* 偶数行背景颜色 */
}

若文章对你有帮助，点赞、收藏加关注吧！