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

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（空格隔开）

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/400622.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

day36——homework

day36——homework

二、基于UDP的TFTP文件传输 1&#xff09;tftp协议概述 简单文件传输协议&#xff0c;适用于在网络上进行文件传输的一套标准协议&#xff0c;使用UDP传输 特点&#xff1a; 是应用层协议 基于UDP协议实现 数据传输模式 octet&#xff1a;二进制模式&#xff08;常用&am…
阅读更多...
MySQL源码安装与MySQL基础学习

MySQL源码安装与MySQL基础学习

1、安装MySQL ​ 本次安装使用的是绿色硬盘版本&#xff0c;无需额外安装依赖环境&#xff0c;比较简单 修改相关配置文件&#xff1a; 设置环境变量&#xff0c;声明/宣告MySQL命令便于系统识别&#xff1a; 初始化数据库&#xff1a; 设置系统识别&#xff0c;进行操作&…
阅读更多...
Java基础之隐式类型转换

Java基础之隐式类型转换

类型转换 基本数据类型表示范围大小排序&#xff1a; 在变量赋值及算术运算的过程中&#xff0c;经常会用到数据类型转换&#xff0c;其分为两类&#xff1a; 隐式类型转换 显式类型转换 1 隐式类型转换 情形1&#xff1a;赋值过程中&#xff0c;小数据类型值或变量可以直…
阅读更多...
八股文学习总结

八股文学习总结

八股文学习总结 文章目录 八股文学习总结一、总体概况二、Java基础三、集合四、JUC五、JVM六、MYSQL七、Redis八、MQ九、计网十、OS十一、附上我记的笔记 一、总体概况 八股文也看了好多天了&#xff0c;我对八股文基本上考察哪些点也都有了印象&#xff0c;主要的分为Java基础…
阅读更多...
Spring-AOP实现后置、返回、异常和环绕通知

Spring-AOP实现后置、返回、异常和环绕通知

后置通知 在切入点的目标方法执行后&#xff08;无论有异常抛出没的&#xff09;&#xff0c;都会执行这个通知方法! 如果想要在通知方法里访问到目标方法返回的结果&#xff0c;可以用返回通知 返回通知 是在目标方法执行之后没有异常&#xff0c;并且返回结果后才执行通知…
阅读更多...
【自用】Python爬虫学习（七）：selenium网页自动化操作

【自用】Python爬虫学习（七）：selenium网页自动化操作

Python爬虫学习&#xff08;七&#xff09; selenium介绍selenium基础用法selenium其他自动化操作selenium动作链与iframe的处理selenium无可视化界面与反检测实现 selenium介绍 selenium是一个广泛使用的开源自动化测试框架&#xff0c;主要用于Web应用程序的功能测试。它支持…
阅读更多...
机器学习速成第二集——监督学习之分类（理论部分）！

机器学习速成第二集——监督学习之分类（理论部分）！

目录 分类算法的种类 分类问题的应用场景 模型选择与评估 结论 如何在不同数据集中选择最适合的监督学习分类算法&#xff1f; 监督学习中集成模型与单一模型相比有哪些具体的优势和劣势&#xff1f; 优势&#xff1a; 劣势&#xff1a; 在处理高维稀疏数据时&#xf…
阅读更多...
Kubernetes-K8S

Kubernetes-K8S

Kubernetes由于单词太长&#xff0c;省略掉中间8个字母简称为K8S。它介于应用服务和服务器之间。能够通过策略协调和管理多个服务&#xff0c;只需要一个YAML文件配置。定义应用的部署顺序等信息&#xff0c;自动部署应用到各个服务器&#xff0c;还可以自动扩容缩容。 架构原理…
阅读更多...
K8S资源之Service

K8S资源之Service

概念 将一组 Pods 公开为网络服务的抽象方法。 ClientIP 模型 集群内访问类型。 命令行 # 暴露端口 kubectl expose deployment my-dep-nginx --port8000 --target-port80Yml文件 apiVersion: v1 kind: Service metadata:labels:app: my-dep-nginxname: my-dep-nginx spe…
阅读更多...
【张】#12 enum 枚举

【张】#12 enum 枚举

enum 枚举定义格式&#xff1a; enum <类型名> {<枚举常量表> }; 枚举其实就是一个整数 enum example {Aa,Bb10,Cc //给Bb赋值为10后&#xff0c;Cc的值会变成11 }; 枚举变量只能使用枚举值&#xff0c;枚举可以赋值给整型&#xff0c;整型不能赋值给枚举 #inc…
阅读更多...
Django | 从中间件的角度理解跨站请求伪造(Cross-Site Request Forgey)[CSRF攻击]

