1. ホーム
  2. ホームページの作り方
  3. HTML
  4. 「table」タグを正しく使ってレイアウトしよう！HTMLで思い通りの表デザイン
  • 最終更新日
  • HTML

「table」タグを正しく使ってレイアウトしよう！HTMLで思い通りの表デザイン

これからホームページを作ろうと考えている方は「table」タグを使って表のデザインにも慣れておきましょう。あくまで「table」タグとは表をデザインする際に使用するものです。

むか～し僕がホームページの勉強をはじめた頃なんかは、表のデザインだけではなく、サイト全体のレイアウトを「table」タグでおこなっていました。が、今ではそんな事はしません。

SEOに弱くなったり、音声ブラウザに対応できなかったりとデメリット満載です。とはいえ情報の一覧表示や比較などは表にした方が見やすいので、正しく「table」タグを使えばOKです。

目次 [閉じる]

tableタグの使い方

それではよく使われる表デザインを「table」タグの記述方法と一緒に見ていきましょう。

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>tableタグで表をデザインしよう</title>
    7. 
                
  7. <style>
    8. 
                
  8. * {
    9. 
                
  9.   padding: 0;
    10. 
                
  10.   margin: 0;
    11. 
                
  11.   box-sizing border-box
    12. 
                
  12. }
    13. 
                
  13. table {
    14. 
                
  14.   width: 100%;
    15. 
                
  15.   margin-top: 40px;
    16. 
                
  16.   border: 1px solid #c1c1c1;
    17. 
                
  17.   border-spacing: 0;
    18. 
                
  18.   border-collapse: collapse
    19. 
                
  19. }
    20. 
                
  20. th,
    21. 
                
  21. td {
    22. 
                
  22.   width: calc(100%/3);
    23. 
                
  23.   text-align: center;
    24. 
                
  24.   padding: 10px;
    25. 
                
  25.   border: 1px solid #c1c1c1
    26. 
                
  26. }
    27. 
                
  27. th { background: #efefef }
    28. 
                
  28. </style>
    29. 
                
  29. </head>
    30. 
                
  30. <body>
    31. 
                
  31. <table>
    32. 
                
  32.   <thead>
    33. 
                
  33.     <tr>
    34. 
                
  34.       <th></th>
    35. 
                
  35.       <th>パート</th>
    36. 
                
  36.       <th>出身地</th>
    37. 
                
  37.     </tr>
    38. 
                
  38.   </thead>
    39. 
                
  39.   <tbody>
    40. 
                
  40.     <tr>
    41. 
                
  41.       <th>TAKA</th>
    42. 
                
  42.       <td>Vocal</td>
    43. 
                
  43.       <td>東京</td>
    44. 
                
  44.     </tr>
    45. 
                
  45.     <tr>
    46. 
                
  46.       <th>TORU</th>
    47. 
                
  47.       <td>Guitar</td>
    48. 
                
  48.       <td>大阪</td>
    49. 
                
  49.     </tr>
    50. 
                
  50.     <tr>
    51. 
                
  51.       <th>RYOTA</th>
    52. 
                
  52.       <td>Bass</td>
    53. 
                
  53.       <td>大阪</td>
    54. 
                
  54.     </tr>
    55. 
                
  55.     <tr>
    56. 
                
  56.       <th>TOMOYA</th>
    57. 
                
  57.       <td>Drum</td>
    58. 
                
  58.       <td>兵庫</td>
    59. 
                
  59.     </tr>
    60. 
                
  60.   </tbody>
    61. 
                
  61. </table>
    62. 
                
  62. </body>
    63. 
                
  63. </html>
    64.

はい、ザっと書きましたがコレを表示すると下の表ができあがります。この形が一番シンプルでよく使われるテーブルレイアウトです。まずはこの形を使えるようにしていきましょう。

厳密に言うとtableの「width」プロパティを「100%」にしているので、上記のコードをそのまま表示すると画面いっぱいのテーブルが表示される事になります。

パート 出身地
TAKA Vocal 東京
TORU Guitar 大阪
RYOTA Bass 大阪
TOMOYA Drum 兵庫

テーブルレイアウトを組み立てるには色んなタグを使います。今回のテーブルでしたら、「table」タグの中に「thead」「tbody」「tr」「th」「td」のタグを使用しています。

「thead」はテーブルのヘッダー（先頭の項目）部分を指し、「tbody」はテーブルのボディ（メイン項目）部分を指します。そして、それぞれをグループ化しているんです。

次に「tr」はテーブルの行（横方向）部分を指します。ちなみに行と列をおさらいしておくと、行は横方向、列は縦方向の事です。今回の形なら5行3列のテーブルという事になります。

なので1行の中に列が3つありますので、「tr」タグの中には「th」もしくは「td」を合計で3つずつ記述します。「td」タグはデータセルを指しています。

「th」タグは見出しセルを指し、デフォルトで太字と中央揃えのデザインが施されます。上のテーブルでは灰色のセルは「th」タグ、白色のセルは「td」タグで記述しています。

どうでしょうか。何となく「th」と「td」の使い分けを理解してもらえますかね。

真ん中の列を見ると「パート」という見出しがあり、その中にVocal・Guitar・Bass・Drumという情報が入っています。次に上から2行目を見ると「TAKA」という見出しがあり、そこにはVocal・東京という情報が入っています。

あとは「th」タグをポジションで覚えましょう。theadタグの中のセルは「th」を使い、trタグの中の1つ目のセルも「th」を使う。今回のような形なら、2つ目や3つ目にthタグは使いませんので注意してください。

            
    
                
  1. table {
    2. 
                
  2.   border-spacing: 0;
    3. 
                
  3.   border-collapse: collapse
    4. 
                
  4. }
    5.

そして「table」タグを使う場合は、CSSで上記のような設定もおこないます。デザインなんで人それぞれ好みは違うと思いますが、ほとんどのテーブルはこの指定がされています。

実際に見てもらう方が早いですね。上記の指定をしていないデフォルトのテーブルデザインが下の表になります。2重線で表示されてるのが確認できますね。

パート 出身地
TAKA Vocal 東京
TORU Guitar 大阪
RYOTA Bass 大阪
TOMOYA Drum 兵庫

デザインに正解はないので、こちらの形がお好きであればこのままで大丈夫です。2重線を解消したい場合は先ほどの指定をおこなえばOKです。

こちらも説明すると、「border-collapse」プロパティの値を「collapse」にする事によって、隣接するセルで境界線を共有します。そして「border-spacing」プロパティでは隣接するセルの間隔を指定する事ができるので「0」としてセル同士の間隔をなくしています。

tableレイアウトで使用するタグ一覧

テーブルを表示する際のタグをいくつか見てきましたけど、まだ紹介していないタグもありますので一覧でご確認ください。この次の「tableレイアウトのサンプル」でもう少し違う形のテーブルレイアウトもご紹介します。

<table> ～ </table>
表を示します。
<caption> ～ </caption>
表の見出しを示します。
<colgroup> ～ </colgroup>
表の縦列をグループ化します。
<col ～ >
表の列を示します。
<thead> ～ </thead>
表のヘッダー（先頭の項目）を示します。
<tbody> ～ </tbody>
表のボディ（メイン項目）を示します。
<tfoot> ～ </tfoot>
表のフッター（後尾の項目）を示します。
<tr> ～ </tr>
表の行を示します。
<th> ～ </th>
表の見出しセルを示します。
<td> ～ </td>
表のデータセルを示します。

tableレイアウトのサンプル

それではいくつかテーブルレイアウトのサンプルをご紹介します。まずは「tableタグの使い方」で紹介した表に「caption」タグを追加してみますのでご覧ください。

ONE OK ROCK
パート 出身地
TAKA Vocal 東京
TORU Guitar 大阪
RYOTA Bass
TOMOYA Drum 兵庫

captionタグを「ONE OK ROCK」としました。これはワンオクのメンバー紹介をテーブルにまとめた表だったんですねぇ。そして「TORU」と「RYOTA」の出身地が同じだったので1つのセルにまとめています。

            
    
                
  1. <table>
    2. 
                
  2.   <caption>ONE OK ROCK</caption>
    3. 
                
  3.   <thead>
    4. 
                
  4.     <tr>
    5. 
                
  5.       <th></th>
    6. 
                
  6.       <th>パート</th>
    7. 
                
  7.       <th>出身地</th>
    8. 
                
  8.     </tr>
    9. 
                
  9.   </thead>
    10. 
                
  10.   <tbody>
    11. 
                
  11.     <tr>
    12. 
                
  12.       <th>TAKA</th>
    13. 
                
  13.       <td>Vocal</td>
    14. 
                
  14.       <td>東京</td>
    15. 
                
  15.     </tr>
    16. 
                
  16.     <tr>
    17. 
                
  17.       <th>TORU</th>
    18. 
                
  18.       <td>Guitar</td>
    19. 
                
  19.       <td rowspan="2">大阪</td>
    20. 
                
  20.     </tr>
    21. 
                
  21.     <tr>
    22. 
                
  22.       <th>RYOTA</th>
    23. 
                
  23.       <td>Bass</td>
    24. 
                
  24.     </tr>
    25. 
                
  25.     <tr>
    26. 
                
  26.       <th>TOMOYA</th>
    27. 
                
  27.       <td>Drum</td>
    28. 
                
  28.       <td>兵庫</td>
    29. 
                
  29.     </tr>
    30. 
                
  30.   </tbody>
    31. 
                
  31. </table>
    32.

タグの記述はこんなカンジです。captionタグはtheadタグと同じ階層に設置します。captionに設定したCSSのデザインも参考のために紹介しておきます。

            
    
                
  1. caption {
    2. 
                
  2.   font-size: 1.8rem;
    3. 
                
  3.   font-weight: 600;
    4. 
                
  4.   text-align: left;
    5. 
                
  5.   padding: 10px;
    6. 
                
  6.   margin-bottom: 40px;
    7. 
                
  7.   border-bottom: 2px solid #c1c1c1
    8. 
                
  8. }
    9.

セルを縦方向に連結させたい場合は、「rowspan」属性を追加します。今回は3行目の3列目の「td」に対して、下に2つ分のセルを連結しますので値は「2」としています。

4行目は列が連結された事によって、trタグの中には「th」と「td」が合計で2つしか記述されない点も注意しておいてください。ここに3つ記述するとデザインが崩れてしまいます。

ちなみにセルを横方向に連結させたい場合は、「colspan」属性を追加します。

TORU RYOTA
パート Guitar Bass
出身地 大阪

ちょっとテーブルの表示を変更してthead内のthタグとtbody内のthタグを入れ替えてみました。横方向のセルが連結しているのを確認して頂けますね。

3行目の2列目・3列目のセルを1つのセルとしてまとめています。

            
    
                
  1. <table>
    2. 
                
  2.   <thead>
    3. 
                
  3.     <tr>
    4. 
                
  4.       <th></th>
    5. 
                
  5.       <th>TORU</th>
    6. 
                
  6.       <th>RYOTA</th>
    7. 
                
  7.     </tr>
    8. 
                
  8.   </thead>
    9. 
                
  9.   <tbody>
    10. 
                
  10.     <tr>
    11. 
                
  11.       <th>パート</th>
    12. 
                
  12.       <td>Guitar</td>
    13. 
                
  13.       <td>Bass</td>
    14. 
                
  14.     </tr>
    15. 
                
  15.     <tr>
    16. 
                
  16.       <th>出身地</th>
    17. 
                
  17.       <td colspan="2">大阪</td>
    18. 
                
  18.     </tr>
    19. 
                
  19.   </tbody>
    20. 
                
  20. </table>
    21.

記述方法は上記の通りです。縦の連結「rowspan」と横の連結「colspan」ってなかなか覚えられないですよね。僕も毎回確認してから使ってます（笑）。それでも良いんです。調べればすぐわかりますし、「こういう事ができる」ってのを知ってるコトが大事です。

次に「colgroup」タグと「col」タグを使ったデザインの調整と、「tfoot」タグの使用例をご紹介します。会社やサービスの比較の際によく見かけるテーブルレイアウトですね。

まずtfootタグに関しては主に下のテーブルのような使われ方をします。「thead」と同じ内容をテーブルの下部に「tfoot」として配置するというものです。

A社 B社 C社
a ○ ○ ○
b ○ ○ ○
c ○ ○ ○
d ○ ○ ○
e ○ ○ ×
f ○ ○ ×
g ○ × ×
h ○ × ×
i ○ × ×
j ○ × ×
A社 B社 C社

この表ではA・B・Cの3社についてa～jの項目を比較をしているんですが、下にスクロールしていくとtheadに表示している会社名が見えなくなってしまいます。

なので確認のためにまた上へスクロールするんじゃなくて下に情報を表示しておけば手間が省けてラクになります。ちょっとした事ですがユーザーにとって見やすい表になりますよね。

            
    
                
  1. <table>
    2. 
                
  2.   <colgroup>
    3. 
                
  3.     <col class="item" span="1">
    4. 
                
  4.     <col class="company" span="3">
    5. 
                
  5.   </colgroup>
    6. 
                
  6.   <thead>
    7. 
                
  7.     <tr>
    8. 
                
  8.       <th></th>
    9. 
                
  9.       <th>A社</th>
    10. 
                
  10.       <th>B社</th>
    11. 
                
  11.       <th>C社</th>
    12. 
                
  12.     </tr>
    13. 
                
  13.   </thead>
    14. 
                
  14.   <tbody>
    15. 
                
  15.     <tr>
    16. 
                
  16.       <th>a</th>
    17. 
                
  17.       <td>○</td>
    18. 
                
  18.       <td>○</td>
    19. 
                
  19.       <td>○</td>
    20. 
                
  20.     </tr>
    21. 
                
  21.     ・
    22. 
                
  22.     ・
    23. 
                
  23.     ・
    24. 
                
  24.     <tr>
    25. 
                
  25.       <th>j</th>
    26. 
                
  26.       <td>○</td>
    27. 
                
  27.       <td>×</td>
    28. 
                
  28.       <td>×</td>
    29. 
                
  29.     </tr>
    30. 
                
  30.   </tbody>
    31. 
                
  31.   <tfoot>
    32. 
                
  32.     <tr>
    33. 
                
  33.       <th></th>
    34. 
                
  34.       <th>A社</th>
    35. 
                
  35.       <th>B社</th>
    36. 
                
  36.       <th>C社</th>
    37. 
                
  37.     </tr>
    38. 
                
  38.   </tfoot>
    39. 
                
  39. </table>
    40.

tbodyの中の内容は新しい記述でもないので「…」で省略しています。ここではテーブルの縦列をまとめて指定できる「colgroup」タグと「col」タグの記述について確認していきましょう。

「col」タグにはいくつかの属性を追加する事ができます。主なものが「span」「width」「align」「valign」です。「span」はまとめる列数を指定、「width」は横幅を指定、「align」は横位置の指定、「valign」は縦位置の指定です。

            
    
                
  1. <colgroup>
    2. 
                
  2.   <col class="item" span="1">
    3. 
                
  3.   <col class="company" span="3">
    4. 
                
  4. </colgroup>
    5.

今回は「span」属性だけ設定して、あとはclassを追加していますのでデザイン調整はCSSでおこなっています。a～jの項目の列はspanの値が「1」のcol、その他の3列はspanの値が「3」のcolで設定されています。

「colgroup」タグの中に「col」タグを記述する事によって、小さなグループをいくつも作る事ができるんです。今回は列が少ないテーブルを見て頂きましたが、列の数や種類が増えればcolタグでの管理の方がラクになります。

            
    
                
  1. col.item { width: 10% }
    2. 
                
  2. col.company { width: 30% }
    3.

今回の各colタグにはCSSで「width」プロパティのみ設定していますので参考として載せておきます。「colgroup」や「col」は使い慣れていないと逆にデザインしづらいかと思います。

ぶっちゃけ僕もそこまで複雑なテーブルを作成しないので、colgroupタグはほぼほぼ使いません（笑）。まずは基本のテーブルレイアウトの記述方法に慣れてもらえばOKです。

Twitterの投稿をホームページに埋め込む！表示の種類とコードの取得を解説 YouTubeの動画をホームページに埋め込む！コードの取得とレスポンシブの対応

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記