htmltable表格是什么？<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中的

作用：为表格定义标题

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

2、行标题或列标题

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

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

行(列)标题:

3、表格的复杂应用

1、行分组

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

1、表头

2、表主体

3、表尾

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

2、不规则表格

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

1.跨列

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

语法：td 的 colspan 属性

2.跨行

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

语法：td 的 rowspan 属性

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

3、表格的嵌套

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

被嵌套的表格必须出现在中

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表格样式属性之标题位置

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

属性：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标签的用法和属性实例解析

以上就是html table表格是什么？

标签中各种属性的使用方法的详细内容，更多请关注 第一PHP社区 其它相关文章！

• html
• 算法
• css
• php

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

• match

  《数据结构》学习笔记3——串匹配算法性能评估

  

  本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

  蜡笔小新   2023-12-13 16:16:05
• match

  asp.net微信公众平台开发目录汇总陆续更新的相关内容

  本文内容为asp.net微信公众平台开发的目录汇总，包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建（接入）、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面，适合综合运用。 ... [详细]

  蜡笔小新   2023-12-14 22:40:22
• match

  HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

  

  本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

  蜡笔小新   2023-12-14 15:08:18
• match

  Alink回归预测的不完善问题及期待

  本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

  蜡笔小新   2023-12-14 14:25:33
• match

  C#之数据集：DataSet对象的使用及相关方法详解

  本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

  蜡笔小新   2023-12-14 12:09:13
• get

  OC学习笔记之@property和@synthesize

  本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

  蜡笔小新   2023-12-14 12:05:06
• get

  Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

  

  本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

  蜡笔小新   2023-12-14 12:01:13
• get

  Hibernate基础映射

  在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

  蜡笔小新   2023-12-14 10:57:47
• spring

  SpringBoot集成前端模版（thymeleaf）的配置步骤

  本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

  蜡笔小新   2023-12-14 10:11:46
• spring

  知识图谱——机器大脑中的知识库

  

  本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

  蜡笔小新   2023-12-14 10:06:19
• spring

  测试人的性格，点火让他着急，考验婚姻问题的善意玩人

  本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]

  蜡笔小新   2023-12-14 09:10:09
• process

  Linux进程控制块PCBtask_struct结构体结构及作用详解

  本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

  蜡笔小新   2023-12-13 21:31:18
• ip

  Voicewo在线语音识别转换jQuery插件的特点和示例

  

  本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

  蜡笔小新   2023-12-13 20:01:16
• get

  java 线程死锁模拟

  1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

  蜡笔小新   2023-12-13 19:12:25
• get

  后台获取视图对应的字符串

  

  1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

  蜡笔小新   2023-12-13 18:03:01

手机用户2602890925

这个家伙很懒，什么也没留下！

Tags | 热门标签

• process
• dockerfile
• scala
• object
• random
• const
• nodejs
• node.js
• default
• char
• testing
• ip
• match
• plugins
• spring
• c语言
• javascript
• hashcode
• golang
• stream
• typescript
• web3
• copy
• install
• get
• dll
• buffer
• express
• python3
• dagger

RankList | 热门文章

• 1嵌入资源第三讲：多格式文件内嵌入WPF资源文件
• 2设计从哪些角度出发,什么是设计观点
• 3C语言sscanf()函数：从字符串中读取指定格式的数据
• 4JavaScript范例体系详解
• 5使用 ES7 Decorators 简化this的绑定
• 6为PHP5安装curl和gd
• 7PostgreSQL的upsert实例操作(insert
• 8wordpress 一键搭建属于自己的网站
• 92023程序员寒冬是否也会来临？
• 10洪流学堂分享有赏·攻略
• 11开发笔记:mybatismybatis中insert 主键自增和不自增的插入情况mysql
• 12android app拉不起来 不报错,为什么我用android studio从git导入项目以后出现如下报错?难道还不支持android studio吗？...
• 13[题解]LuoGu1801：黑匣子_NOI导刊2010提高（06）
• 14React 分别打包测试、生产环境的配置
• 15WPF主窗口在项目子文件夹中如何启动

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有