JavaWeb学习之路(21)–HTML之表格

Bertha 。 2022-09-14 13:27 164阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 表格标签
 *  3. 表格的行与列
 *  4. 页眉
 *  5. 页脚
 *  6. 小结

# 1. 前言 #

表格有多重要我就不需要赘述了吧，我们日常访问的网页处处都有表格，所以表格是非常非常重要的HTML元素。

本篇我们就来简单介绍下表格的用法。

# 2. 表格标签 #

我们可以使用`<table>`标签来定义一个表格，然后使用border属性来设定表格边框的宽度，如下。

注意此时表格里面还没有内容，所以网页也显示不出什么东西来。

# 3. 表格的行与列 #

HTML的表格是先编写行`<tr>`，然后在行里面编写列`<td>`，所以我们定义一个表格如下：

这个表格首先有2行，即2个tr。然后每一行有两列，即两个td。所以效果如下：  
![在这里插入图片描述][ccefb3d06cd1449b9163af1c2da87b76.png]

# 4. 页眉 #

表格一般需要有标题，我们可以把标题放到页眉里面。页眉标签为thead，标题列的标签为th。所以带页眉标题的代码如下。

需要注意的是，定义页眉后，我们一般将行列放到表格的主体tbody标签内部，这样更加规范。

效果如下，可见标题列字体是加粗的。  
![在这里插入图片描述][e5dba91b33c847bfb6a7b5905f660fef.png]

# 5. 页脚 #

表格还可以添加页脚，可以在页脚显示一些附加信息，例如学生的总数，页脚标签为tfoot。添加页脚后代码如下：

对应效果如下：  
![在这里插入图片描述][4dca5219726f4890a784e41d363aff4b.png]  
一般页脚用的比较少。

# 6. 小结 #

HTML表格主要表达了表格的内容，具体如何将表格做的好看，还得使用CSS，后续课程我们会对CSS样式进行讲解。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[ccefb3d06cd1449b9163af1c2da87b76.png]: /images/20220828/95990d03c118412a840af2739b81403e.png
[e5dba91b33c847bfb6a7b5905f660fef.png]: /images/20220828/9ecc744e56d944d58695c09f0c7c529a.png
[4dca5219726f4890a784e41d363aff4b.png]: /images/20220828/f1ab08e096be4a68b803258e68a679cd.png