一.表格布局中的标签
标签 | 用途 |
---|---|
table | 用来定义过一个表格 |
thead | 定义表格的头部 |
tbody | 定义表格的主体部分 |
tfoot | 定义表格的尾部 |
tr | 定义表格的行 |
td | 定义表格的列 |
th | 定义表格的表头(字体会加粗) |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table>
<thead>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>185</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>165</td>
</tr>
<tr>
<td>王五</td>
<td>19</td>
<td>175</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">纯属虚构</td>
</tr>
</tfoot>
</table>
</body>
</html>
2.表格中的属性
属性 | 适用对象 | 用途 |
---|---|---|
border | table | 给表格设置一个边框 |
height | table、tr、td | 设置表格或单元格的高度 |
width | table、tr、td | 设置表格或单元格的宽度 |
bgcolor | table、tr、td | 设置表格或单元格的背景颜色 |
align | table、tr、td | 设置表格和单元格的对齐方式 |
cellpadding | table | 规定单元边沿与其内容之间的空白。 |
cellspacing | table | 规定单元格之间的空白。 |
在众多属性中 cellpadding和cellspacing是我之前搞了很久才搞明白的,在这里给大家标注一下
红色箭头就是cellpadding所指的地方,蓝色箭头是cellspacing所指的地方
3.表格的合并
表格合并一般使用colspan和rowspan属性完成,写在<td>标签内
colspan 合并一行上的几个单元格
rowsan 合并一列上的几个单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">1111</td>
</tr>
<tr>
<td>3333</td>
<td>4444</td>
</tr>
<table border="1">
<tr>
<td rowspan="2">张三</td>
<td>李四</td>
</tr>
<tr>
<td>王五</td>
</tr>
</table>
</table>
</body>
</html>
在使用完colspan和rowspan后,需要相应的去改变一下表格的结构,不然就达不到想要的效果,比如本来一个两行两列的表格,在使用完colspan后第一行的单元格已经被合并,如果不去删去
第一行的另外一个单元格,则会多出一行,达不到上图的效果,不删去的效果图如下
所以,在使用单元格合并时,要注意合并后去改变表格的结构,使之呈现你想要的效果