HTML入门（5）

Mlacyatstz

于 2021-11-27 14:04:09 发布

阅读量141

点赞数

分类专栏： HTML入门学习文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62368676/article/details/121575863

版权

HTML入门学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中表格的构造，包括table, tr, th, td标签的使用，如何添加表头、表行单元格，以及合并单元格的方法。还演示了一个实际的HTML代码示例，涵盖了thead, tbody, tfoot的运用。

摘要由CSDN通过智能技术生成

本篇blog主要介绍HTML表格的内容。对应书的第六章。

在HTML中，一个表格一般3个部分组成——表格：table标签；行：tr标签；单元格：td标签、th标签。

tr:table row（表格行）td:table data cell（表行单元格） th:table header cell（表头单元格）

Caption标签——表格的标题，只能有一个，通常写在第一行。

<tr>表格行标签，代表表格的一行，写代码时就是一行一行地写，再在每行中写th\td创建单元格。

<th>表头单元格标签，浏览器会自动对内容进行加粗居中

<td>表行单元格，不会被加粗居中。

另外，为了使表格语义更好，结构更加分明，通常要用<thead><tbody><tfoot>对表格进行分区，虽然预览起来加了和没加效果一样，但加了可以让代码更有逻辑性，且更方便用CSS进行各个板块的美化。

合并单元格

在EXCEL中，我们常会用到合并单元格的操作，将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格，这个时候就需要用到“合并行”或“合并列”。

合并行

语法：<td rowspan="跨越行数"></td>

将表格相邻的n行合并

合并列

语法：<td colspan="合并的列数">

colspan意为column span

具体用法和效果与合并行类似。

实际开发中用得不多。

———————————————————————————————————————————

课后编程练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
      <table>
         <caption>学生成绩表</caption>
		 <thead>
			 <tr>
				 <th>姓名</th><th>性别</th><th>成绩</th>
			 </tr>
		 </thead>
		 <tbody>
			 <tr>
				 <td>张三</td><td>男</td><td>250</td>
			 </tr>
			 <tr>
				 <td>李四</td><td>男</td><td>520</td>
			 </tr>
		 </tbody>
		 <tfoot>
			 <tr>
				 <td>平均分</td><td colspan="2">385</td>
			 </tr>
		 </tfoot>
	  </table>
	</body>
</html>