Web前端------HTML表格
一.表格标签介绍
表格，类似操作的软件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属性，调整表格单元格之间的间距，一般设置为0
cellpadding属性，调整表格边框和内容之间的距离
align属性，调整表格在网页中的对齐方式left/center/right
bgcolor属性，调整表格的背景颜色
-->
<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本质上就是td
width属性：设置单元格的宽度，本质上就是设置列的宽度
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>