<table>タグとは?
WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。
単に表の作成に利用するだけでなく、サイトのレイアウトの構成に使用することも多く、 使い方次第でさまざまな表示に応用できる便利なタグとなっています。
<table>タグの記述の仕方
<table>タグは、<table>タグの中でだけ使用することが出来る<thead>タグ、 <tbody>タグ、<tfoot>タグ、<tr>タグ、<th>タグ、<td>タグを 合わせて記述することで表を作成します。
※<thead>タグ、<tbody>タグ、<tfoot>タグは省略可能です。
<table border="1"> <tr><th>名前</th><th>年齢</th></tr> <tr><td>山田太郎</td><td>18歳</td></tr> <tr><td>鈴木次郎</td><td>22歳</td></tr> <tr><td>佐藤三郎</td><td>36歳</td></tr> </table> |
---|
名前 | 年齢 |
---|---|
山田太郎 | 18歳 |
鈴木次郎 | 22歳 |
佐藤三郎 | 36歳 |
・項目名のセルは<th>タグ、それ以外のセルには<td>タグを使用します。
<table>タグにborder="1"をしてすることで枠線を表示させることが出来ます。
<table>タグのカスタマイズ方法
テーブル要素のデザインはCSSで変更することが可能です。
セル同士の隙間を無くす
デフォルトの状態ではセル(枠)同士の間に隙間がありますが、これも無くすことが出来ます。
<style> .table_sample{ border-collapse: collapse; } </style> <table class="table_sample" border="1"> <tr><th>名前</th><th>年齢</th></tr> <tr><td>山田太郎</td><td>18歳</td></tr> <tr><td>鈴木次郎</td><td>22歳</td></tr> <tr><td>佐藤三郎</td><td>36歳</td></tr> </table> |
---|
名前 | 年齢 |
---|---|
山田太郎 | 18歳 |
鈴木次郎 | 22歳 |
佐藤三郎 | 36歳 |
余白や文字揃えを調整する
余白はpaddingプロパティ、左右の文字揃えはtext-alignプロパティで変更することが出来ます
<style> .table_sample2{ width:100%; border-collapse: collapse; } .table_sample2 th,.table_sample2 td{ padding:10px; text-align:left; } .table_sample2 th{ background: #e9e9e9; } </style> <table class="table_sample2" border="1"> <tr><th>名前</th><th>年齢</th></tr> <tr><td>山田太郎</td><td>18歳</td></tr> <tr><td>鈴木次郎</td><td>22歳</td></tr> <tr><td>佐藤三郎</td><td>36歳</td></tr> </table> |
---|
名前 | 年齢 |
---|---|
山田太郎 | 18歳 |
鈴木次郎 | 22歳 |
佐藤三郎 | 36歳 |
セルを結合する
2つ以上のセルを結合して大きな一つのセルにすることが出来ます。
横のセルを結合する場合はcolspan、縦のセルを結合する場合はrowspanで何個分のセルを結合するか指定します。
<style> .table_sample3{ width:100%; border-collapse: collapse; } .table_sample3 th,.table_sample3 td{ padding:10px; text-align:left; } .table_sample3 th{ background: #e9e9e9; } </style> <table class="table_sample3" border="1"> <tr><th colspan="3" style="text-align:center;">会員リスト</th></tr> <tr><th>グループ</th><th>名前</th><th>年齢</th></tr> <tr><th rowspan="3">グループA</th><td>山田太郎</td><td>18歳</td></tr> <tr><td>鈴木次郎</td><td>22歳</td></tr> <tr><td>佐藤三郎</td><td>36歳</td></tr> <tr><th rowspan="3">グループB</th><td>田中四郎</td><td>45歳</td></tr> <tr><td>太田五郎</td><td>51歳</td></tr> <tr><td>山本花子</td><td>60歳</td></tr> </table> |
---|
会員リスト | ||
---|---|---|
グループ | 名前 | 年齢 |
グループA | 山田太郎 | 18歳 |
鈴木次郎 | 22歳 | |
グループB | 田中四郎 | 45歳 |
太田五郎 | 51歳 |
・上記は「会員リスト」のセルを横に3つ分結合したいのでcolspanに3を、「グループA」と「グループB」のセルを縦に2つ結合したいのでrowspanに2をそれぞれ指定しています。
・セルの個数を合わせないと表示が崩れるので注意が必要です。
列を交互に色分けする
CSSで見やすいように交互に色分けすることも出来ます。
<style> .table_sample4{ width:100%; border-collapse: collapse; } .table_sample4 th,.table_sample4 td{ padding:10px; text-align:left; } .table_sample4 th{ background:#c9c9c9; } .table_sample4 tr:nth-child(odd) td{ background: #e9e9e9; } </style> <table class="table_sample4" border="1"> <tr><th>名前</th><th>年齢</th></tr> <tr><td>山田太郎</td><td>18歳</td></tr> <tr><td>鈴木次郎</td><td>22歳</td></tr> <tr><td>佐藤三郎</td><td>36歳</td></tr> <tr><td>田中四郎</td><td>42歳</td></tr> <tr><td>太田五郎</td><td>51歳</td></tr> <tr><td>山本花子</td><td>60歳</td></tr> </table> |
---|
名前 | 年齢 |
---|---|
山田太郎 | 18歳 |
鈴木次郎 | 22歳 |
佐藤三郎 | 36歳 |
田中四郎 | 42歳 |
太田五郎 | 51歳 |
山本花子 | 60歳 |
nth-child()は複数あるセレクタに対し何番目か順番を指定することが出来ます。今回は数字ではなくodd=奇数を指定することにより、 奇数番目のtr=行の色を一括して変更しています。
テーブルのレスポンシブ対応
テーブルは性質上、横に長くなることが多くスマホなどで見るとつぶれて見づらくなってしまうので、画面サイズに合わせた表示方法の切替が必要です。
スクロールして見れるようにする
横幅や高さを固定して画面からはみ出した部分はスクロールして見てもらうようにする方法です。
<style> .table_sample5{ width:600px; border-collapse: collapse; } .table_sample5 th,.table_sample5 td{ padding:10px; text-align:left; } .table_sample5 th{ background: #e9e9e9; } .frame{ width:400px; overflow-x: scroll; } </style> <div class="frame"> <table class="table_sample5" border="1"> <tr><th>名前</th><th>年齢</th></tr> <tr><td>山田太郎</td><td>18歳</td></tr> <tr><td>鈴木次郎</td><td>22歳</td></tr> <tr><td>佐藤三郎</td><td>36歳</td></tr> </table> |
---|
名前 | 年齢 |
---|---|
山田太郎 | 18歳 |
鈴木次郎 | 22歳 |
佐藤三郎 | 36歳 |
<table>タグを幅を指定したdivで囲み、overflow:scrollを指定することでスクロールできるようになります。
テーブルを縦並びにする
テーブルを構成するタグには初期設定でdisplay:tableやdisplay:table-cellが指定されています。この値をblockに変更すればテーブルの機能が失われ他のタグ同様に縦に連なるようになります。
<style> .table_sample,.table_sample6 th,.table_sample6 td{ display: block; } .table_sample6{ max-width:600px; border-collapse: collapse; } .table_sample6 th,.table_sample6 td{ padding:10px; text-align:left; } .table_sample6 th{ background: #e9e9e9; } </style> <table class="table_sample6" border="1"> <tr><th>山田太郎</th><td>18歳</td></tr> <tr><th>鈴木次郎</th><td>22歳</td></tr> <tr><th>佐藤三郎</th><td>36歳</td></tr> </table> |
---|
山田太郎 | 18歳 |
---|---|
鈴木次郎 | 22歳 |
佐藤三郎 | 36歳 |
行数や列数が多い場合には使いづらい方法です。
まとめ
<table>タグは表としての使い道はもちろん、横並びを実現できるのでレイアウトの組み立てにも活用できるので便利なタグの一つです。