目录
1. 表格标签
1.1 表格的主要作用
表格主要用于显示、展示数据,因为它可以让数据显示的非常规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理。熟练的前端人员可能会用表格来布局页面,但表格的主要作用是用来展示数据的。
1.2 表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1. <table> </table> 是用于定义表格的标签。
2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在<table></table>标签中
3. <td></td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,字母 td 指表格数据(table data),即数据单元格的内容。
1.3 表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
<th> 标签表示 HTML 表格的表头部分(table head)的缩写。
<table>
<tr>
<th> 姓名 </th>
...
</tr>
...
</table>
个人信息表
姓名 | 性别 | 电话 |
张三 | 男 | 110 |
李四 | 女 | 119 |
1.4 表格属性
表格标签这部分属性实际开发并不常用,后面通过css来设置。
属性名 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定单元表格是否拥用边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白距离,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白距离,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
这些属性要写到表格标签table里面去
1.5 表格结构标签
因为表格可能很长,为了更好地表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
表格的头部: <thead> 标签 ,<thead> 内部必须要有<tr>标签,一般是位于第一行。
表格的主体:<tbody> 标签,用于定义表格的主体,主要用于存放数据本体。
1.6 合并单元格
将多个单元格合并为一个单元格
1.6.1 合并单元格的方式
- 跨行合并:rowspan = "合并单元格的个数"
- 跨列合并:colspan = "合并单元格的个数"
1.6.2 目标单元格
- 跨行 :最上侧单元格为目标单元格,写合并代码
- 跨列 :最左侧单元格为目标单元格,写合并代码
1.6.3 合并单元格的步骤
① 先确定是跨行合并还是跨列合并
② 找到目标单元格,写上合并方式 = 合并的单元格的数量。如:<td colspan="2" ></td>
③ 删除多余的单元格。