表(Table)
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>項目名</th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名</th>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>項目名</th>
<td>データ</td>
<td>データ</td>
</tr>
</tfoot>
- colではスタイル:カラム幅・背景色の設定ができる。
- thead,tbody,tfootは省略されることが多い。
項目名 | 項目名 | 項目名 |
---|---|---|
項目名 | データ | データ |
項目名 | データ | データ |
- 罫線(table, thead,tbody,tfoot, tr, th, tdのスタイル)
-
- border:太さ 線種 色
-
table, th, td{ border: 2px solid black; }
表タイトル 項目名 項目名 項目名 項目名 データ データ 項目名 データ データ - table{ border-collapse:separate}
-
table{ border-collapse: separete; }
separete 項目名 項目名 項目名 項目名 データ データ 項目名 データ データ - table{ border-collapse:collapse}
-
table{ border-collapse: collapse; }
collapse 項目名 項目名 項目名 項目名 データ データ 項目名 データ データ
- カラム幅(colのスタイル)
-
- col style=" width:大きさ"
-
width:7rem
項目名 項目名 項目名 項目名 データ データ 項目名 データ データ
- セルの結合(th, tdの属性)
-
- 列方向:<td colspan="数値">
-
colspan="2" 項目名 項目名 項目名 項目名 データ 項目名 データ データ - 行方向:<td rowspan="数値">
-
rowspan="2" 項目名 項目名 項目名 項目名 データ データ 項目名 データ
- キャプション位置(tableのスタイル)
-
- table{ caption-side:top}
-
table{ caption-side:top; }
表タイトル項目名 項目名 項目名 項目名 データ データ 項目名 データ データ - table{ caption-side:bottom}
-
table{ caption-side:bottom; }
表タイトル項目名 項目名 項目名 項目名 データ データ 項目名 データ データ