HTMLで表を作成するときに使用するテーブルタグの使い方をゼロからわかるように解説していきます。
ブログサービスやWordPressなどのCMSを使って構築しているブログやWEBメディアの記事やページを作成する際に必要なhtmlの知識を身に着ける。
表を構成するタグと書き方
- <table>
- →テーブルを定義する
- <tr>
- →行を定義する
- <th>
- →見出しのセルを定義する。使わなくても良い。
- <td>
- →通常のセルを定義する
以上の要素を使って以下のように記述します。
| 名前 | 年齢 |
|---|---|
| Aさん | 26歳 |
| Bさん | 41歳 |
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>Aさん</td>
<td>26歳</td>
</tr>
<tr>
<td>Bさん</td>
<td>41歳</td>
</tr>
</table>
応用:構造をまとめる書き方
以下の3つの要素を使って表の構造をまとめることもできます。※見た目は変わりません。
- <thead>
- →<thead>～</thead>で表のヘッダー部分を定義するタグ。見出しに使用しましょう。
- <tbody>
- →<tbody>～</tbody>で表のボディ部分を定義するタグ。
- <tfoot>
- →<tfoot>～</tfoot>で表のフッター部分を定義するタグ。注釈やまとめ等に使用しましょう。
構造化してコードを見やすくすることで後々の修正や変更を効率化できるので、複雑な表を作る場合はこちらを使ってみてください。
サンプルコード
| 日本語 | 英語 |
|---|---|
| 大坂 | Osaka |
| 西九条 | Nishikujo |
| 新今宮 | Sinimamiya |
| 天王寺 | Tennoji |
| 京橋 | Kyobasi | 大阪環状線の主要な駅 |
<table>
<thead>
<tr>
<th>日本語</th>
<th>英語</th>
</tr>
</thead>
<tbody>
<tr>
<td>大坂</td>
<td>Osaka</td>
</tr>
<tr>
<td>西九条</td>
<td>Nishikujo</td>
</tr>
<tr>
<td>新今宮</td>
<td>Sinimamiya</td>
</tr>
<tr>
<td>天王寺</td>
<td>Tennoji</td>
<tr>
<td>京橋</td>
<td>Kyobasi</td>
</tr>
</tr>
</tbody>
<tfoot>
<td colspan="2">大阪環状線の主要な駅</td>
</tfoot>
</table>
A.「正直、注釈とかまとめが要らない…」という場合は<tfoot>～</tfoot>の間に何も記述しなければOKです。<thead>や<tbody>を使う際は<tfoot>も必ず記述しなければならないのでこのように対応してください。
セルを繋げる方法
先程のサンプルコードのようにセルを縦や横に繋げたいときは以下のコードを使用します。
- <rowspan>
- →セルを縦に連結
- <colspan>
- →セルを横に連結
サンプルコード
- サンプルは<td>を使用していますが、<th>に変えてもOKです。
- “2”の数字を変えれば結合するセルの数を変えられます。
2つのセルを縦に連結
<td rowspan="2"></td>
2つのセルを横に連結
<td clospan="2"></td>
セルに入れられるタグ
thタグとtdタグ共に基本的に全てのタグを入れることができます。aタグ(リンクタグ)やpタグ(段落タグ)など、本文によく使うものはどれも使用可能なほか、divタグとspanタグも使えるので装飾も行えます。
先程「基本的に全てのタグを入れることができる」と説明しましたが、ブログサービスやWordPressなどのCMSを使っている場合、テンプレートにあらかじめ各要素のCSSが設定されているため、入れるタグによってはデザインが崩れることがあり、hタグは特に要注意です。
cssのカスタマイズが難しい場合は使うタグをタグはaタグ、pタグ、div&spanタグの4つに留めておくのが無難です。
よくある疑問と答え
tableタグを使うときに初心者が抱きがちな疑問と答えをまとめて紹介します。
1.セルを空白にする方法は?
A.該当するセルにスペースを入力すればOKです。
2.thタグとtdタグを横に並べてもOK?
A.問題ありません。
3.スマホの表示はどうなる?
A.ブログサービス(はてなブログなど)やCMS(WordPressなど)を使っている場合、大抵のテンプレートがテーブルタグもレスポンシブデザインにしてくれているので特に気にする必要はありませんが、そうでない場合はCSSを使って設定する必要があります。