1、创建表格
基础知识:
创建表格的四个元素:table、tr、th、td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束
2、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
3、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
4、<th>…</th>:表格的头部的一个单元格,表格表头。th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
5、表格中列的个数,取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框,属性值为数字。table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
7、caption标签用来定义表格的标题。
exp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学习表格标签</title>
</head>
<body>
<table border = "2">
<!--表格标题-->
<caption>前端三剑客</caption>
<tr>
<th>知识点</th>
<th>重要程度</th>
<th>难度</th>
<th>学习周期</th>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>js</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>
</table>
</body>
</html>
2、使用thead、tbody、tfoot创建表格
1、thead:标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
2、tbody:如果不加 , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
3、tfoot:元素用于对 HTML 表格中的表注(页脚)内容进行分组。
4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
exp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用thead、tbody、tfoot标签</title>
</head>
<table border="2">
<caption>成绩表</caption>
<thead>
<tr>
<td>科目</td>
<td>分数</td>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td>159</td>
</tr>
</tfoot>
</table>
</html>