Django | 从中间件的角度理解跨站请求伪造(Cross-Site Request Forgey)[CSRF攻击]

文章目录 切入点案例测试views.py测试代码templates模板下的html文件配置路由运行服务 出现CSRF报错解决CRSF报错再次运行服务 查看结果 切入点 某些恶意网站上包含链接、表单按钮或者]avaScript,它们会利用登录过的用户在浏览器中的认证信息试图在你的网站上完成某些操作 Gj…
阅读更多...
HTML+CSS进阶用法（上）——平面转换、渐变、空间转换

HTML+CSS进阶用法（上）——平面转换、渐变、空间转换

欢迎来到CSS变换的世界&#xff0c;这里充满了创意和可能性。在本篇博客中&#xff0c;我们将一起学习如何使用transform属性来实现各种平面和空间转换效果&#xff0c;包括位移、旋转、缩放&#xff0c;以及如何通过渐变和动画来增强我们的网页设计。无论你是初学者还是有经验…
阅读更多...
并发编程（第二天）

并发编程（第二天）

interrupt 方法详解 打断 sleep&#xff0c;wait&#xff0c;join 的线程 这几个方法都会让线程进入阻塞状态 打断 sleep 的线程, 会清空打断状态打断正常运行的线程 打断正常运行的线程, 不会清空打断状态打断 park 线程 打断 park 线程, 不会清空打断状态 如果打断标记已经…
阅读更多...
【Python】线性规划模型（笔记）

【Python】线性规划模型（笔记）

线性规划的作用 求一个线性目标函数在线性可行域内的最值问题 线性规划的典型应用 配送运输问题&#xff1a;选大车还是小车生产规划问题&#xff1a;每种原料各买多少几何切割问题&#xff1a;切割长宽各多少买卖利润问题&#xff1a;最多能挣多少钱… 线性规划的本质 问…
阅读更多...
C语言FTP文件传输（完成基本文件传输的功能）

C语言FTP文件传输（完成基本文件传输的功能）

文章目录 前言一、实现思路二、实现FTP服务器三、实现FTP客户端四、实现体验总结 前言 本篇文章带大家来完成一下C语言FTP文件传输助手最基础的功能&#xff0c;也就是客户端和服务器之间进行最基础的文件传输的功能。 一、实现思路 实现一个基本的 FTP 客户端和服务器&…
阅读更多...
【生成式人工智能-十一一个不修改模型就能加速语言模型生成的方法】

【生成式人工智能-十一一个不修改模型就能加速语言模型生成的方法】

一个加速语言模型生成的方法 现在语言模型的一个弊端speculative decoding预言家预测的问题 speculative decoding 模块的实现方法NAT Non-autoregressive模型压缩使用搜索引擎 一些更复杂些的speculative decoding 实现方式 speculative decoding 是一个适用于目前生成模型的加…
阅读更多...
WSL 忘记ubuntu的密码

WSL 忘记ubuntu的密码

文章目录 1. 以管理员身份打开 PowerShel2.输入命令 wsl.exe -d Ubuntu-20.04 --user root3.输入命令 passwd username 修改用户密码&#xff0c;username即待重置的用户的名称 1. 以管理员身份打开 PowerShel 2.输入命令 wsl.exe -d Ubuntu-20.04 --user root 注意版本号是自…
阅读更多...
Springboot整合Flowable入门-学习笔记

Springboot整合Flowable入门-学习笔记

目录 1、定义流程&#xff08;画图&#xff09; 2、Springboot部署流程 3、Springboot删除所有流程 4、Springboot根据 流程部署ID 查询 流程定义ID 5、Springboot启动(发起)流程 6、Springboot查询任务 6.1全部任务 6.2我的任务&#xff08;代办任务&#xff09; 7、…
阅读更多...
JVM知识总结（性能调优）

JVM知识总结（性能调优）

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 性能调优 何时进行JVM调优&#xff1f; 遇到以下情况&#xff0c…
阅读更多...
傻瓜式一步到位Mysql 8.0 密码修改

傻瓜式一步到位Mysql 8.0 密码修改

5.7之前修改密码语句 update user set authentication_string password(“root”) where user “root”; mysql 5.7.9以后废弃了password字段和password()函数&#xff1b;并在user表加了authentication_string:字段表示用户密码 #进入到mysql 安装目录下 #停止 mysql 服务 …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023