🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 表格与框架元素 ## 1. 表格元素 - 表格是最重要的数据格式化展示重要工具, 使用频率非常高 - 表格的数据,存储在由行与列组成的一系列单元格 - 数据必须存储在单元格元素中 - 与列表类似, 表格也是由一系列标签来描述 ### 1.1 元素 | 序号| 标签 | 描述 | 备注 | | :---:|------- | ----------------------------------- | -------- | | 1|`<table>` | 定义表格, | **必选** | | 2|`<tbody>` | 定义表格主体, 允许定义多次 | **必选** | | 3|`<tr>` | 定义表格中的行, | **必选** | | | 4|`<th>` | 定义表格头部中的单元格,默认加粗居中 | **必选** | | 5|`<td>` | 定义 g 表格 e 主体与底部的的单元格 | **必选** | | 6|`<caption>` | 定义表格标题, | 可选 | | 7|`<thead>` | 定义表格头格, 只需定义一次 | 可选 | | 8|`<tfoot>` | 定义表格底, 只需定义一次 | 可选 | | 9|`<col>` | 为一个/多个列设置属性,仅限 | 可选 | | 10|`<colgroup>` | 将多个`<col>`元素分组管理 | 可选 | ### 1.2 属性 | 序号|属性 | 适用元素 | 描述 | | ---|---------- | --------- | ---------------------- | | 1|`border` | `<table>` | 添加表格框 | | 2|`cellpadding` | `<table>` | 设置单元格内边距 | | 3|`cellspacing` | `<table>` | 设置单元格边框间隙 | | 4|`align` | 不限 | 设置单元格内容水平居中 | | 5|`bgcolor` | 不限 | 设置背景色 | | 6|`width` | 不限 | 设置宽度 | | 7|`height` | 不限 | 设置高度 | > 表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式 ### 1.3 示例 - 运行效果图 ![](https://img.kancloud.cn/be/c6/bec687e3b9d0b3badc193f0c3eb96e6e_1166x786.jpg) - 示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表格元素</title> </head> <body> <table border="1" cellpadding="5" cellspacing="0" width="500" height="300" align="center" > <!-- 对列统一设置,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;"> 员工信息表 </caption> <!-- 表格页眉 --> <thead bgcolor="lightblue"> <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> </table> </body> </html> ```