基础实例:
代码:
<table border="1">
<!-- 标题 -->
<caption>
人员管理
</caption>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!-- 内容 -->
<tbody>
<tr>
<td>小花</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>哈哈</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
</table>
效果:
注:<thead></thead>和<tbody></tbody>以及<tfoot></tfoot>可以省略不写
表格中的标签:
标签 | 备注 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉(表头) |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
border:边框线
一般在th/td里面加:
colspan:横向合并
rowspn:纵向合并
推荐一个表格生成器可以直接在里面生成表格然后复制代码HTML表格生成器 (rapidtables.org)