HTML講座

表(Table)

<table>
<caption>表タイトル</caption>
<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>
</table>
表タイトル
項目名 項目名 項目名
項目名 データ データ
項目名 データ データ
罫線(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;
}

表タイトル
項目名 項目名 項目名
項目名データデータ
項目名データデータ