Before CSS appear, table of elements often used to layout. This practice is no longer recommended after HTML4. And now some overkill, using a table showing data could be to say no specification. This article details the HTML form table
table
[] Default style
//IE7-浏览器不支持border-spacing
table{
border-collapse: separate;
border-spacing: 2px;
border: 1px solid gray;
}
【Attributes】
1, border (in the html5, border can only be "1" or "") (html5 obsolete)
border="0"//没有边框
border="8"//8像素宽的边框
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
2, cellpadding (px /%) (html5 obsolete)
Predetermined spacing between the cell boundary and the cell content
3, cellspacing (px /%) (html5 obsolete)
Predetermined spacing between the cells
4, summary (html5 obsolete)
Summary Table of contents
5, width (html5 obsolete)
Table width
<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- browser can not display properly) (html5 obsolete)
7, rules (IE7- browser can not display properly) (html5 obsolete)
【style】
1, border-spacing (alternatively HTML attributes cellspaing, IE7- not supported)
Note: Only when the border-collapse value is separate, the style is valid
border-spacing: x y
//x:水平间距 y:垂直间距。若只有一个值，则水平间距和垂直间距相等。注意，不可为负值。
2, empty-cells (IE7- not supported)
empty-cells: hide 不在空单元格周围绘制边框和背景，类似于hidden效果
empty-cells: show(默认) 在空单元格周围绘制边框和背景
3, CSS There are actually two distinct borders model. Press arrangement terms, if the difference between the cells are separated from each other, are separated in the frame work model; the other is the combined borders model, the cell borders will be merged with each other.
border-collapse:separate;
Note: in the partition frame model, not a row, row groups and column groups provided columns border.
border-collapse:collapse;
In the combined model frame, the table can not be set padding padding, and there is no border between the cell pitch. The border between the cells will form an imaginary line between the cell center, and the width of the table contains only half of the table border
[] Border merger rules
a, a border-style border merger is hidden, it will take precedence over all other border merger. All borders at this location are hidden
b, a merger of the border border-style is none, it's the lowest priority
c, wide frame in preference to a narrow bezel
d, if the same width, double \ solid \ dashed \ dotted \ ridge \ outset \ groove \ inset, decreasing priority
e, if the patterns are the same, cell \ row \ row group \ column \ column group \ table, priority is gradually degraded
4、table-layout
table-layout:auto//自动宽度布局
[Step] automatic layout
a, in a cell for calculating the minimum and maximum cell width
B, one for each of the calculated minimum and maximum column width
C, if the cells across columns, minimum column width equal to the sum of the minimum cross-column cells cell width
table-layout:fixed//固定宽度布局
Note: For long text table cell, using word-wrap or word-break to force a line, the text using text-overflow spill control are required to achieve set table-layout: fixed
[STEP] fixed layout
a, all column element width attribute value is not auto width of the column width is set according to the value
B, if the width of a column is auto, this column is set according to the width of the cell, across multiple columns if the average width of the distribution
c, such that the width of the column is still auto, automatically determine its size, its width equal as possible
Note: fixed-width layout, the user agent can be calculated faster layout table
5、vertical-align
vertical-align: top;//顶端对齐
vertical-align: bottom;//底端对齐
vertical-align: middle;//中间对齐
vertical-align: baseline(默认);//基线对齐
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
It will be ignored sub \ super \ \ text-bottom applied to text-top table cell when: Note: vertical-align
Row
【<tr><th><td>】
<tr>行 table row
<th>表头 table head
<td>表格数据 table data
[] Default style
th{
padding: 1px;
text-align: center;
font-weight: bold;
}
td{
padding: 1px;
}
【Attributes】
1、colspan
A predetermined number of columns of cells may be spanned
2、rowspan
A predetermined number of rows of cells can be spanned
Note: For table elements generate rectangular rows of boxes that have content, padding and borders, but no margins margin. Header rendered as bold text centered
<Demonstration block> click on the appropriate property values can be demonstrated
Row
【】
-> column column
Column of the table define one or more attribute values
-> column group column groups
The columns in the table combined to be formatted
【Attributes】
span
The number of columns specified in col element should span
【style】
1、visibility:collapse
All the cells of the row or column group is not displayed (set to other values invalid)
2、border
Only when the border-collapse: collapse when, in order to set border
3、background
And only when the cell line has a transparent background, the background row or column group is visible
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、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚
【表格标题】
【默认样式】
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;}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
注意：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都可设置
