html 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中的 width height align valign bgcolor colspan:设置单元格跨列 rowspan:设置单元格跨行 还有表格中的其他标记: 1、<caption> 作用:为表格定义标题 位置:表格正上方居中显示 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标签的用法和属性实例解析 属性
属性 属性 <table> <caption>标题</caption> <tr> <td></td> <td></td> </tr></table>
<table> <tbody> <tr></tr> <tr></tr> </tbody></table>
中 <table> <tr> <td><table> <tr> <td> </td> </tr></table> </td> </tr></table>