CSSの前に、多くの場合、レイアウトに使用する要素のテーブルに表示されます。このような行為は、もはやHTML4後に推奨されません。そして今、データを示す表を使用して、いくつかのやり過ぎは、何の仕様を言わないようにすることができます。この記事では、HTMLフォームのテーブルの詳細を
テーブル
[]デフォルトのスタイル
//IE7-浏览器不支持border-spacing
table{
border-collapse: separate;
border-spacing: 2px;
border: 1px solid gray;
}
[プロパティ]
図1に示すように、境界（HTML5では、境界は、 "1" 又は "" であることができる）（HTML5廃止）
border="0"//没有边框
border="8"//8像素宽的边框
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
2、CELLPADDING（PX /％）（HTML5廃止）
セル境界とセルの内容との間に所定の間隔
3、CELLSPACING（PX /％）（HTML5廃止）
セル間の間隔、所定
4、要約（HTML5廃止）
内容の概要表
図5に示すように、幅（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に示すように、フレーム（IE7-ブラウザが正しく表示できません）（HTML5廃止）
7、ルール（IE7-ブラウザが正しく表示できません）（HTML5廃止）
[スタイル]
1、ボーダー-間隔（あるいはHTMLがcellspaing属性、IE7-サポートされていません）
注意：国境崩壊値が分離している場合にのみ、スタイルが有効です
border-spacing: x y
//x:水平间距 y:垂直间距。若只有一个值，则水平间距和垂直间距相等。注意，不可为负值。
図2に示すように、空のセル（IE7-サポートされていません）
empty-cells: hide 不在空单元格周围绘制边框和背景，类似于hidden效果
empty-cells: show(默认) 在空单元格周围绘制边框和背景
3、CSSは、実際には2つの異なるボーダーモデルがあります。セル間の差は、互いに分離されているフレームワークモデルに分離されている場合のプレス装置の用語は、他の複合境界モデルである、セルの境界は、互いにマージされます。
border-collapse:separate;
注：パーティション・フレーム・モデルではなく、行、行グループと列グループは、列の境界を提供しました。
border-collapse:collapse;
複合モデルのフレームにおいて、テーブルは、パディングパディングを設定することができず、セルピッチとの間に境界は存在しません。セル間の境界は、セルの中心との間の仮想線を形成し、そしてテーブルの幅は、テーブル境界の半分のみが含まれてい
[]ボーダー合併規則
、ボーダースタイルのボーダー合併は、それが他のすべての境界線の合併よりも優先される、隠されています。この場所ですべての境界が隠されています
、ボーダーボーダースタイルの合併は、それが最も低い優先度どれBのされていません
狭いベゼルに優先してC、ワイドフレーム
優先順位を下げD、同じ幅、ダブル\固体\破線\点線の\尾根\当初\溝\はめ込み場合、
パターンは同じ、細胞\行\行グループ\列\列グループ\テーブルである場合、Eは、優先度が徐々に低下しています
図4に示すように、テーブルレイアウト
table-layout:auto//自动宽度布局
[ステップ]自動レイアウト
最小値と最大セル幅を算出するための細胞に、
B、計算された最小及び最大列幅のそれぞれについて1つ
C、もし最小クロスカラムセルセル幅の和に等しい幅カラム、最小の列を横切って細胞
table-layout:fixed//固定宽度布局
注：長いテキスト表のセルについて、行を強制的にワードラップまたは単語区切りを使用して、テキストオーバーフロースピル制御を使用してテキストをセットテーブルレイアウトを達成するために必要とされている：固定
[STEP]固定レイアウト
、属性値幅すべての列の要素値に応じて設定される幅カラムの幅自動ありません
列の幅が自動である場合B、この列は、複数の列にわたって、セルの幅に応じて設定されている場合、分布の平均幅
C、列の幅は自動的にサイズを決定し、まだ自動であるように、その幅ができるだけ等しく
注：固定幅のレイアウトは、ユーザエージェントは高速レイアウトテーブルを計算することができます。
図5に示すように、垂直ALIGN
vertical-align: top;//顶端对齐
vertical-align: bottom;//底端对齐
vertical-align: middle;//中间对齐
vertical-align: baseline(默认);//基线对齐
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
注：垂直整列それは時にスーパー\ \テキスト底がテキスト・トップテーブルセルに適用される\サブを無視されます。
行
【<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
セルの行の所定数をスパンすることができます
注：表の要素は、コンテンツ、パディングとボーダーが、マージンなしの余裕を持って箱の長方形の行を生成するため。ヘッダー太字テキストが中心としてレンダリング
<デモンストレーションブロックは>を実証することができ、適切なプロパティ値をクリックしてください
行
【】
- >コラムコラム
テーブルの列は、1つ以上の属性値を定義します
- >列グループ列グループ
表の列は、フォーマットする合成しました
[プロパティ]
スパン
col要素に指定された列の数がまたがる必要があります
[スタイル]
1、可視性：崩壊
行または列グループのすべてのセルが表示されていない（他の値に設定が無効）
2、ボーダー
場合のみ、国境崩壊：崩壊するとき、セットの国境に順に
3、背景
細胞株は、透明な背景を持っている場合にのみ、バックグラウンドの行または列のグループが表示され
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都可设置
