HTML表格基础

最新推荐文章于 2024-03-20 22:32:05 发布

華鸟风月

最新推荐文章于 2024-03-20 22:32:05 发布

阅读量352

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Underoses/article/details/88570030

本文介绍了如何使用HTML创建表格，包括表格的基本结构、单元格和行的创建方法，以及如何使用th标签来增强表头的可读性。此外，还讨论了如何通过colspan和rowspan属性来调整表格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用HTML的过程中，我们往往需要对一些希望展示的数据进行处理，以方便浏览网页的用户快速获取信息，HTML的表格就是一个好的方法。

如何创建表格

表格的所有元素包含在<table></table>标签中，表格最重要的功能就是展示数据，而这些数据都会被放在一个个单元格中，用<td></td>来生成单元格,它们将构成一行，用<tr></tr>包含td标签以划分出不同的行。下面我们将练习如何使用这个元素。
在你的编辑器中输入如下代码：

<Head>Class member list</Head>
<table>
<tr>
<td>name</td> <td>sex</td> <td>age</td>
</tr>
<tr>
<td>Rose</td> <td>female</td> <td>17</td>
</tr>
<tr>
<td>Jack</td> <td>male</td> <td>18</td>
<th style="background-color: yellow">monitor</th>
</tr>
<tr>
<td>Kate</td> <td>male</td> <td>17</td>
</tr>
</table>

这是某班级成员的基本信息，包含他们的姓名，性别和年龄，输出如下在这里插入图片描述
这样，一个表格就产生了，尽管这个表有很多不足，但我们之后会对其进行加工。

对表格的初步处理

从上图我们看到，这个表格的信息不太容易读懂，表头与数据难以区分。HTML有这种情况的解决方案，用语句来包含表头 (‘th’ 代表 ‘table header’)，这样它就能被我们轻易的识别。
将对应语句替换成如下代码：
[<th>name</th> <th>sex</th> <th>age</th>]

结果：
在这里插入图片描述
标题部分被加粗了