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

[复制链接]
查看1588 | 回复9 | 2020-10-2 01:28:21 | 显示全部楼层 |阅读模式
html table表格是什么?<table>标签中的各种属性和使用全在这篇文章中,非常适合初识table标签的人来学习,这篇文章把表格的基础属性全部都说了清楚,html table表格的作用还有属性以及一些用法都在这上面了

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

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

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

我们如何使用table表格:

定义表格:<table></table>

创建表行:<tr></tr>

创建列(单元格):<td></td>

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

table : display:table;

html table表格的特点:

1.独占一行

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

html table的表格属性:

1、<table> 属性

1.width:设置表格宽度

2.height:设置表格高度

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

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

5.cellpadding

单元格内边距

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

6.cellspacing

单元格外边距

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

7.bgcolor:背景颜色

2、table中的<tr> 属性

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

2.valign

该行的内容 垂直对齐方式

取值:top,middle,bottom

3.bgcolor

3、table中的<td> 属性

  • width

  • height

  • align

  • valign

  • bgcolor

  • colspan:设置单元格跨列

  • rowspan:设置单元格跨行

还有表格中的其他标记:

1、<caption></caption>

作用:为表格定义标题

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

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

2、行标题或列标题

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

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

行(列)标题:<th></th>

3、表格的复杂应用

1、行分组

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

1、表头 <thead></thead>

2、表主体 <tbody></tbody>

3、表尾 <tfoot></tfoot>

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

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

2、不规则表格

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

1.跨列

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

语法:td 的 colspan 属性

2.跨行

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

语法:td 的 rowspan 属性

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

3、表格的嵌套

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

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

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

<caption></caption>

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

属性: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标签的作用是什么?<em>和<i>标签的区别

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

以上就是html table表格是什么?<table>标签中各种属性的使用方法的详细内容,更多请关注爱上源码网其它相关文章!

  • 微信
  • 分享
  • 相关标签:table html
  • 本文原创发布爱上源码网,转载请注明出处,感谢您的尊重!
    • 上一篇:html style标签是什么意思?关于style标签的使用方法详解
    • 下一篇:HTML font标签的color属性是什么?fontcolor的用法介绍(附颜色代码表)

    相关文章

    相关视频

    • css之使table也能overflow:hidd...
    • css+table 1px边框单元格_经验交流
    • table高级应用把表格进行到底(必看)_经验交流
    • 像table一样布局div_CSS/HTML
    • 使用jQuery操作HTML的table表格的实例...
    • html table表格是什么?<table...
    • TableLayout(表格布局)
    • CSS 表格(table)
    • PHP开发之制作简单日历设置table中的tr与td
    • php字符串函数之get_html_translation_table
    本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn! 本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~
    回复

    使用道具 举报

    简0 | 2020-12-10 12:36:43 | 显示全部楼层
    祝愿悟空源码越办越好!
    回复

    使用道具 举报

    chris是小胖纸 | 2021-8-3 08:55:49 | 显示全部楼层
    我是来白嫖资源的!
    回复

    使用道具 举报

    绣绣仙女酌 | 2022-2-19 22:38:25 | 显示全部楼层
    加油!悟空源码,继续努力!支持你!
    回复

    使用道具 举报

    大黄瓜xxxl | 2022-4-25 20:11:52 | 显示全部楼层
    资源太多了,准备办个会员
    回复

    使用道具 举报

    天蝎孤星等 | 2022-6-1 15:15:18 | 显示全部楼层
    有情怀的站啊,爱了
    回复

    使用道具 举报

    支持悟空源码,越来越好
    回复

    使用道具 举报

    华胥 | 2022-12-16 14:40:20 | 显示全部楼层
    6666悟空源码资源多!
    回复

    使用道具 举报

    立郎 | 2023-3-14 11:40:40 | 显示全部楼层
    这个下载站资源真齐全
    回复

    使用道具 举报

    auqsio7413820 | 2023-9-13 02:51:42 | 显示全部楼层
    很不错的资源站
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则