表要素
基礎を形成します
テーブル：テーブルのタグ
tr: 行
td: 单元格
border="设置边框"
bordercolor="边框颜色"
cellspacing="单元格边框与边框之间的距离"
cellpadding="单元格与内容之间的距离"
注意: 给table添加
width="宽度"
height="高度"
colspan="合并列" 左右合并
rowspan="合并行" 上下合并
注意: 给td添加,合并几个,数字写几
align="水平位置"
left 在左边
center 在中间
right 在右边
valign="垂直对齐方式"
top 顶部对齐
middle 居中(默认值)
bottom 底部对齐
フォームケース：
<table border="1" width="500" height="300" cellspacing="10" cellpadding="0" bordercolor="red" align="center"
valign="top">
<tr align="center">
<td>1-1</td>
<td>1-2</td>
<td colspan="2">1-3</td>
</tr>
<tr>
<td align="right">2-1</td>
<td>2-2</td>
<td valign="top">2-3</td>
<td>2-4</td>
</tr>
<tr valign="top">
<td>3-1</td>
<td rowspan="2">3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
レンダリング：
補足フォーム
1：行データパケット
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
2：パケットデータ列
<colgroup span="value"></colgroup>
<!--span属性为把几列分为一组-->
3：列見出し
<th></th>
4：表のタイトル
<caption></caption>
表のプロパティ
図1に示すように、セル間隔：ボーダー間隔：値。
説明：セル間隔（属性がテーブルに追加されなければならない）、セル境界との間の距離を表し、望ましくない負
図2に示すように、隣接するセル境界をマージ：ボーダー崩壊：別/崩壊。
説明：マージ（属性テーブルに追加されなければならない）は、隣接するセルの境界（フレーム別々に）デフォルトの分離;崩壊（合成境界）
図3に示すように、セルのないコンテンツが提供されない：空のセルを：表示/非表示。
定義：ときなしコンテンツセル、セル境界エリアかどうか;表示：表示;非表示：非表示。
4、列の表示セルとアルゴリズム（高速走行速度）カラム：テーブルレイアウト：オート/固定されました。
テーブルのいくつかのタイプ
パブリックプロパティテーブル：
* {
margin: 0;
padding: 0;
}
table {
margin: 20px auto;
width: 300px;
height: 200px;
border-collapse: collapse;
text-align: center;
}
シンフォーム
<!-- 细线表格 -->
<table class="tab1">
<caption>
细线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab1 tbody tr td {
border: 1px solid #000;
}
太いフレーム薄いフォーム
<table class="tab2">
<caption>
粗框细线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab2 {
border: 5px solid #000;
}
ダブルテーブル
<table class="tab3">
<caption>
双线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab3 {
border: 5px double #000;
}
.tab3 tbody tr td {
border: 1px solid #000;
}
宮殿の単語ラティス
<table class="tab4">
<caption>
宫字格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab4{
border-collapse: separate;
border-spacing: 20px;
}
.tab4 tbody tr td {
border: 1px solid #000;
}
単一行フォーム
<table class="tab5">
<caption>
单线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab5 tbody tr td {
border-bottom: 1px solid #000;
}
カレンダー形式
<table class="tab6">
<caption>
日历表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td></td>
</tr>
</tbody>
</table>
.tab6 {
border: 5px solid #ccc;
border-collapse: separate;
border-spacing: 5px;
/*隐藏无内容单元格*/
empty-cells: hide;
padding: 10px;
}
.tab6 tbody tr td {
background-color: skyblue;
}
