Bjb Code

表格标签

表格通过 <table> 标签定义，其结束标签为 </table> 。

表格示例

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
		<th>身高</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
		<td>176</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
		<td>175</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>18</td>
		<td>166</td>
	</tr>
	<tr>
		<td>麻子</td>
		<td>20</td>
		<td>183</td>
	</tr>
</table>

尝试一下

示例解析

• <table> 标签定义 HTML 表格。
• 其中的行由 <tr> 标签定义，行中的普通单元格由 <td> 标签定义，表头单元格由 <th> 标签定义。

table 元素中的标签

标签	描述
<table>	定义表格
<tr>	定义表格中的行
<th>	定义表头单元格
<td>	定义普通单元格
<caption>	定义表格的标题
<thead>	定义表格的页眉（头部）
<tbody>	定义表格的主体
<foot>	定义表格的页脚（底部）
<colgroup>	定义表格列的组
<col>	定义用于表格列的组的属性

一行一列的表格

HTML 表格中 <tr> 标签定义行，<td> 标签定义普通单元格。

为了方便查看最终效果，这里设置了表格边框，border 属性用于定义边框。

"row1,cell1" 代表第一行第一个单元格：

<table border="1">
	<tr>
		<td>row1,cell1</td>
	</tr>
</table>

在浏览器中显示为：

row1,cell1

尝试一下

一行多列的表格

HTML 表格中 <tr> 标签定义行，<td> 标签定义普通单元格。

为了方便查看最终效果，这里设置了表格边框，border 属性用于定义边框。

"row1,cell2" 代表第一行第二个单元格，依次类推：

<table border="1">
	<tr>
		<td>row1,cell1</td>
		<td>row1,cell2</td>
		<td>row1,cell3</td>
		<td>row1,cell4</td>
	</tr>
</table>

在浏览器中显示为：

row1,cell1

row1,cell2

row1,cell3

row1,cell4

尝试一下

多行多列的表格

HTML 表格中 <tr> 标签定义行，<td> 标签定义普通单元格。

为了方便查看最终效果，这里设置了表格边框，border 属性用于定义边框。

"row2,cell1" 代表第二行第一个单元格，依次类推：

<table border="1">
	<tr>
		<td>row1,cell1</td>
		<td>row1,cell2</td>
		<td>row1,cell3</td>
		<td>row1,cell4</td>
	</tr>
	<tr>
		<td>row2,cell1</td>
		<td>row2,cell2</td>
		<td>row2,cell3</td>
		<td>row2,cell4</td>
	</tr>
	<tr>
		<td>row3,cell1</td>
		<td>row3,cell2</td>
		<td>row3,cell3</td>
		<td>row3,cell4</td>
	</tr>
</table>

在浏览器中显示为：

row1,cell1	row1,cell2	row1,cell3	row1,cell4
row2,cell1	row2,cell2	row2,cell3	row2,cell4
row3,cell1	row3,cell2	row3,cell3	row3,cell4

尝试一下

有表头的多行多列表格

HTML 表格中 <tr> 标签定义行，<th> 标签定义表头单元格。

为了方便查看最终效果，这里设置了表格边框，border 属性用于定义边框。

大多数浏览器会默认把表头单元格内的文本显示为粗体、居中：

<table border="1">
	<tr>
		<th>head1</th>
		<th>head2</th>
		<th>head3</th>
		<th>head4</th>
	</tr>
	<tr>
		<td>row1,cell1</td>
		<td>row1,cell2</td>
		<td>row1,cell3</td>
		<td>row1,cell4</td>
	</tr>
	<tr>
		<td>row2,cell1</td>
		<td>row2,cell2</td>
		<td>row2,cell3</td>
		<td>row2,cell4</td>
	</tr>
	<tr>
		<td>row3,cell1</td>
		<td>row3,cell2</td>
		<td>row3,cell3</td>
		<td>row3,cell4</td>
	</tr>
</table>

