一.表格标签介绍
表格，类似操作的软件excel一样，通过规范的行列方式展示数据的一种视图！
网页中（初级开发），对于这种规范的数据，使用表格标签最方便的；
实际开发（高级开发），大量的插件，可以直接生成好看的表格数据，反倒原始的表格标签使用频率降低
<table></table> 表格标签，表格中展示的所有数据都要包含在这个标签中 <thead></thead> 表头标签，表示表格中第一行-设置表头<tbody></tbody> 表体标签，表格中的所有行列数据都包含在这个标签中-展示数据 <tfooter></tfooter> 表尾标签，表格中最后一行进行合计的标签-展示统计结果 <tr></tr> 行标签，table row缩写，表示表格中的一行 <th><th> 表格标题标签，table header缩写，表示表格第一行标题 <td></td> 单元格标签，table cell data缩写，表示一行中的一列 二.代码展示及效果展示
1.常用语法
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>常用表格</h3><!-- 表格中的所有数据都必须包含在table标签中border属性，添加表格的边框width属性，调整表格的宽度cellspacing属性，调整表格单元格之间的间距，一般设置为0cellpadding属性，调整表格边框和内容之间的距离align属性，调整表格在网页中的对齐方式left/center/rightbgcolor属性，调整表格的背景颜色--><table border="1" width="800px" cellspacing="0" cellpadding="10px" align="center"><!-- tr表示一行，必须包含在table中使用 height属性：设置一行的高度，最小的高度是内容行高bgcolor属性：设置行的背景颜色align属性：设置一行中的所有单元格对齐方式 left/center/right--><tr height="80px" bgcolor="#abcdef"><!-- 标题-单元格 th属性、td属性一致，th本质上就是tdwidth属性：设置单元格的宽度，本质上就是设置列的宽度 align属性：设置当前单元格内容的对齐方式--><th width="100px" align="center">学号</th><th>姓名</th><th>年龄</th></tr><!-- tr新的一行 --><tr align="center"><!-- 普通数据展示，使用td标签，必须包含在tr中 --><td align="center">001</td><td>汤姆</td><td>18</td></tr><!-- tr新的一行 --><tr><td align="center">002</td><td>杰瑞</td><td>19</td></tr></table>
</body>
</html>
2.完整语法
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 编码小技巧按 Shift + Alt + 上/下方向键，可以直接复制一行代码--><h3>表格完整语法</h3><table width="500" border="1"><!-- 表格顶部标题 --><caption>表格标题</caption><!-- 表格第一行表头 --><thead><tr><th>序号</th>
<th>姓名</th><th>年龄</th></tr></thead><!-- 表格主体数据 --><tbody><tr><td>001</td><td>汤姆</td><td>18</td></tr><tr><td>001</td><td>杰瑞</td><td>20</td></tr></tbody><tfoot><td>总计：</td><td>人数-2人</td><td>年龄-38</td></tfoot></table>
</body>
</html>
3.合并单元格
第一种情况：跨列合并单元格
第二种情况：跨行合并单元格
代码展示
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>跨列合并单元格</h3><table width="500" border="1" cellpadding="10" cellspacing="0"><tr><td>101</td><td colspan="2">102</td><!-- <td>103</td> --></tr><tr><td>201</td><td>202</td><td>203</td></tr><tr><td>301</td><td>302</td><td>303</td></tr></table><h3>跨行合并单元格</h3><table width="500" border="1" cellpadding="10" cellspacing="0"><tr><td>101</td><td>102</td><td>103</td></tr><tr><td rowspan="2">201</td><td>202</td><td>203</td></tr><tr><!-- <td>301</td> --><td>302</td><td>303</td></tr></table>
</body>
</html>
