首页 前端知识 “从零开始的HTML 表格”——WEB开发系列09

“从零开始的HTML 表格”——WEB开发系列09

2024-08-21 10:08:22 前端知识 前端哥 422 41 我要收藏

HTML 表格是一种用于在网页上组织和显示信息的结构性元素,它能够将数据以行和列的形式呈现,帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。


一、HTML 表格的基本结构

HTML 表格用 ​​<table>​​ 标签来定义,是用来展示结构化数据的一种元素。每个表格包含若干行(用 ​​<tr>​​ 标签),每行由多个单元格组成(用 ​​<td>​​ 标签)。表格还可以有标题行(用 ​​<th>​​ 标签),用于显示列的标题。

  • ​tr​​ 是 "table row" 的缩写,表示表格中的一行。
  • ​td​​ 是 "table data" 的缩写,表示表格中的数据单元格。
  • ​th​​ 是 "table header" 的缩写,表示表格中的表头单元格。

数据单元格里可以放文本、图片、列表、段落、表单、水平线,甚至其他表格。


下面是一个简单的例子,展示了一个包含姓名、年龄和职业的表格:

<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>软件工程师</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>产品经理</td>
</tr>
</table>


二、表格边框属性

表格的边框可以增加表格的可读性,用户可以更清晰地看到数据的划分。可以通过给 ​​<table>​​ 标签添加 ​​border​​​ 属性来设置边框的宽度(以像素为单位)。

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>软件工程师</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>产品经理</td>
</tr>
</table>

解释

​border="1"​​​ 设置了 1 像素宽的边框。可以根据实际需求调整数字,增加或减少边框的厚度。


三、没有边框的表格

在某些情况下,可能希望表格没有明显的边框以呈现一种简洁的样式。我们可以将 ​​border​​​ 属性设置为 0,或者完全省略该属性。

<table border="0">
<tr>
<th>水果</th>
<th>颜色</th>
</tr>
<tr>
<td>苹果</td>
<td>红色</td>
</tr>
<tr>
<td>香蕉</td>
<td>黄色</td>
</tr>
</table>


四、表头 (Heading) 的使用

表头单元格可以使用 ​​<th>​​ 标签来定义,相比于数据单元格 ​​<td>​​​,表头单元格通常是加粗并居中的样式,因此非常适合用作列的标题。例如:

<table border="1">
<tr>
<th>产品</th>
<th>价格</th>
<th>数量</th>
</tr>
<tr>
<td>笔记本</td>
<td>15.00</td>
<td>50</td>
</tr>
<tr>
<td>鼠标</td>
<td>25.00</td>
<td>100</td>
</tr>
</table>


五、带有标题的表格

使用 ​​<caption>​​​ 标签可以为表格提供一个标题。标题可以在表格上方或下方显示,旨在帮助用户理解表格的数据内容。以下示例展示了如何为表格添加标题:

<table border="1">
<caption>产品列表</caption>
<tr>
<th>产品</th>
<th>价格</th>
</tr>
<tr>
<td>电视</td>
<td>1200.00</td>
</tr>
<tr>
<td>冰箱</td>
<td>800.00</td>
</tr>
</table>


六、跨行和跨列的表格单元格

在某些情况下,可能需要单元格跨越多行或多列。在 HTML 中,我们使用 ​​rowspan​​ 和 ​​colspan​​​ 属性来实现。

1、跨行 (rowspan)

使用 ​​rowspan​​​ 属性可以让一个单元格跨越多个行。例如:

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>30</td>
<td>软件工程师</td>
</tr>
<tr>
<td>31</td>
<td>项目经理</td>
</tr>
</table>

解释

​rowspan="2"​​​ 属性让“张三”的单元格跨越了两行,因此在第二行再次显示的细节中,这个单元格不再重复。


2、跨列 (colspan)

同样地,​​colspan​​​ 属性可以让单元格跨越多个列。例如:

<table border="1">
<tr>
<th colspan="2">个人信息</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>软件工程师</td>
</tr>
</table>

解释

​colspan="2"​​​ 属性让“个人信息”的单元格跨越了两列,这通常用于合并表头信息。

七、表格内的标签

在表格单元格中,我们可以嵌套使用各种 HTML 标签,例如段落标签(​​<p>​​)、链接标签(​​<a>​​)、图像标签(​​<img>​​​)等,从而丰富表格的内容。

<table border="1">
<tr>
<th>网站</th>
<th>描述</th>
</tr>
<tr>
<td><a href="https://www.google.com">Google</a></td>
<td><p>一个强大的搜索引擎。</p></td>
</tr>
</table>

解释

在表格中使用链接标签 ​​<a>​​​,可以将某个单元格的内容变成一个可点击的链接,增强用户互动性。


八、单元格边距 (Cell padding)

​cellpadding​​​ 属性用于设置单元格内数据与单元格边框之间的空间,即单元格的内边距。这样可以提高表格的可读性。

<table border="1" cellpadding="10">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</table>

解释

​cellpadding="10"​​​ 的作用是为每个单元格内部数据与单元格边框之间留出 10 像素的间隔,使得内容看起来更加舒适。


九、单元格间距 (Cell spacing)

​cellspacing​​​ 属性用于设置单元格之间的间距,调整单元格之间的空白距离。

<table border="1" cellspacing="5">
<tr>
<th>产品</th>
<th>价格</th>
</tr>
<tr>
<td>电视</td>
<td>1200.00</td>
</tr>
</table>

