在 CSS 出现之前, table 元素常常用来布局. 这种做法在 html4 之后不再推荐使用. 而现在有些矫枉过正, 使用 table 展示数据都可能会被说不规范. 本文将详细介绍 HTML 表格 table
table
[默认样式]
- //IE7 - 浏览器不支持 border-spacing
- table{
- border-collapse: separate;
- border-spacing: 2px;
- border: 1px solid gray;
- }
[属性]
- 1,border(在 html5 中, border 只能为 "1" 或 " ")(html5 已废弃)
- border="0"// 没有边框
- border="8"//8 像素宽的边框
- 2,cellpadding(px/%)(html5 已废弃)
规定单元边界与单元内容之间的间距
3,cellspacing(px/%)(html5 已废弃)
规定单元格之间的间距
4,summary(html5 已废弃)
表格内容的摘要
5,width(html5 已废弃)
表格宽度
- <table border="2" cellpadding="5" cellspacing="3" summary="测试表格" width="300">
- <tr>
- <td>row 1, cell 1</td>
- <td>row 1, cell 2</td>
- </tr>
- <tr>
- <td>row 2, cell 1</td>
- <td>row 2, cell 2</td>
- </tr>
- </table>
6,frame(IE7 - 浏览器不能正常显示)(html5 已废弃)
值 | 描述 |
---|---|
void | 不显示外侧边框。 |
above | 显示上部的外侧边框。 |
below | 显示下部的外侧边框。 |
hsides | 显示上部和下部的外侧边框。 |
vsides | 显示左边和右边的外侧边框。 |
lhs | 显示左边的外侧边框。 |
rhs | 显示右边的外侧边框。 |
box | 在所有四个边上显示外侧边框。 |
border | 在所有四个边上显示外侧边框。 |
7,rules(IE7 - 浏览器不能正常显示)(html5 已废弃)
值 | 描述 |
---|---|
none | 没有线条。 |
groups | 位于行组和列组之间的线条。 |
rows | 位于行之间的线条。 |
cols | 位于列之间的线条。 |
all | 位于行和列之间的线条。 |
< 演示框 > 点击下列相应属性值可进行演示
[样式]
1,border-spacing[可替代 HTML 属性 cellspaing](IE7 - 不支持)
[注意] 只有当 border-collapse 值为 separate 时, 该样式才有效
- border-spacing: x y
- //x: 水平间距 y: 垂直间距. 若只有一个值, 则水平间距和垂直间距相等. 注意, 不可为负值.
- 2,empty-cells(IE7 - 不支持)
empty-cells: hide 不在空单元格周围绘制边框和背景, 类似于 hidden 效果
empty-cells: show(默认) 在空单元格周围绘制边框和背景
3,CSS 实际上有两种截然不同的边框模型. 按布局术语来说, 如果单元格相互之间是分隔的, 是分隔边框模型在起作用; 另一种是合并边框模型, 单元格边框会相互合并.
border-collapse:separate;
[注意] 在分隔边框模型中, 不能为行, 行组, 列和列组设置边框.
border-collapse:collapse;
在合并边框模型中, 表格无法设置内边距 padding, 且单元格边框之间也没有间距. 单元格之间的边框会在单元格间的假想表格线上居中, 且表格宽度只包含表格边框的一半
[边框合并的规则]
a, 某个合并边框的 border-style 为 hidden, 它会优先于所有其他合并边框. 这个位置上的所有边框都隐藏
b, 某个合并边框的 border-style 为 none, 它的优先级最低
c, 宽边框优先于窄边框
d, 若宽度相同, double\solid\dashed\dotted\ridge\outset\groove\inset, 优先级逐渐降低
e, 若样式也相同, cell\row\row group\column\column group\table, 优先级逐渐降级
< 演示框 > 点击下列相应属性值可进行 border-style 的演示
- 4,table-layout
- table-layout:auto// 自动宽度布局
[自动布局的步骤]
a, 对于一列中的单元格, 计算最小和最大单元格宽度
b, 对于各一列, 计算最小和最大列宽
c, 若单元格跨列, 最小列宽之和要等于跨列单元格最小单元格宽度
table-layout:fixed// 固定宽度布局
[注意] 对于表单元格的长文本来说, 使用 Word-wrap 或 Word-break 来强制换行, 使用 text-overflow 实现文本溢出控制都需要设置 table-layout:fixed
[固定布局的步骤]
a,width 属性值不是 auto 的所有列元素会根据 width 值设置该列的宽度
b, 如果一个列的宽度为 auto, 则根据该单元格设置此列宽度, 如果跨多列, 则宽度平均分配
c, 如果列宽度仍为 auto, 则自动确定其大小, 使其宽度尽可能相等
[注意] 使用固定宽度布局, 用户代理可以更快地计算出表格的布局
- 5,vertical-align
- vertical-align: top;// 顶端对齐
- vertical-align: bottom;// 底端对齐
- vertical-align: middle;// 中间对齐
- vertical-align: baseline(默认);// 基线对齐
[注意]vertical-align:sub\super\text-top\text-bottom 应用到表格单元格时会被忽略
行
- [<tr><th><td>]
- <tr > 行 table row
- <th > 表头 table head
- <td > 表格数据 table data
[默认样式]
- th{
- padding: 1px;
- text-align: center;
- font-weight: bold;
- }
- td{
- padding: 1px;
- }
[属性]
1,colspan
规定单元格可横跨的列数
2,rowspan
规定单元格可横跨的行数
[注意] 关于行的表格元素生成矩形框, 这些框有内容, 内边距和边框, 但是没有外边距 margin. 表头呈现为居中的粗体文本
< 演示框 > 点击下列相应属性值可进行演示
列
- [<col><colgroup>]
- <col> -> column 列
为表格中一个或多个列定义属性值
<colgroup> -> column group 列组
对表格中的列进行组合, 以便对其进行格式化
[属性]
span
规定 col 元素应该横跨的列数
[样式]
1,visibility:collapse
该列或列组的所有单元格不显示 (设置为其他值则无效)
2,border
只有当 border-collapse:collapse 时, 才能设置 border
3,background
只有当单元格及其行有透明背景时, 列或列组的背景才可见
4,width
定义列或列组的最小宽度
- <table border="1" style="border-collapse: collapse">
- <colgroup span="2" style="width:100px; background-color: red"></colgroup>
- <col style="background-color: green; width:200px; border: 3px solid blue;">
- <tr>
- <td > 数字 </td>
- <td > 中文 </td>
- <td > 英文 </td>
- </tr>
- <tr>
- <td>1</td>
- <td > 一 </td>
- <td>a</td>
- </tr>
- <tr>
- <td>2</td>
- <td > 二 </td>
- <td>b</td>
- </tr>
- </table>
其他表格元素
- [<thead><tbody><tfoot>]
- <thead > 表格页眉
- <tbody > 表格主体
- <tfoot > 表格页脚
[注意] 它们的出现次序是: thead,tfoot,tbody, 这样浏览器就可以在收到所有数据前呈现页脚
[<caption > 表格标题]
[默认样式]
caption{ text-align: center; }
[样式]
caption-side: top(默认) caption-side: bottom
[注意]<caption > 标签必须紧随 < table > 标签之后, 且只能对每个表格定义一个标题
<table border="1"> <caption style="caption-side:bottom"> 北京天气 </caption> <thead> <tr> <th > 地区 </th> <th > 天气 </th> </tr> </thead> <tfoot> <tr> <td > 北京 </td> <td > 都雾霾 </td> </tr> </tfoot> <tbody> <tr> <td > 城八区 </td> <td > 雾霾 </td> </tr> <tr> <td > 郊区 </td> <td > 雾霾 </td> </tr> </tbody> </table>
display table{ display: table; } thead{ display: table-header-group; } tbody{ display: table-row-group; } tfoot{ display: table-footer-group; } tr{ display: table-row; } td,th{ display: table-cell; } col{ display: table-column; } colgroup{ display: table-column-group; } caption{ display: table-caption; }
[注意]IE7 - 浏览器不支持为 HTML 元素设置与表格有关的 display 值
匿名表格对象
CSS 定义了一种机制, 将遗漏的组件作为匿名对象插入. 详细插入规则如下:
1, 如果 table-cell 元素的父元素不是 table-row 元素, 则插入匿名 table-row 对象
2, 如果 table-row 元素的父元素不是 table,inline-table 或 table-row-group 元素, 则插入匿名 table 元素
3, 如果 table-column 元素父元素不是 table,inline-table 或 table-row-group 元素, 则插入匿名 table 元素
4, 如果 table-row-group,table-header-group,table-footer-group,table-column-group 或 table-caption 的父元素不是 table 元素, 则插入匿名 table 元素
5, 如果 table 元素或 inline-table 元素的子元素不是 table-row-group,table-header-group,table-footer-group,table-column-group 或 table-caption, 则插入匿名 table-row 元素
6, 如果 table-row-group,table-header-group,table-footer-group 元素的子元素不是 table-row 元素, 则插入匿名 table-row 元素
7, 如果 table-row 元素的子元素不是 table-cell 元素, 则插入匿名 tabel-cell 元素
表格层
CSS 定义了 6 个不同的层, 对应表各个方面的样式都在其各自的层上绘制. 默认地, 所有元素背景都是透明的, 如果单元格, 行, 列等没有自己的背景, 则 table 元素的背景将透明这些内部元素可见.
< 演示框 > 点击下列相应属性值可进行演示
边距设置
[<table>]
若处于分隔边框模型, margin 和 padding 都可设置
若处于合并边框模型, 只可设置 margin
[<thead><tbody><tfoot><tr><col><colgroup>]
margin 和 padding 都不可设置
[<td><th>]
不可设置 margin, 但可以设置 padding
[<caption>]
margin 和 padding 都可设置
本文转载自: https://www.cnblogs.com/xiaohuochai/p/5008466.html
想要了解更多相关知识, 可访问 前端学习网站 https://www.html.cn/ !!
来源: http://www.css88.com/web/html/20336.html