在浏览器中显示为：

head1	head2	head3	head4
row1,cell1	row1,cell2	row1,cell3	row1,cell4
row2,cell1	row2,cell2	row2,cell3	row2,cell4
row3,cell1	row3,cell2	row3,cell3	row3,cell4

尝试一下

表格的结构

HTML 表格可以分为 4 个部分，分别是标题、页眉、主体、页脚。

<caption> 标签定义标题，<thead> 标签定义页眉，<tbody> 标签定义主体，<tfoot>标签定义页脚。

完整的 HTML 表格应该用 <thead> 标签包裹表头单元格（th），<tbody> 标签包裹普通单元格（td）。

完整的表格结构：

<table border="1">
<caption>学生成绩表</caption>
<thead>
	<tr>
		<th>姓名</th>
		<th>分数</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>李雷</td>
		<td>59</td>
	</tr>
	<tr>
		<td>韩梅梅</td>
		<td>97</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<td>总分</td>
		<td>156</td>
	</tr>
</tfoot>
</table>

尝试一下

表格的列分组

<colgroup> 和 <col> 标签用于对表格中的列进行分组，以便对列设置样式，而不需要重复的为每个单元格或每一行设置样式。。

<col> 标签中用 span 属性设置分在一组的连续列的数量。

<table border="1">
<caption>学生成绩表</caption>
<colgroup>
	<col span="2" style="background-color: green" />
	<col style="background-color: yellow;" />
</colgroup>
<thead>
	<tr>
		<th>班级</th>
		<th>姓名</th>
		<th>分数</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>2</td>
		<td>李雷</td>
		<td>59</td>
	</tr>
	<tr>
		<td>2</td>
		<td>韩梅梅</td>
		<td>97</td>
	</tr>
	<tr>
		<td>3</td>
		<td>闰土</td>
		<td>100</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<td colspan="2">总分</td>
		<td>256</td>
	</tr>
</tfoot>
</table>

尝试一下

表格的属性

属性	描述
align	定义表格的对齐方式
border	定义表格的边框
bordercolor	定义表格边框的颜色（该属性已过时，不建议使用）
bgcolor	定义整个表格或一个单元格的背景颜色（该属性已过时，不建议使用）
background	定义整个表格或一个单元格的背景图像（该属性已过时，不建议使用）
width	定义表格的宽度
height	定义表格的高度
cellspacing	定义单元格与单元格之间的距离
cellpadding	定义单元格内容与单元格边框的距离
colspan	跨列合并，即合并同一行上相邻的两个或多个单元格
rowspan	跨行合并，即合并同一列上相邻的两个或多个单元格
span	定义 <col> 标签中分在一组的列的数量

align 属性

align 属性定义表格的对齐方式，属性值：left/right/center 。

• 为表格设置对齐方式：在 <table> 标签中使用 align 属性。
• 为单元格内容设置对齐方式：在 <tr> 或 <td> 标签中使用 align 属性。

<!-- 表格在页面内居中对齐 -->
<table border="1" align="center">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
	</tr>
</table>
 
<!-- 单元格内容靠右对齐 -->
<table border="1" width="300">
	<tr align="right">
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr align="right">
		<td>张三</td>
		<td>19</td>
	</tr>
	<tr align="right">
		<td>李四</td>
		<td>18</td>
	</tr>
</table>

尝试一下

border 属性

border 属性定义表格的边框。

如果不定义边框属性 border，表格将不显示边框。

一个带有边框的表格：

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
	</tr>
</table>

尝试一下

bordercolor 属性

bordercolor 属性定义表格边框的颜色。

只有在 border 属性的值大于 0 时，bordercolor 属性才能生效。

<table border="1" bordercolor="red">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
	</tr>
</table>

尝试一下

bordercolor 属性已过时，尽量不要在 HTML5 或者 未来版本的 HTML 中使用它。要改变表格边框的颜色，可以使用 CSS 。

bgcolor 属性

