Rumah >hujung hadapan web >html tutorial >html table表格是什么?<table>标签中各种属性的使用方法
html table表格是什么?f5d188ed2c074f8b944552db028f98a1标签中的各种属性和使用全在这篇文章中,非常适合初识table标签的人来学习,这篇文章把表格的基础属性全部都说了清楚,html table表格的作用还有属性以及一些用法都在这上面了
首先让我们了解什么是表格,还有表格的作用
什么是table表格:由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的
table表格的作用:以一定的结构来显示信息的。
我们如何使用table表格:
定义表格:f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08
创建表行:a34de1251f0d9fe1e645927f19a896e8fd273fcf5bcad3dfdad3c41bd81ad3e5
创建列(单元格):b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
注意:默认情况下,每行中的列数是统一的。
table : display:table;
html table表格的特点:
1.独占一行
2.宽度自适应(由内容来决定)
html table的表格属性:
1、f5d188ed2c074f8b944552db028f98a1 属性
1.width:设置表格宽度
2.height:设置表格高度
3.align:设置 表格 在其 父元素中的水平对齐方式,取值:left,center,right
4.border:边框,边框宽度,以px为单位的数值,px可以省略
5.cellpadding
单元格内边距
单元格边框与内容之间的距离
6.cellspacing
单元格外边距
单元格与单元格之间或者单元格与表格之间的 距离
7.bgcolor:背景颜色
2、table中的a34de1251f0d9fe1e645927f19a896e8 属性
1.align:该行的内容 水平对齐方式
2.valign
该行的内容 垂直对齐方式
取值:top,middle,bottom
3.bgcolor
3、table中的b6c5a531a458a2e790c1fd6421739d1c 属性
width
height
align
valign
bgcolor
colspan:设置单元格跨列
rowspan:设置单元格跨行
还有表格中的其他标记:
1、63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8
作用:为表格定义标题
位置:表格正上方居中显示
<table> <caption>标题</caption> <tr> <td></td> <td></td> </tr> </table>
2、行标题或列标题
列标题:第一行中的每一列,加粗,水平居中的效果显示
行标题:每行里面的第一列, 加粗,水平居中的效果显示
行(列)标题:b4d429308760b6c2d20d6300079ed38e01c3ce868d2b3d9bce8da5c1b7e41e5b
3、表格的复杂应用
1、行分组
表格可以被划分成3个部分
1、表头 ae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a
2、表主体 92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1
3、表尾 06669983c3badb677f993a8c29d18845d93f946a39a259de3097f230ac6e3edf
<table> <tbody> <tr></tr> <tr></tr> </tbody> </table>
注意:如果不对表格行进行分组的话,那么默认都属于 tbody 中
2、不规则表格
每行中的列数,不是统一化的。
1.跨列
合并列,让指定的单元格,横向向右,合并几个单元格(包含自己)
语法:td 的 colspan 属性
2.跨行
合并行,让指定的单元格,纵向向下,合并几个单元格(包含自己)
语法:td 的 rowspan 属性
注意:无论是跨行还是跨列,被合并的单元格一定从代码中删除出去
3、表格的嵌套
在一个表格中,又嵌入了另外一个表格
被嵌套的表格必须出现在b6c5a531a458a2e790c1fd6421739d1c中
<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表格样式属性之标题位置
63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8
作用:将标题位置由默认的位置改到表格之下
属性: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标签的作用是什么?907fae80ddef53131f3292ee4f81644b和5a8028ccc7a7e27417bff9f05adf5932标签的区别
html optgroup标签是什么意思?关于html optgroup标签的用法和属性实例解析
Atas ialah kandungan terperinci html table表格是什么?<table>标签中各种属性的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!