7. 表格标签
7.1 表格标签基础
-
表的格式：
table（表格）
tr（行）
th（表头，样式会加粗）
td（列） -
表格常用属性
属性 说明 border边框 width/height宽/高 align = center/top/bottom/left/right对齐方式 cellpadding表格数据到单元格边距 cellspacing单元格间距 bgcolor背景颜色 background背景图片 块级元素处时所占位置宽度为整个屏幕但高度为元素内容所占位置
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签基础</title>
</head>
<body>
<table border="1" width="1000px" height="300px" align="center" cellspacing="50px" cellpadding="100px">
<tr bgcolor="pink">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr background="./cat.jpg">
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</table>
</body>
</html>7.2 表格头体尾
- 表格头
thead - 表格主体
tbody - 表格尾部
tfoot
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格头体尾标签</title>
</head>
<body>
<table border="1" width="1000px" height="300px" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">共100人</td>
</tr>
</tfoot>
</table>
</body>
</html>7.3 表格嵌套
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的嵌套</title>
</head>
<body>
<table border="1" width="1000px" height="300px" align="center">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>
<table border="1" width="50px" height="100px" align="center">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
</html>7.4 表格合并
作用：主要用于布局，早期布局使用表格处理
- 跨行（rowspan)
- 跨列（colspan)
- 案例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格合并单元格</title>
</head>
<body>
<table border="1px" width="1000px" height="500px" align="center">
<tr>
<td colspan="4" rowspan="1" bgcolor="blue"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td rowspan="3" bgcolor="orange"></td>
<td colspan="2" bgcolor="green"></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td bgcolor="red" rowspan="2" colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<!-- <td></td>
<td></td> -->
</tr>
</table>
</body>
</html>