今回は、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の勉強をしたい方は合わせてご参考ください。
今回は以上になります。最後までご覧頂き、ありがとうございました。
合わせて読みたい記事
これからサーバー・ドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。
おすすめのレンタルサーバーについては「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社」
CSSを使った装飾の仕方については「【CSSの基本】CSSの基本とプロパティ一覧」
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
を利用して、表を作る方法を説明していきます。 もくじ1 テーブルタグ tableの基本的な使い方2 テ){kind=link}