0

0

html table表格是什么?标签中各种属性的使用方法

寻∝梦

寻∝梦

发布时间:2018-08-22 13:59:09

|

25594人浏览过

|

来源于php中文网

原创

html table表格是什么?

标签中的各种属性和使用全在这篇文章中,非常适合初识table标签的人来学习,这篇文章把表格的基础属性全部都说了清楚,html table表格的作用还有属性以及一些用法都在这上面了

首先让我们了解什么是表格,还有表格的作用

什么是table表格:由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的

table表格的作用:以一定的结构来显示信息的。 

我们如何使用table表格:

立即学习前端免费学习笔记(深入)”;

定义表格:

创建表行:

创建列(单元格):

 

注意:默认情况下,每行中的列数是统一的。

table : display:table;

html table表格的特点:

1.独占一行

2.宽度自适应(由内容来决定) 

html table的表格属性:

1、

属性

    1.width:设置表格宽度

    2.height:设置表格高度

    3.align:设置 表格 在其 父元素中的水平对齐方式,取值:left,center,right

    4.border:边框,边框宽度,以px为单位的数值,px可以省略

    5.cellpadding

         单元格内边距

         单元格边框与内容之间的距离

    6.cellspacing

        单元格外边距

        单元格与单元格之间或者单元格与表格之间的 距离

    7.bgcolor:背景颜色

2、table中的

属性

    1.align:该行的内容 水平对齐方式

    2.valign

        该行的内容 垂直对齐方式

        取值:top,middle,bottom

    3.bgcolor

3、table中的

        作用:为表格定义标题

        位置:表格正上方居中显示

<table>
    <caption>标题</caption>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2、行标题或列标题

    列标题:第一行中的每一列,加粗,水平居中的效果显示

    行标题:每行里面的第一列, 加粗,水平居中的效果显示

    行(列)标题:

3、表格的复杂应用

1、行分组

表格可以被划分成3个部分

        1、表头

        2、表主体

        3、表尾     

<table>
    <tbody>
         <tr></tr>
         <tr></tr>
    </tbody>
</table>

注意:如果不对表格行进行分组的话,那么默认都属于 tbody 中

2、不规则表格

每行中的列数,不是统一化的。

1.跨列

    合并列,让指定的单元格,横向向右,合并几个单元格(包含自己)

语法:td 的 colspan 属性

2.跨行

免费语音克隆
免费语音克隆

这是一个提供免费语音克隆服务的平台,用户只需上传或录制一段 5 秒以上的清晰语音样本,平台即可生成与用户声音高度一致的 AI 语音克隆。

下载

合并行,让指定的单元格,纵向向下,合并几个单元格(包含自己)

语法:td 的 rowspan 属性

注意:无论是跨行还是跨列,被合并的单元格一定从代码中删除出去

3、表格的嵌套

     在一个表格中,又嵌入了另外一个表格

被嵌套的表格必须出现在

作用:将标题位置由默认的位置改到表格之下

属性:caption-side

取值:

      1、top:默认

      2、bottom:标题位于表格之下

4、html table表格样式属性之显示规则

1.作用

指定浏览器以什么样的方式来布局一个表格。实际是指定了单元格的算法规则

默认算法:单元格的宽由内容来决定,不受设置的width值来限定。

2.属性:table-layout

取值:

1、auto:默认值,自动,列宽由内容来决定

2、fixed:固定表格布局,列宽由设定的值决定。

3、自动表格布局&固定表格布局

  1.自动表格布局(auto)

    单元格的大小会适应内容大小

    在表格复杂时,加载会比较慢

    适用于不确定每列大小时使用

    传统表格表现方式

  2.固定表格布局(fixed)

    单元格的大小由设定的值来决定,与内容无关

    会加速显示表格,浏览器在加载完第一行的时候就不用再计算了。 

4、隐藏的显示效果

属性:  visibility:collapse

用在表格元素上,删除一行或一列,不影响表格整个布局

谢谢你看完了本篇文章,如果有什么疑问或者是什么关于这上面的问题你都可以在下面提问。

还有一篇是这个进阶版的文章,欢迎点击:html5 table标签的样式介绍(另附html5 table css居中的实例)

【小编的相关文章】

html em标签的作用是什么?标签的区别

html optgroup标签是什么意思?关于html optgroup标签的用法和属性实例解析

属性
  • width

  • height

  • align

  • valign

  • bgcolor

  • colspan:设置单元格跨列

  • rowspan:设置单元格跨行

还有表格中的其他标记:

1、

<table>
    <tr>
       <td>
<table>
    <tr>
        <td>
        </td>
    </tr>
</table>
       </td>
    </tr>
</table>

html table表格特有的样式属性

1、html table表格样式属性之边框合并

属性:border-collapse

取值:

    1.separate:默认值,分离边框模式

    1.collapse:边框合并模式

2、html table表格样式属性之边框边距

1.作用:设置相邻单元格边框之间的距离(类似于cellspacing)

2.属性:border-spacing

取值:

1、取1个值

      表示水平和垂直间距相等

2.取2个值

        第一个值表示的 水平间距

        第二个值表示的 垂直间距

        两个值之间用 空格 隔开

3.要求

        border-collapse必须为separate

        必须为分离边框模式时有效

3、html table表格样式属性之标题位置

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

16

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

23

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

75

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

95

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

218

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

420

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

168

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

222

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

33

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
兄弟连高洛峰div+css视频教程
兄弟连高洛峰div+css视频教程

共21课时 | 4.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

AngularJS教程
AngularJS教程

共24课时 | 4.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号