bgcolor 属性可以为整个表格或仅为一个单元格设置背景颜色。

• 为整个表格设置背景颜色：在 <table> 标签中使用 bgcolor 属性。
• 为一个单元格设置背景颜色：在 <td> 标签中使用 bgcolor 属性。

<table border="1" bgcolor="yellow"> <!-- 为整个表格设置背景颜色 -->
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td  bgcolor="red">张三</td> <!-- 为单元格设置背景颜色（会覆盖表格的背景颜色） -->
		<td>19</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
	</tr>
</table>

尝试一下

bgcolor 属性已过时，尽量不要在 HTML5 或者 未来版本的 HTML 中使用它。要改变表格的背景颜色，可以使用 CSS 。

background 属性

background 属性可以为整个表格或仅为一个单元格设置背景图像。

• 为整个表格设置背景图像：在 <table> 标签中使用 background 属性。
• 为一个单元格设置背景图像：在 <td> 标签中使用 background 属性。

<table border="1" background = "img/html/zy.gif">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
	</tr>
</table>

尝试一下

background 属性已过时，尽量不要在 HTML5 或者 未来版本的 HTML 中使用它。要设置表格的背景图像，可以使用 CSS 。

width 和 height 属性

在 <table> 标签中，可以使用 width（宽）和 height（高）属性设置表格宽度和高度。

属性值可以是以像素（px）为单位的数值，也可以是屏幕区域的百分比。

设置了宽高的表格：

<table border="1" width="400" height="150">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
	</tr>
</table>

尝试一下

cellspacing 和 cellpadding

有以下两个属性，用于调整 HTML 表格中单元格的空间：

• cellspacing：定义单元格与单元格之间的距离。
• cellpadding：定义单元格内容与单元格边框的距离。

<table border="1" cellspacing="10" cellpadding="8">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
	</tr>
</table>

尝试一下

colspan 和 rowspan

合并单元格分为两种：

• colspan 属性：跨列合并，即合并同一行上相邻的两个或多个单元格。
• rowspan 属性：跨行合并，即合并同一列上相邻的两个或多个单元格。

合并第一列的两个单元格（rowspan）：

head1	head2	head3
row1,cell1	row1,cell2	row1,cell3
	row2,cell2	row2,cell3

<!-- 合并第一列的两个单元格（rowspan） -->
<table border="1">
	<tr>
		<th>head1</th>
		<th>head2</th>
		<th>head3</th>
	</tr>
	<tr>
		<td rowspan="2">row1,cell1</td>
		<td>row1,cell2</td>
		<td>row1,cell3</td>
	</tr>
	<tr>
		<!-- 此单元格被合并了，所以应该注释或删掉 -->
		<!-- <td>row2,cell1</td> -->
		<td>row2,cell2</td>
		<td>row2,cell3</td>
	</tr>
</table>

尝试一下

合并第二行左边两个单元格（colspan）：

head1	head2	head3
row1,cell1	row1,cell2	row1,cell3
row2,cell1		row2,cell3

<!-- 合并第二行左边两个单元格（colspan） -->
<table border="1">
	<tr>
		<th>head1</th>
		<th>head2</th>
		<th>head3</th>
	</tr>
	<tr>
		<td>row1,cell1</td>
		<td>row1,cell2</td>
		<td>row1,cell3</td>
	</tr>
	<tr>
		<td colspan="2">row2,cell1</td>
		<!-- 此单元格被合并了，所以应该注释或删掉 -->
		<!-- <td>row2,cell2</td> -->
		<td>row2,cell3</td>
	</tr>
</table>

尝试一下

有用的提示

• 表格的单元格（td）中可以包含文本、图片、列表、段落、表单、水平线、表格等等。
• 表格中只有定义行的标签，没有定义列的标签，从视觉上看，列由一个个单元格组成。
• 通常情况下，对表格的设置喜欢三参为 0，即 border/cellspacing/cellpadding 的值都设为 0 。