在本章中，您将学习表，包括表的核心结构、表标题、标题和表的整体语义结构、行合并和完全并行。
学习没有尽头，享受着享受着。(学习谚语)注视着我，共同发展。
1、表的核心结构。
HTML中的表核心结构包括表表表表、行表行(tr)、单元格表数据单元(td)。其语法为：
菩提
Table
Tr
Td储存格/td
Td储存格/td
/tr
Tr
Td储存格/td
Td储存格/td
/tr
.
/table
/body
表核心结构的代码和显示效果如下：
图中黄色框的代码是在表中添加边框、宽度1px、实线实体和蓝色蓝色。
样式类型='文本/CSS '
Table、tr、TD { border 3360 1px solid blue}
/style
2、表标题caption
表格标题是表格最前面的内容，放置在tr标记之前，而不考虑表格的行。语法如下：
Table
Caption表标题演示/caption
Tr
Td行1单元1/td
Td行1单元2/td
/tr
.
/table
表标题的代码和显示效果通常最好没有框，如下图所示。
3、表头单元格th。
标题单元格th(table head cell)也是单元格，使用以下语法放置在表标题下常规单元格的上方：
Table
Caption表标题演示/caption
Tr
Th标头储存格1/th
Th标头列储存格2/th
/tr
Tr
Td行1芯3/td
Td行1芯4/td
/tr
.
/table
标头th单元和普通单元有什么区别？
(1) th单元格网格的内容在显示时会自动加粗和居中，常规单元格则不会。
(2)语义化更好，可读性更好，便于控制形状。
以下是标头储存格的完整代码。效果如图所示。你自己试试吧。
！DOCTYPE html
Html
头(电影)
！-定义页面编码方法-
meta charset=' utf-8 '/
标题定义列表演示/标题
样式类型='文本/CSS '
Table、tr、TD、th { border 3360 1px solid blue}
/style
/head
菩提
Table
<caption>身体状况统计</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高/cm</th>
<th>体重/kg</th>
</tr>
<tr>
<td>小明</td>
<td>23</td>
<td>175</td>
<td>65</td>
</tr>
<tr>
<td>小红</td>
<td>25</td>
<td>165</td>
<td>59</td>
</tr>
</table>
</body>
</html>
4、完整的语义化表格
一个完整的语义化表格包括表格标题caption，表头thead，表身tbody，表脚tfoot四个部分，每个部分包括各自的行tr和单元格th、td。其中完整语法如下：
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身单元格1</td>
<td>表身单元格2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表脚单元格1</td>
<td>表脚单元格2</td>
</tr>
</tfoot>
</table>
显示效果如下：
表脚通常用于统计数据的合计等，所以有的时候我们并不用完整的表格。下面一个完整表格的代码和显示效果。
<!DOCTYPE html>
<html>
<head>
<!--定义页面编码方式-->
<meta charset="utf-8"/>
<title>定义列表演示</title>
<style type="text/css">
table,tr,td,th {border: 1px solid blue;}
</style>
</head>
<body>
<table>
<caption>理科综合成绩统计表</caption>
<thead>
<tr>
<th>姓名</th>
<th>物理</th>
<th>化学</th>
<th>生物</th>
</tr>
</thead>
<tbody>
<tr>
<td>李白</td>
<td>105</td>
<td>90</td>
<td>80</td>
</tr>
<tr>
<td>杜甫</td>
<td>95</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>白居易</td>
<td>100</td>
<td>96</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>100</td>
<td>92</td>
<td>80</td>
</tr>
</tfoot>
</table>
</body>
</html>
5、合并行rowspan
合并行就是把同一列中从本单元格起，向下的若干个单元合并成一个单元格，其语法为：
<td rowspan=”合并的单元格数”>合并后单元格的内容</td>
row是行，span是横跨，跨越的意思。现在大家看一例子。在这个例子中，第1列的第1个和第2个单元格合并了，第1列的第3~5个单元格也合并了。代码和显示效果如下：
<table>
<caption>购物清单</caption>
<tr>
<td rowspan="2">点心</td>
<td>饼干</td>
</tr>
<tr>
<td>蛋糕</td>
</tr>
<tr>
<td rowspan="3">水果</td>
<td>苹果</td>
</tr>
<tr>
<td>香蕉</td>
</tr>
<tr>
<td>火龙果</td>
</tr>
</table>
6、合并列colspan
col是column（列）的缩写，合并列就是把同一行的若干个连续的单元格合并成一个。其语法为：
<td colspan=”合并的单元格数”>合并后的单元格内容</td>
我是“不惑编程”，关注我，学习更多！
1.《【htm怎么插入excel】HTML学习笔记(7)如何向网页添加表单》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《【htm怎么插入excel】HTML学习笔记(7)如何向网页添加表单》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/keji/2542570.html