HTML表格标签
一、表格常用标签
1.1 table标签
解析:
<table> 标签定义 HTML 表格
一个 HTML 表格包括 <table> 元素,一个或多个 <tr>、<th> 以及 <td> 元素。
<tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。
1.2 thead标签
解析:
<thead> 标签用于组合 HTML 表格的表头内容
<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。
1.3 tbody标签
解析:
<tbody> 标签用于组合 HTML 表格的主体内容。
<tbody> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后。
<tbody> 元素内部必须包含一个或者多个 <tr> 标签。
1.4 tfoot标签
解析:
<tfoot> 标签用于组合 HTML 表格的页脚内容。
注意:<tfoot> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后,<tbody> 和 <tr> 元素之前。
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果:
1.5 th标签
解析:
<th> 标签定义 HTML 表格中的表头单元格。
HTML 表格有两种单元格类型:
表头单元格:包含头部信息(由 <th> 元素创建)
标准单元格:包含数据(由 <td> 元素创建)
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 元素中的文本通常是普通的左对齐文本。
1.6 tr标签
解析:
<tr> 标签定义 HTML 表格中的行。
1.7 td标签
解析:
<td> 标签定义 HTML 表格中的标准单元格。
1.8 caption标签
解析:
<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。
只能对每个表格定义一个标题。
1.9 colgroup标签
解析:
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。
通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。
注释:只能在 <table> 元素之内,在任何一个 <caption> 元素之后,在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
提示:如果想对 <colgroup> 中的某列定义不同的属性,请在 <colgroup> 标签内使用 <col> 标签。
1.10 col标签
解析:
<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。
通过使用 <col> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。
二、表格常用属性:
2.1 border:
表示表格的边框宽度,单位是像素(px);
2.2rowspan:
规定单元格应该合并的行数。
2.3colspan:
规定单元格应该合并的列数。
2.4cellpadding:
表示单元格边缘与其单元格内容之间的空白间距;
2.5cellspacing:
表示单元格之间的空白间距;
2.6width:
表示表格的宽度;
2.7summary:
表示表格的摘要,摘要不会显示
三、表格综合案例
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
th,td {
width: 150px;
height: 50px;
text-align: center;
border:1px solid #000;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="HTML样例摘要展示">
<colgroup>
<col span="1" style="background-color:orange">
<col style="background-color:yellow">
</colgroup>
<caption>表格实例</caption>
<thead>
<tr>
<th>页眉第1行第1列</th>
<th>页眉第1行第2列</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td>页脚第1行第1列</td>
<td>页脚第1行第2列</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td rowspan="2">跨行合并</td>
</tr>
<tr>
<td colspan="2">跨列合并</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果: