<table>标签
常用属性:
[border]: 表格边框
类别:
容器级标签
作用:
定义一个表格
说明:
一个表格包括 <table> 标签,一个或多个 <tr>、<th> 以及 <td> 标签,更复杂的表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 标签
全局属性: 支持
事件属性: 支持
注意:
1.在HTML5中,仅支持 “border” 属性,并且只允许使用值 “1” 或 ""
代码示例:
<table border="1" style="border-collapse: collapse">
<tr height="50">
<td colspan="12">0000</td>
</tr>
<tr>
<td colspan="7">0000</td>
<td colspan="5">0000</td>
</tr>
<tr>
<td colspan="4">0000</td>
<td colspan="4">0000</td>
<td colspan="4">0000</td>
</tr>
<tr>
<td colspan="12">000</td>
</tr>
<tr>
<td colspan="2" rowspan="2">00</td>
<td colspan="4">123456</td>
<td colspan="4">123456</td>
<td colspan="2" rowspan="2">00</td>
</tr>
<tr>
<td colspan="1">000</td>
<td colspan="3">00000000</td>
<td colspan="1">000</td>
<td colspan="3">000000</td>
</tr>
<tr>
<td colspan="2">777</td>
<td>777</td>
<td colspan="3">777</td>
<td>777</td>
<td colspan="3">777</td>
<td colspan="2">777</td>
</tr>
</table>
<caption>标签
类别:
容器级标签
作用:
定义表格的标题
说明:
标签必须直接放置到 <table> 标签之 后。每个表格只能定义一个标题。通常这个标题会被居中于表格之上
全局属性: 支持
事件属性: 支持
<tr>标签
作用:
定义 HTML 表格中的行
说明:
一个 <tr> 标签 包含 一个或多个 <th> 或 <td> 标签,在该标签上面 设置border无效
全局属性: 支持
事件属性: 支持
注意:
在HTML5中,不支持<tr>标签 在 HTML4.01 中的 任何属性
代码示例:
<table border="1" style="border-collapse: collapse">
<tr height="50">
<td colspan="12">0000</td>
</tr>
<tr>
<td colspan="7">0000</td>
<td colspan="5">0000</td>
</tr>
<tr>
<td colspan="4">0000</td>
<td colspan="4">0000</td>
<td colspan="4">0000</td>
</tr>
<tr>
<td colspan="12">000</td>
</tr>
<tr>
<td rowspan="2" colspan="2">00</td>
<td colspan="4">123456</td>
<td colspan="4">123456</td>
<td rowspan="2" colspan="2">00</td>
</tr>
<tr>
<td>000</td>
<td colspan="3">00000000</td>
<td>000</td>
<td colspan="3">000000</td>
</tr>
<tr>
<td colspan="2">777</td>
<td>777</td>
<td colspan="3">777</td>
<td>777</td>
<td colspan="3">777</td>
<td colspan="2">777</td>
</tr>
</table>
<th>标签
常用属性:
[colspan]: 规定表头单元格可横跨的列数,在计算跨列数时应该包括其本身
[rowspan]: 规定表头单元格可横跨的行数,在计算跨行数时应该包括其本身
[header]: 规定与表头单元格相关联的一个或多个表头单元格
[scope]: 规定表头单元格是否是行、列、行组或列组的头部
类别:
容器级标签
作用:
定义表格中的表头单元格
说明:
该标签中的文本通常呈现为粗体并且居中
全局属性: 支持
事件属性: 支持
代码示例:
<table border="1" style="border-collapse: collapse; text-align: center;">
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">监测位置</th>
<th rowspan="2">供电通路</th>
<th rowspan="2">供电电压</th>
<th rowspan="2">负载电流</th>
<th rowspan="2">雷击次数</th>
<th rowspan="2">最近一次雷击时间</th>
<th colspan="2">后备保护空开状态</th>
<th rowspan="2">SPD损害数量</th>
<th colspan="2">输出空开状态</th>
</tr>
<tr>
<th>B级</th>
<th>C级</th>
<th>1路</th>
<th>2路</th>
</tr>
<tr>
<td rowspan="3">1</td>
<td>1</td>
<td>78</td>
<td>96</td>
<td>67</td>
<td>98</td>
<td>88</td>
<td>75</td>
<td>94</td>
<td>69</td>
<td>23</td>
<td>33</td>
</tr>
<tr>
<th colspan="2">提示建议</th>
<th colspan="2">智能防雷箱状态</th>
<th colspan="2">防雷箱型号</th>
<th colspan="3">防雷箱序列号</th>
<th colspan="2">防雷箱版本</th>
</tr>
<tr>
<th colspan="2">建议整机按规程检测</th>
<th colspan="2">在线</th>
<th colspan="2">2018041201-035PF</th>
<th colspan="3">2018041201-256</th>
<th colspan="2">V1.0.0</th>
</tr>
</table>
<td>标签
常用属性:
[colspan]: 规定表头单元格可横跨的列数,在计算跨列数时应该包括其本身
[rowspan]: 规定表头单元格可横跨的行数,在计算跨行数时应该包括其本身
[header]: 规定与表头单元格相关联的一个或多个表头单元格
类别:
容器级标签
作用:
定义表格中的普通单元格
说明:
该标签中的文本通常是普通的左对齐文本
全局属性: 支持
事件属性: 支持
代码示例:
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan="2">123456789</td>
<td colspan="5">1--23456789</td>
<td colspan="3">0000000000</td>
</tr>
<tr>
<td>日期</td>
<td colspan="5">00000</td>
<td colspan="4">1111</td>
</tr>
<tr>
<td>-----------</td>
<td colspan="4">0----00000000</td>
<td>000000000</td>
<td colspan="3">1-------000--</td>
<td>2---------0-</td>
</tr>
</table>
<thead><tbody><tfoot>标签
类别:
容器级标签
作用:
用来规定表格的各个部分,对表格结构进行细分,使其能被更精确、更多样的控制
说明:
通过使用这些标签,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上
<thead> 标签必须被用在以下情境中 : 作为 <table> 标签的 子标签,出现在 <caption> 、<colgroup> 标签之后,<tbody>、<tfoot> 和 <tr> 标签之前,该标签内部必须包含一个或者多个 <tr> 或 <th> 标签
<tbody> 标签必须被用在以下情境中 : 作为 <table> 标签的子标签,出现在 <caption>、 <colgroup> 和 <thead> 标签之后,该标签内部必须包含一个或者多个 <tr> 标签
<tfoot> 标签必须被用在以下情境中 : 作为 <table> 标签的子标签,出现在 <caption>、<colgroup> 和 <thead> 标签之后,<tbody> 和 <tr> 标签之前,该标签内部必须包含一个或者多个 <tr> 标签
全局属性: 支持
事件属性: 支持
注意:
1.<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局,但是可以使用 CSS 来为这些元素定义样式,从而改变表格的外观
代码示例:
<table border="1" style="border-collapse: collapse;text-align: center;" width="1000px" height="600px">
<tr>
<th>序号</th>
<th>维修项目及更换配件</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>工时费</th>
<th>合计</th>
<th>故障原因</th>
</tr>
<tr>
<th>1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="4">7</th>
<td></td>
<td colspan="2" rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2" align="left">备件费用小计:</td>
<td colspan="5" align="left">工时费用小计:</td>
<td colspan="1" align="left">合计:</td>
</tr>
<tfoot>
<tr>
<td height="50px" colspan="8" align="left">
班组长:
技术部:
服务顾问:
客户确认:
</td>
</tr>
</tfoot>
</table>
<col>标签
常用属性:
[span]: 规定 <col> 元素应该横跨的列数
作用:
标签规定了 <colgroup> 标签内部的每一列的列属性
说明:
通过使用 <col> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式
全局属性: 支持
事件属性: 支持
<colgroup>标签
作用:
用于对表格中的列进行组合,以便对其进行格式化
说明:
只能在 <table> 元素之内,在任何一个 <caption> 元素之后,在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
全局属性: 支持
事件属性: 支持
注意:
1.如果想对 <colgroup> 中的某列定义不同的属性,请在 <colgroup> 标签内使用 <col> 标签
代码示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML表格标签学习</title>
</head>
<body>
<table border="1px" style="border-collapse: collapse;">
<caption>演示表</caption>
<colgroup>
<col span="2">
<col style="background: red;">
<col span="2" style="background: limegreen;">
</colgroup>
<thead>
<tr>
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
<th>表头四</th>
<th>表头五</th>
</tr>
</thead>
<tbody>
<tr>
<td>行二 列一</td>
<td>行二 列二</td>
<td>行二 列三</td>
<td>行二 列四</td>
<td>行二 列五</td>
</tr>
<tr>
<td>行三 列一</td>
<td>行三 列二</td>
<td>行三 列三</td>
<td>行三 列四</td>
<td>行三 列五</td>
</tr>
<tr>
<td>行四 列一</td>
<td>行四 列二</td>
<td>行四 列三</td>
<td>行四 列四</td>
<td>行四 列五</td>
</tr>
</tbody>
</table>
</body>
</html>