表格
- 一般我们都是用 DIV + CSS 布局 因为table布局有很多弊端 比如荣誉代码过多 难维护 不灵活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!-- 一般我们都是用 DIV + CSS 布局 因为table布局有很多弊端 比如荣誉代码过多 难维护 不灵活 -->
<table>
<!-- tr 表示行 第一行 -->
<tr>
<!-- td 行里面的第一个单元格 往下依次递增 -->
<td>单元格1</td>
<td>单元格2</td>
</tr>
<!-- tr 表示行 第二行 -->
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<!-- 1. 表格基本标签table tr td -->
<!-- 2. 默认没有边框 -->
<!-- 添加表格标题 表头 -->
<table>
<!-- caption 表格标题 默认占一行 居中 -->
<caption>成绩表</caption>
<tr>
<!-- th 表头 默认居中 字体加粗 -->
<th>姓名</th>
<th>数学</th>
<th>语文</th>
</tr>
<tr>
<td>小黄</td>
<td>88</td>
<td>97</td>
</tr>
<tr>
<td>林儿</td>
<td>99</td>
<td>100</td>
</tr>
</table>
<!-- 为了进一步对表格进行语义化 HTML引入三个标签 thead tbody tfoot 分别代表 表头 表身 表脚 -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>熳熳</td>
<td>88</td>
<td>78</td>
<td>98</td>
</tr>
<tr>
<td>小花</td>
<td>76</td>
<td>88</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>82</td>
<td>83</td>
<td>93.5</td>
</tr>
</tfoot>
</table>
<!-- HTML 语义结构很重精要 特别是针对搜索引擎 不要感觉标签写不写都能达到效果 写了更具有逻辑性 -->
<!-- 合并行 rowspan 合并列 colspan -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>熳熳</td>
<!-- 合并行 rowspan 是指往下合并两行 也就是说熳熳和小花的数学成绩一样 -->
<td rowspan="2">88</td>
<td>78</td>
<td>98</td>
</tr>
<tr>
<td>小花</td>
<td>88</td>
<td>89</td>
</tr>
<tr>
<td>小李</td>
<td>76</td>
<!-- 合并列 colspan 是指往右合并两行 也就是说语文和英语成绩相同 -->
<td colspan="2">88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>82</td>
<td>83</td>
<td>93.5</td>
</tr>
</tfoot>
</table>
</body>
</html>
- 表格基本标签table tr td
- 默认没有边框
- caption 表格标题 默认占一行 居中
- th 表头 默认居中 字体加粗
- 为了进一步对表格进行语义化 HTML引入三个标签 thead tbody tfoot 分别代表 表头 表身 表脚
- HTML 语义结构很重精要 特别是针对搜索引擎 不要感觉标签写不写都能达到效果 写了更具有逻辑性
- 合并行 rowspan 合并列 colspan
网友评论