表格
一.表格的格式
<table> //定义表格
<tr> //行标签,必须放在<table></table>标签中
<th></th> //单元格标签,表示列标题,文字自动加粗并居中,必须放在<tr></tr>标签中
<td></td> //<td></td>:单元格标签,必须放在<tr></tr>标签中
</tr>
</table>
二.表格标签
1.table标签 :定义一个表格
属性 | 作用 |
---|---|
border | 边框 |
cellspacing | 单元格之间的距离 |
cellpadding | 单元格内容和边框线之间的距离 |
width | 表格高度 |
height | 表格高度 |
2.tr行标签:必须放在table标签中
属性 | 作用 |
---|---|
align | 水平对齐方式(left、center、right) |
valign | 垂直对齐方式(top,middle,mottom) |
bgcolor | 行的背景色 |
3.th单元格标签:表示列标题,文字自动加粗并居中,必须放在tr标签中
属性 | 作用 |
---|---|
width | 列宽 |
4.td单元格标签:必须放在tr标签中
属性 | 作用 |
---|---|
width | 列宽 |
5.结构标签:
在HTML中表格是作为一个整体来解析的,运用表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示,可以优化使用体验;而且使表格结构明显易懂
<thead></thead>:表头部(放表格的标题之类)
<tbody></tbody>:表主体(放表格主体数据)
<tfoot></tfoot>:表脚注(放表格脚注)
注意:结构标签会影响跨行
thead、tfoot、tbody元素是对表格进行分组,分别代表表格标题、表格的页脚、表格的主体部分,因为已经进行了分组,所以组和组之间是不可以跨行操作的
表格示例:
<table border="2">
<thead>
<tr bgcolor = "yellow">
<th width="40">姓名</th>
<th width="40">年龄</th>
<th width="40">性别</th>
<th width="40">民族</th>
<th width="40" colspan="2">操作</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>郭越</td>
<td>18</td>
<td>男</td>
<td>汉族</td>
<td>
<a href="#">删除</a>
</td>
<td>
<a href="#">修改</a>
</td>
</tr>
<tr align="center">
<td>郭越</td>
<td>18</td>
<td>男</td>
<td>汉族</td>
<td>
<a href="#">删除</a>
</td>
<td>
<a href="#">修改</a>
</td>
</tr>
<tr align="center">
<td>郭越</td>
<td>18</td>
<td>男</td>
<td>汉族</td>
<td>
<a href="#">删除</a>
</td>
<td>
<a href="#">修改</a>
</td>
</tr>
</tbody>
</table>
效果展示:
6、合并单元格:
单元格跨列:colspan="列数"
单元格跨行:rowspan="行数"
注意:在使用时与结构标签不要冲突
表格示例:
<table border="2">
<tr>
<th rowspan='2' width=