html表格（详解网页表格的制作）

news2024/11/24 14:50:34

一、表格介绍

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格生成器：HTML 表格生成器 | 菜鸟工具。

1.概念

HTML表格是由行和列组成的矩形网格，用于以可读性高的方式显示和组织数据。

2.特点

  • 结构化：表格以行和列的形式展示数据，使得数据易于理解和比较。
  • 灵活性：可以自定义表格的样式、大小和排列方式。
  • 可访问性：良好设计的表格可以帮助视障人士和使用辅助技术的人士理解网页上的信息。
  • 可扩展性：可以轻松地在表格中添加新的行和列。

3.功能

  • 显示数据：主要功能是以可视化的方式呈现数据。
  • 排序和过滤：某些JavaScript库可以帮助实现表格中数据的排序和过滤功能。
  • 点击交互：表格的单元格可以与用户的点击交互，实现一些定制的功能。

4.应用

  • 数据报告：用于呈现统计数据、报告结果等。
  • 数据录入：用户可以在表格中填写数据。
  • 在线购物：购物网站通常使用表格来显示商品信息和价格。

 5.简单示例

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

以上的表格实例代码中，<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

  • <thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。

  • <tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。

HTML 表格还可以具有其他部分，如 <tfoot > （表格页脚）和 <caption > （表格标题），<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。

HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。

 二、表格用法

1.表格标签

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

2.表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下：

3.边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

三、表格实例

1.基本表格

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

2.包含表头、数据和注释的表格

<table>
    <thead>
        <tr>
            <th>产品</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>笔记本电脑</td>
            <td>¥5000</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>¥3000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">价格以人民币表示</td>
        </tr>
    </tfoot>
</table>

3.合并单元格的表格

<table>
    <tr>
        <th>月份</th>
        <th colspan="2">销售数据</th>
    </tr>
    <tr>
        <td rowspan="2">一月</td>
        <td>1000</td>
        <td>2000</td>
    </tr>
    <tr>
        <td>1500</td>
        <td>2500</td>
    </tr>
    <tr>
        <td colspan="3">总计</td>
        <td>4500</td>
    </tr>
</table>

四、总结

  1. 基本结构：

    • 表格由 <table> 元素开始，其中包含一个或多个 <tr>（表格行）元素。
    • 每个 <tr> 元素包含一个或多个 <td>（表格数据单元格）元素，用于表示表格中的数据。

  2. 表头和数据：

    • 使用 <th> 元素表示表头单元格，通常在表格的第一行或第一列中使用。
    • 使用 <td> 元素表示数据单元格，用于显示表格中的实际数据。

  3. 合并单元格：

    • 使用 colspan 属性合并列，表示一个单元格跨越多个列。
    • 使用 rowspan 属性合并行，表示一个单元格跨越多个行。

  4. 表格结构：

    • <thead>、<tbody> 和 <tfoot> 元素可用于分组表格内容，提高可读性和可访问性。
    • <caption> 元素用于添加表格标题，通常位于表格之上。

  5. 样式和布局：

    • 可以使用 CSS 来美化表格，如设置边框、背景色、字体等样式。
    • 使用表格布局属性（如宽度、高度、对齐方式等）来控制表格在页面上的显示方式。

  6. 语义和可访问性：

    • 确保表格结构清晰，并正确使用语义化的元素。
    • 使用适当的标签和属性，以确保表格在各种设备和浏览器上都能正确显示和解释。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用卷积网络对城市住区进行分类

用卷积网络对城市住区进行分类

这将是解释我的人工智能硕士最终项目的几篇文章中的第一篇&#xff0c;我想在其中详细解释从项目的想法到结论&#xff0c;我将在其中展示给定解决方案的所有代码。 总体思路 城市扩张地图集 https://www.lincolninst.edu/es/publications/books/atlas-urban-expansion 项…
阅读更多...
【linux】chmod权限开放（整个文件夹）

【linux】chmod权限开放（整个文件夹）

文章目录 起因权限查看权限修改 失败权限修改成功 起因 想要共享conda环境给同事&#xff0c;发现同事没权限。 权限查看 ls #查看当前目录 ls -l # 查看当前目录的东西和权限正常情况下是显示 三个rwx分别属于user&#xff0c;group&#xff0c;others 前面第一个rwx 是针…
阅读更多...
【斐波那契】原来困扰多年的生兔子问题竟然能够轻松拿捏...万能公式法...

