今回は、HTMLの学習を始めたばかりの初心者の方を対象に、テーブルタグ(table)を利用して、表を作る方法を説明していきます。
テーブルタグ tableの基本的な使い方
まずはテーブルを使った表作成の基本を説明していきます。
表を作成したい場合は、tableタグを含めて複数のタグを利用して構成します。よく使うタグは下記の通りです。
| タグ | 意味 |
|---|---|
| table | テーブルを定義 |
| tr | table rowの略。テーブルの行を定義。 |
| th | table headerの略。テーブルの見出し項目を定義。 |
| td | table dataの略。テーブルのデータ項目を定義。 |
■tableタグを使った表作成のイメージ
まず<table>～</table>で大きくくくります。
次に、tableタグ内に<tr>～</tr>を記述して、表の横一行を定義します。
trタグのなかで、見出しに該当する項目を、「<th>～<th>」で定義します。
trタグのなかで、データに該当する項目を<td>～<td>で定義します。
同様にして、trで行を追加し、tdで中身のデータを入れていきます。
Webブラウザで見た時の表示は下記のようになります。
※thで記述したセル内は一般的なWebブラウザでは太字で表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <table> <tr> <th>項目</th> <th>内容</th> </tr> <tr> <td>セミナー名</td> <td>1日速習HTML・CSSセミナー</td> </tr> <tr> <td>開催日時</td> <td>2020年10月31日</td> </tr> <tr> <td>開催場所</td> <td>大阪市内セミナールーム</td> </tr> <tr> <td>参加費用</td> <td>11,000(税込)</td> </tr> </table> |
テーブル・表に枠線をつける
table・表に枠線をつけるには、tableの属性border="1"をつけると簡易的な枠線が作れます。また、CSSでborderを利用して枠線を作ることができます。
■表示例 属性border="1"を追記して簡易な枠線を表示する
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <table border="1"> <tr> <th>項目</th> <th>内容</th> </tr> <tr> <td>セミナー名</td> <td>1日速習HTML・CSSセミナー</td> </tr> <tr> <td>開催日時</td> <td>2020年10月31日</td> </tr> <tr> <td>開催場所</td> <td>大阪市内セミナールーム</td> </tr> <tr> <td>参加費用</td> <td>11,000(税込)</td> </tr> </table> |
■CSSで枠線を設定した表事例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>table</title> <style media="screen"> table{ border-collapse: collapse; /* th、tdなどの隣接するセルの枠線を重ねて表示する */ } table th,table td{ border:1px #999 solid; /* 枠線をつける */ } </style> </head> <body> <table> <tr> <th>項目</th> <th>内容</th> </tr> <tr> <td>セミナー名</td> <td>1日速習HTML・CSSセミナー</td> </tr> <tr> <td>開催日時</td> <td>2020年10月31日</td> </tr> <tr> <td>開催場所</td> <td>大阪市内セミナールーム</td> </tr> <tr> <td>参加費用</td> <td>11,000(税込)</td> </tr> </table> </body> </html> |
CSSでは、thとtdに対して枠線borderを設定し、tableタグに対してborder-collapse:collapseを設定します。
- border-collapse:collapse;・・・th、tdなどの隣接するセルの枠線が重ねて表示される。
- border-collapse:seperate;・・・th、tdなどの隣接するセルの枠線が間隔を開けて表示される（２重線のようになる）。初期値
テーブル内のセルを結合する
テーブル・表はcolspan(列の長さ)やrowspan(行の長さ)といった属性でセルを結合することができます。
colspanは列の長さで、colspan="2"で2列分、colspan="3"で3列分のセルになります。
■一行目のthをcolspan="2"で結合した例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>table</title> <style media="screen"> table{ border-collapse: collapse; } table th,table td{ border:1px #999 solid; } </style> </head> <body> <table> <tr> <th colspan="2">項目と内容</th> </tr> <tr> <td>セミナー名</td> <td>1日速習HTML・CSSセミナー</td> </tr> <tr> <td>開催日時</td> <td>2020年10月31日</td> </tr> <tr> <td>開催場所</td> <td>大阪市内セミナールーム</td> </tr> <tr> <td>参加費用</td> <td>11,000(税込)</td> </tr> </table> </body> </html> |
rowspanは行の長さで、rowspan="2"で2行分、rowspan="3"で3行分のセルになります。
■2,3,4行目・1列目のtdをrowspan="3"で結合した例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>table</title> <style media="screen"> table{ border-collapse: collapse; } table th,table td{ border:1px #999 solid; } </style> </head> <body> <table> <tr> <th>項目</th> <th>内容</th> </tr> <tr> <td>セミナー名</td> <td>1日速習HTML・CSSセミナー</td> </tr> <tr> <td rowspan="3">開催概要</td> <td>2020年10月31日</td> </tr> <tr> <td>大阪市内セミナールーム</td> </tr> <tr> <td>11,000(税込)</td> </tr> </table> </body> </html> |
■colspanとrowspanの組み合わせ
1 2 3 4 5 6 7 | <table border="1"> <tr><th colspan="2">項目と内容</th></tr> <tr><td>日時</td><td>5月１5日</td></tr> <tr><td rowspan="2">場所と費用</td><td>大阪堀江エイトビル10F</td></tr> <tr><td>¥10,000</td></tr> <tr><td>持ち物</td><td>ノートPC</td></tr> </table> |
このほかにも、theadタグ、tbodyタグ、tfootタグなどあります（必ず使用しなければならないというわけではありません）ので必要に応じて調べて使ってみてください。
まとめ
まとめです。今回は、、htmlのtableタグを利用して表を作る方法を説明しました。
HTMLを理解しているとホームページを作る上でできることの範囲が広がります。
合わせて読みたい記事
そのほかのHTMLの使い方を「【HTMLの基本を徹底解説！】初心者向けHTMLの基本とよく使うタグ一覧」に記載していますので、HTMLの勉強をしたい方は合わせてご参考ください。
CSSを使った装飾の仕方については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
今回は以上になります。最後までご覧いただきありがとうございました。
弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。