解释

​cellspacing="5"​​​ 表示在单元格之间留有 5 像素的空间,使得表格的整体视觉效果更为分明。


十、表格颜色

可以通过 CSS 来设置表格及单元格的背景颜色。这样可以提高表格的可视化效果。示例:

<table border="1" style="background-color: lightgray;">
<tr>
<th style="background-color: darkgray;">标题</th>
<td style="background-color: white;">内容</td>
</tr>
</table>


十一、嵌套表格

有时需要在表格单元格中嵌套另一个表格。这可以用于展示更复杂的数据。

<table border="1">
<tr>
<td>主表格单元格</td>
<td>
<table border="1">
<tr>
<td>嵌套表格单元格 1</td>
<td>嵌套表格单元格 2</td>
</tr>
</table>
</td>
</tr>
</table>


题目:创建一个学校课程表

请根据以下要求,使用HTML代码创建一个课程表。

课程表要求:

表格结构

  • 表格应该有 5 列:时间、周一、周二、周三、周四。
  • 表头使用 ​​<th>​​ 标签,并使用 ​​<thead>​​ 和 ​​<tbody>​​ 标签分别标识表头和表体。
  • 表格应列出“时间”在第一列,后面是每周各天的课程安排。

课程内容

  • 在“时间”列中填写:
  • 08:00 - 09:00
  • 09:00 - 10:00
  • 10:00 - 11:00
  • 11:00 - 12:00
  • 13:00 - 14:00
  • 14:00 - 15:00
  • 15:00 - 16:00
  • 各日的课程安排可以随意填写,可以使用跨行和跨列单元格(如等课程在两个时间段上课)。

样式设置

  • 给表格添加边框,使用CSS设置边框的颜色和样式。
  • 表格头部的背景颜色为浅蓝色,字体为加粗。
  • 单元格内容居中。
  • 表格应有 10 像素的内边距,单元格之间的间距为 5 像素。

表格嵌套

  • 在“周一”的某个课程单元格中,嵌套一个表格,显示该课程的教师和教室信息。

示例HTML代码模板:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>课程表</title>
<style>
table {
border-collapse: collapse; /* 去掉单元格之间的空隙 */
width: 100%;
border: 1px solid #000; /* 表格边框 */
}
th, td {
border: 1px solid #000; /* 单元格边框 */
padding: 10px; /* 单元格内边距 */
text-align: center; /* 单元格内容居中 */
}
thead {
background-color: lightblue; /* 表头背景颜色 */
}
tbody tr {
background-color: #f9f9f9; /* 表体背景颜色 */
}
</style>
</head>
<body>

<table>
<thead>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00 - 09:00</td>
<td rowspan="2">数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td>09:00 - 10:00</td>
<td>美术</td>
<td colspan="2">生物</td> <!-- 跨列单元格 -->
</tr>
<tr>
<td>10:00 - 11:00</td>
<td colspan="2">历史</td> <!-- 跨列单元格 -->
<td>音乐</td>
<td rowspan="3">体育</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td>地理</td>
<td>科学</td>
</tr>
<tr>
<td>13:00 - 14:00</td>
<td>
<!-- 嵌套表格 -->
<table style="width: 100%; border: 1px solid #aaa;">
<tr>
<td>教师:张老师</td>
</tr>
<tr>
<td>教室:101</td>
</tr>
</table>
</td>
<td>信息技术</td>
<td>体育</td>
<td>文言文</td>
</tr>
<tr>
<td>14:00 - 15:00</td>
<td>数学</td>
<td>科学</td>
<td rowspan="2">社会</td>
<td>物理</td>
</tr>
<tr>
<td>15:00 - 16:00</td>
<td>英语</td>
<td>地理</td>
</tr>
</tbody>
</table>

</body>
</html>

效果预览:

注意事项:

  • 请确保使用合理的HTML结构和CSS属性,以达到视觉上的美观和易读性。
  • 可以根据需要调整课程内容和时间。
  • 测试代码在浏览器中渲染效果,确保样式和结构符合预期。

扩展:

如上图的表格:tr 是行数,td 是单元格数,th 是标题性质的 td

确定 tr 和 td(th 同 td)的方法:

1、从上到下,最细分到几行便是几个 tr

2、如上是三种基本单元格形式。A 是基本单元格,其余的变种都是基本单元格合并而成。B 是合并上下单元格组合而成,

C 是合并左右单元格。合并后的 B 种单元格算到第二行第一个单元格中,C 种单元格算到第四行第一个单元格中(按上表

从上到下从左到右算),所以第一行 6 个 td,第二行 6 个 td,第三行 5 个 td,第四行 1 个,第五行 6 个 td,第六行 5 个 td。

合并后用 colspan 和 rowspan 来标示 B 和 C 变种单元格是横向还是纵向吃了几个单元格(算他自己)

3、第四种变种单元格是又横向又纵向合并,这个时候同时标示 rowspan 和 colspan(空格隔开)

合并后的单元格归属原则都是左上原则,即下归上,右归左,越往左上角越优先


如有表述错误及欠缺之处敬请批评指正。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16307.html
标签
其他
评论
发布的文章

在线OJ项目

2024-08-27 21:08:43

JSON2YOLO 项目教程

2024-08-27 21:08:42

Redis 实现哨兵模式

2024-08-27 21:08:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!