【斐波那契】原来困扰多年的生兔子问题竟然能够轻松拿捏...万能公式法...

上篇文章我们讲解了「矩阵快速幂」技巧&#xff0c;通过快速幂极大的优化了 斐波那契数列 的求解问题。并且通过分析知道了 系数矩阵 是解决问题的关键。 本文我们继续深化对于 系数矩阵 的求解&#xff0c;介绍一种通用方法&#xff0c;一举解决所有 斐波那契及变种类型 的问…
阅读更多...
路由器使用docker安装mysql和redis服务

路由器使用docker安装mysql和redis服务

路由器使用docker安装mysql和redis服务 1.先在路由器中开启docker功能 &#xff08;需要u盘 或者 移动硬盘&#xff09; 2. docker 管理地址 :http://192.168.0.1:11180/#/ 3. 拉取镜像 4. mysql容器参数设置 MYSQL_ROOT_PASSWORD 5. redis 容器设置 开发经常需要用到 &…
阅读更多...
【工具-PyCharm】

【工具-PyCharm】

工具-PyCharm ■ PyCharm-简介■ PyCharm-安装■ PyCharm-使用■ 修改主题■ 设置字体■ 代码模板■ 解释器配置■ 文件默认编码■ 快捷键■ 折叠■ 移动■ 注释■ 编辑■ 删除■ 查看■ 缩进■ 替换 ■ PyCharm-简介 官方下载地址 Professional&#xff1a;专业版&#xff0…
阅读更多...
贪吃蛇撞墙功能的实现 和自动行走刷新地图 -- 第三十天

贪吃蛇撞墙功能的实现 和自动行走刷新地图 -- 第三十天

1.撞墙 1.1最初的头和尾指针要置为空&#xff0c;不然是野指针 1.2 在增加和删除节点后&#xff0c;判断是否撞墙&#xff0c;撞墙则初始话蛇 1.3在撞墙后初始化蛇&#xff0c;如果头不为空就撞墙&#xff0c;得定义临时指针指向头&#xff0c;释放头节点 2.自动刷新地图 2.1…
阅读更多...
EMP.DLL是什么文件?EMP.DLL文件缺失怎么解决

EMP.DLL是什么文件?EMP.DLL文件缺失怎么解决

在深入探讨计算机世界的微观结构时&#xff0c;我们会发现诸多支撑着软件正常运行的关键组件——动态链接库文件。其中&#xff0c;EMP.dll便是一个颇具代表性的例子。本文旨在全面解析EMP.dll的本质属性、功能作用以及当它丢失时可能带来的问题&#xff0c;结合实践经验&#…
阅读更多...
9节点牛拉法matlab

9节点牛拉法matlab

潮流计算程序matlab 牛拉法 采用matlab对9节点进行潮流计算&#xff0c;采用牛拉法&#xff0c;程序运行可靠。
阅读更多...
白平衡简介

白平衡简介

文章目录 白平衡的概念白平衡的调节常见的白平衡模式 白平衡的概念 白平衡是指摄影、摄像和显示技术中的一项重要概念&#xff0c;用于调节图像中的白色或中性灰色的色彩&#xff0c;使其看起来在不同光源条件下都是准确的白色或灰色。白平衡的主要目的是确保图像的色彩准确性…
阅读更多...
配置jupyter的启动路径

配置jupyter的启动路径

jupyter的安装参考&#xff1a;python环境安装jupyter-CSDN博客 1&#xff0c;背景 继上一篇python环境安装jupyter&#xff0c;里面有一个问题&#xff0c;就是启动jupyter&#xff08;命令jupyter notebook&#xff09;之后&#xff0c;页面默认显示的是启动时候的路径。 …
阅读更多...
Synchronized关键字的深入分析

Synchronized关键字的深入分析

一、引言 在多线程编程中&#xff0c;正确地管理并发是确保程序正确运行的关键。Java提供了多种同步工具&#xff0c;其中synchronized关键字是最基本且最常用的同步机制之一。本文旨在深入解析synchronized的实现原理&#xff0c;探讨其在不同应用场景中的使用&#xff0c;并…
阅读更多...
vue3第二十五节（h()函数的应用）

