1.表格的作用
- 按照一定的格式来显示数据的
- 表格是由单元格（列）行 来组成的
2.表格的语法
2.1标记
-
<table></table>:表示一个表格 -
<tr></tr>:表示表格中的一行 -
<td></td>表行中的一列（单元格）
<th></th>:行/列 标题 （加粗水平居中） -
<caption></caption>:表格的标题
该元素必须添加在<table>之下
2.2常用属性
table
- width
- height
- align—设置表格的对齐方式（left/center/right）
- border—边框宽度，取值以px为单位的数值
- bgcolor
- cellspacing—单元格外边距
- cellpadding—单元格内边距
tr
- align----控制当前行内容的水平对齐方式
- valign—控制当前行内容的垂直对齐方式（top/middle/bottom）
- bgcolor
td/th
- align
- valign
- width
- height
- colspan—跨行
- rowspan----跨列
3表格的复杂应用
3.1行分组
允许将若干行划分到一个组中，以便实现统一管理
表头行分组
允许将第一行的内容单独分到表头行分组中
<thead></thead>
表尾行分组
允许将最后一行的内容单独分到表尾行分组中
<tfoot></tfoot>
表主体行分组
<tbody></tbody>
3.2不规则表格创建
通过 td 的跨行 和 跨列来实现不规则的表格
跨列
<td colspan="">
从指定单元格位置处开始，横向向右，合并掉几个单元格(包含自己),被合并掉的单元格，要删除
跨行
<td rowspan="">
从指定单元格位置处开始，纵向向下，合并掉几个单元格(包含自己),被合并掉的单元格，要删除
扫描二维码关注公众号，回复：
11304656 查看本文章
3.3表格的嵌套—了解
被嵌套的所有的内容，只能放在 td 中
demo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="400" height="400" cellpadding="5" cellspacing="0">
<caption>成绩一览表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody bgcolor="pink">
<tr>
<td>张三</td>
<td>58</td>
<td>59</td>
<td rowspan="2">60</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2">58</td>
</tr>
</tbody>
<tr align="center">
<td>王五</td>
<td>58</td>
<td>59</td>
<td>60</td>
</tr>
</table>
</body>
</html>