- 表格标签
- 表格的作用
- 可以更加清晰的展示数据,增强可读性。
- 表格标签的基础
- <table></table>定义表格标签
- <tr></tr> 标签用于定义表格中的行(table row),要嵌套在<table></table>标签中
- <td></td>标签用于定义行中的单元格(table data), 必须嵌套在<tr></tr>标签中
- <th></th>标签定义行中的内容是否是表头内容,表头的内容会加粗并且居中对齐
- 表格标签中的常用属性
- align 规定表格的相对于周围元素的水平对齐方式
- 属性值:left、center、right
- border 固定表格的是否拥有边框,默认是没有的
- 属性值:1 代表有边框
- width 固规定表格的宽度
- 属性值:像素值
- height 规定表格的高度
- 属性值:像素值
- cellpadding 控制单元格内容和单元格边框之间的距离(一般会设置为0)
- 属性值:像素值,默认是1像素
- cellspacing:控制单元格和单元格之间的距离(一般会设置为0)
- 属性值:像素值,默认是2像素
- 一般控制样式会使用CSS,目前可以先通过属性来控制。
- 表格的结构标签
- 表格标签中,用<thead></thead>来确定表头区域、用<tbody></tbody>来确定表格的主体区域,这样能让表格的结构更加清晰,也方便后期使用JS来获取表格中的内容
- 合并单元格
- 合并单元格的步骤
- 1、找到目标单元格
- 2、确定是跨行还是跨列合并、跨行合并 rowspan=“被合并单元格的个数”, 合并单元格的个数最少是2、跨列合并 colspan=“被合并单元格的个数”,合并单元格的个数最少是2
- 3、将被和合并的单元格删除掉
|