html 表格
1.1 常用元素
| 序号 |
标签 |
描述 |
备注 |
| 1 |
<table> |
定义表格, |
必选 |
| 2 |
<tbody> |
定义表格主体, 允许定义多次 |
必选 |
| 3 |
<tr> |
定义表格中的行, |
必选 |
| 4 |
<th> |
定义表格头部中的单元格,默认加粗居中 |
必选 |
| 5 |
<td> |
定义 g 表格 e 主体与底部的的单元格 |
必选 |
| 6 |
<caption> |
定义表格标题, |
可选 |
| 7 |
<thead> |
定义表格头部, 只需定义一次 |
可选 |
| 8 |
<tfooter> |
定义表格底, 只需定义一次 |
可选 |
| 9 |
<col> |
为一个/多个列设置属性 |
可选 |
| 10 |
<colgroup> |
将多个<col>元素分组管理 |
可选 |
1.2 表格属性
| 序号 |
属性 |
适用元素 |
描述 |
| 1 |
border |
<table> |
添加表格框 |
| 2 |
cellpadding |
<table> |
设置单元格内边距 |
| 3 |
cellspacing |
<table> |
设置单元格边框间隙 |
| 4 |
align |
不限 |
设置单元格内容水平居中 |
| 5 |
bgcolor |
不限 |
设置背景色 |
| 6 |
width |
不限 |
设置宽度 |
| 7 |
height |
不限 |
设置高度 |
1.2 表格实列
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <table> <thead></thead><!--这是表格头部--> <tbody></tbody><!--这是表格主体--> <tfoot></tfoot><!--这是表格底部--> </table> <table border="1" cellpadding="5" cellspacing="0" width="500" height="300" align="center" ><!--border：边框，cellpadding:内边距，cellspacing：间隙，width：宽度，height:高度align：内容排列左中右--> <!-- 对列统一设置,colgroup中设置的属性对所有列均有效 --> <colgroup bgcolor="lightpink"><!--对列以组的方式管理 例如：背景颜色--> <!-- 如果不想自定义某一列属性,只写元素不写属性 --> <col /> <!-- 第二列个性化定制: 背景为浅绿色 --> <col bgcolor="lightgreen" /> <!-- 第三列背景为黄色,并跨越2列都有效 --> <col bgcolor="yellow" span="2" /> <!-- 第四列,使用第3列的样式 --> <col /> <!-- 最后一列无特殊样式,采用父级样式 --> <col /> </colgroup> <!-- 表格标题信息 可添加样式 比如字体大小等--> <caption style="font-size: 1.5rem;margin-bottom: 10px;text-align: left;"> 员工信息表 </caption> <!-- 表格页眉 --> <thead bgcolor="lightblue"><!--bgcolor 设置背景颜色--> <th>部门</th> <th>ID</th> <th>姓名</th> <th>职务</th> <th>手机</th> </thead> <!-- 表格主体1 --> <tbody> <tr> <td rowspan="3" align="center">开发部</td> <td>101</td> <td>小王</td> <td>主管</td> <td>188345****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>102</td> <td>小张</td> <td>程序员</td> <td>158123****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>103</td> <td>小李</td> <td>实习生</td> <td>13399*****</td> </tr> </tbody> <!-- 表格主体2 --> <tbody> <tr> <td rowspan="3" align="center">销售部</td> <td>104</td> <td>小马</td> <td>主管</td> <td>135345****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>105</td> <td>小刘</td> <td>客服</td> <td>157123****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>106</td> <td>小朱</td> <td>实习生</td> <td>138349*****</td> </tr> </tbody> <!-- 表格页脚 --> <tfoot> <tr bgcolor="wheat"> <td align="center">备注:</td> <td colspan="4">所有员工离职必须提交30天提交书面申请</td> </tr> </tfoot> </body></html>