vue3第二十五节（h()函数的应用）

1、前言&#xff1a; 为什么vue 中已经有 template 模板语法&#xff0c;以及JSX了&#xff0c;还要使用 h()渲染函数&#xff1b; vue 中选择默认使用template 静态模板分析&#xff0c;有利于DMO性能的提升&#xff0c;而且更接近真实的HTML&#xff0c;便于开发设计人员理…
阅读更多...
工业测径仪的应用场景和可靠性判断

工业测径仪的应用场景和可靠性判断

关键字:线缆测径仪,圆棒测径仪,圆管测径仪,金属棒管测径仪,工业测径仪,智能测径仪 智能测径仪主要应用于以下领域&#xff1a; 金属加工&#xff1a;测量金属线材、棒材、管材等的直径。线缆制造&#xff1a;检测电线、电缆的直径。塑料管材生产&#xff1a;监控塑料管材的外…
阅读更多...
BGP的路径属性

BGP的路径属性

路径属性 l每条BGP路由都拥有多个的路径属性&#xff0c;有些是必须携带的&#xff0c;有些是可选添加的 lBGP的路径属性将影响最优路由的选择 lBGP路径属性是描述路由的一组参数&#xff0c;BGP根据路由的属性选择最佳路由&#xff0c;可以人为置值&#xff0c;以便执行路由…
阅读更多...
第十五届蓝桥杯省赛第二场C/C++B组E题【遗迹】题解

第十五届蓝桥杯省赛第二场C/C++B组E题【遗迹】题解

解题思路 错解 贪心&#xff1a;每次都移动至当前最近的对应方块上。 反例&#xff1a; s s s abxac t t t abac 贪心结果&#xff08;下标&#xff09; 0 → 1 → 0 → 4 0 \rightarrow 1 \rightarrow 0 \rightarrow 4 0→1→0→4&#xff0c;答案为 5 5 5。 正确结…
阅读更多...
六天以太坊去中心化租房平台，前端+合约源码

六天以太坊去中心化租房平台，前端+合约源码

六天以太坊去中心化租房平台 概述项目结构合约部署运行项目功能介绍一、首页二、房东后台我的房屋我的订单上架新房屋 三、租户后台我的房屋我的订单 四、仲裁后台 下载地址 概述 六天区块链房屋租赁系统&#xff0c;采用去中心化的方式实现了房屋的租赁功能。房东可在平台上托…
阅读更多...
第二节：反相器、与非门Verilog实现

第二节：反相器、与非门Verilog实现

1.反相器 module inv(A,Y);//A,Y是我的端口 input A;//定义属性 output Y; assign Y ~A;//定义输入输出关系 endmodule //testbench of inv timescale 1ns/10ps//1ns是时间单位&#xff0c;10ps为精度 module inv_tb; reg a; wire y; inv inv(.A(a),.Y(y)); initial begin a…
阅读更多...
图片批量高效管理，轻松调整图片着色，让图片瞬间焕发新生！

图片批量高效管理，轻松调整图片着色，让图片瞬间焕发新生！

在数字化时代&#xff0c;图片成为了我们生活与工作中不可或缺的一部分。然而&#xff0c;面对海量的图片资源&#xff0c;如何高效、便捷地管理并调整它们的着色&#xff0c;成为了许多人的挑战。现在&#xff0c;我们为您带来了一款全新的图片批量管理工具&#xff0c;让您轻…
阅读更多...
【计算机系统基础读书笔记】1.1.2 冯诺依曼机基本结构

【计算机系统基础读书笔记】1.1.2 冯诺依曼机基本结构

1.1.2 冯诺依曼机基本结构 冯诺依曼机基本结构如图所示&#xff1a; 模型机中主要包括&#xff1a; 主存储器&#xff1a;用来存放指令和数据&#xff0c;简称主存或内存&#xff1b; 算数逻辑部件&#xff08;Arithmetic Logic Unit&#xff0c;简称ALU&#xff09;&#x…
阅读更多...
【数据结构】链表的中间节点

【数据结构】链表的中间节点

给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 Definition for singly-linked list.struct ListNode {int val;struct ListNode *next;};typedef struct ListNode ListNode; struct ListNode…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023