HTMLで表を定義するtableタグとtable関連のタグ・属性を解説！
tableタグで表を作ろう！
| # | 〜〜〜 | 〜〜〜 | 〜〜〜 |
|---|---|---|---|
| 1 | △△△△△△△ | ⚫︎⚫︎⚫︎⚫︎⚫︎ | □□□□□□□□ |
| 2 | △△△△△△△ | ⚫︎⚫︎⚫︎⚫︎⚫︎ | □□□□□□□□ |
| 3 | △△△△△△△ | ⚫︎⚫︎⚫︎⚫︎⚫︎ | □□□□□□□□ |
HTMLでは、tableタグで表を定義できます。
また、tableタグの他に行を定義するtrタグ、列を定義するtdタグなどを使って表を作ります。
【 コード例 】
ブラウザで実行するとこんな感じです。
borderプロパティは、要素に対する枠線のスタイルを指定できます。
【 borderの書き方 】
セレクタ {
border: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-test {
border: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
【borderプロパティに関する記事】
CSSで色んな枠線を表現できるborder系プロパティの使い方を解説します！
こじはなNote
表の基本タグ｜tableタグ・trタグ・tdタグ・thタグ
tableタグ
tableタグは、表を定義する上で一番重要なタグです。
表を構成するタグたちを内包するタグで、表の中で最も上位なタグとなります。
【 tableタグの書き方 】
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
tableタグがないと表を定義できないよ！
trタグ
trタグは表の行を定義するタグです。
1行ごとにtrタグで囲います。
【 trタグの書き方 】
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
tdタグ
tdタグは、表のデータを定義するタグです。
各trタグが内包するtdタグ/thタグの数は、同じにする必要があります。
例えば、下の"【 tdタグの書き方 】"では、どのtrタグ内でもtdタグ/thタグの数は2つずつです。
【 tdタグの書き方 】
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
thタグ
thタグは表の見出しを定義できます。
各trタグが内包するtdタグ/thタグの数は、同じにする必要があります。
例えば、下の"【 tdタグの書き方 】"では、どのtrタグ内でもtdタグ/thタグの数は2つずつです。
【 thタグの書き方 】
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
表の構造を整理するタグ｜theadタグ・tbodyタグ・tfootタグ
theadタグ
theadタグは表のヘッダー部分をグループ化できるタグです。
基本的には下の"【 theadタグの書き方 】"のようにthタグを内包するtrタグを囲います。
【 theadタグの書き方 】
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
theadタグは必須じゃないけど、コードが見やすくなるよね！
tbodyタグ
tbodyタグは表のデータ部分をグループ化できるタグです。
基本的には下の"【 tbodyタグの書き方 】"のようにtdタグを内包するtrタグ全てを囲います。
【 tbodyタグの書き方 】
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tbody>
</table>
tbodyタグも絶対じゃないけど、コードが見やすくなる！
tfootタグ
tfootタグは表のフッター部分をグループ化できるタグです。
基本的には下の"【 tfootタグの書き方 】"のようにフッターのデータとなるtdタグを内包するtrタグを囲います。
表のフッターは、小計や合計など表のデータをまとめたデータが入る部分です。
表によってはあったりなかったりします。
【 tfootタグの書き方 】
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tbody>
<tfoot>
<tr>
<td>フッターのデータ1</td>
<td>フッターのデータ2</td>
</tr>
<tfoot>
</table>
tfootタグも絶対じゃないけど、コードが見やすくなる！
表を補助するタグ｜captionタグ・colgroupタグ・colタグ
captionタグ
captionタグは表のタイトルや説明を表示させるときに使います。
【 captionタグの書き方 】
<table>
<caption>表のタイトル/説明</caption>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
【 コード例 】
ブラウザで実行するとこんな感じです。
borderプロパティは、要素に対する枠線のスタイルを指定できます。
【 borderの書き方 】
セレクタ {
border: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-test {
border: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
【borderプロパティに関する記事】
CSSで色んな枠線を表現できるborder系プロパティの使い方を解説します！
こじはなNote
colgroupタグとcolタグ
表の列ごとにスタイル指定したい場合、colgroupタグとcolタグを使います。
〜 colgroupタグとcolタグ 〜
| colgroupタグ |
colタグを内包するタグ。 |
|---|---|
| colタグ |
表の列ごとにスタイルを指定する用のタグ。 各行の列(td/thタグ)と同じ数分定義します。 |
colタグに指定できるスタイルはCSSのwidthプロパティ・visibilityプロパティのみです。
【 colgroupタグとcolタグの書き方 】
<table>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
【 コード例 】
ブラウザで実行するとこんな感じです。
style属性はタグに直接スタイルを指定するための属性です。
【 style属性の書き方 】
<タグ style="スタイル"></タグ>
〜 例 〜
<h1 style="color:red; font-size:30px;"></h1>
borderプロパティは、要素に対する枠線のスタイルを指定できます。
【 borderの書き方 】
セレクタ {
border: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-test {
border: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
【borderプロパティに関する記事】
CSSで色んな枠線を表現できるborder系プロパティの使い方を解説します！
こじはなNote
表関係のタグに使える属性｜colspan属性・rowspan属性（推奨された属性のみ）
表関係のタグに使える属性をご紹介します。
本記事では、HTML5で推奨されている属性のみ紹介します。
colspan属性
colspan属性はtdタグ/thタグを列いくつ分で結合させるか指定できる属性です。
tdタグまたはthタグに指定できます。
colspan属性の値には列いくつ分にするか数値を指定します。
HTML要素の内容や動作を調整するために追加する値のこと。
要素の開始タグ内に配置され、「名前=値」の形式で書きます。
【 colspan属性の書き方 】
<table>
<tr>
<th colspan="列いくつ分か">見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td colspan="列いくつ分か">データ1</td>
<td>データ2</td>
</tr>
</table>
〜 使用例 〜
<table>
<tr>
<!-- "見出し1"は、列2つ分となる -->
<th colspan="2">見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td><データ2/td>
<td><データ3/td>
</tr>
</table>
【 コード例 】
ブラウザで実行するとこんな感じです。
borderプロパティは、要素に対する枠線のスタイルを指定できます。
【 borderの書き方 】
セレクタ {
border: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-test {
border: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
【borderプロパティに関する記事】
CSSで色んな枠線を表現できるborder系プロパティの使い方を解説します！
こじはなNote
rowspan属性
rowspan属性はtdタグ/thタグを行いくつ分で結合させるか指定できる属性です。
tdタグまたはthタグに指定できます。
rowspan属性の値には行いくつ分にするか数値を指定します。
HTML要素の内容や動作を調整するために追加する値のこと。
要素の開始タグ内に配置され、「名前=値」の形式で書きます。
【 rowspan属性の書き方 】
<table>
<tr>
<th rowspan="行いくつ分か">見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td rowspan="行いくつ分か">データ1</td>
<td>データ2</td>
</tr>
</table>
〜 使用例 〜
<table>
<tr>
<!-- "見出し1"は、行2つ分となる -->
<th rowspan="2">見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<th>2行目の見出し2</th>
<th>2行目の見出し3</th>
</tr>
<tr>
<td><データ1/td>
<td><データ2/td>
<td><データ3/td>
</tr>
</table>
【 コード例 】
ブラウザで実行するとこんな感じです。
borderプロパティは、要素に対する枠線のスタイルを指定できます。
【 borderの書き方 】
セレクタ {
border: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-test {
border: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
【borderプロパティに関する記事】
CSSで色んな枠線を表現できるborder系プロパティの使い方を解説します！
こじはなNote
tableタグ・trタグ・tdタグを使えば、最低限の表が作れるよ！