首页 web前端 html教程 html table表格是什么?<table>标签中各种属性的使用方法

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

Aug 22, 2018 pm 01:59 PM
html table

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.跨行

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

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

以上是html table表格是什么?<table>标签中各种属性的使用方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles
属性

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