プログラミング初心者が躓きやすいのがtableタグ。
どことどこが対応しているのか、どのコードにCSSを当てれば見栄えがよくなるのか、難しいですよね。
そこで今回は、tableで使用するタグの意味からCSSのデザイン事例まで紹介します。
tableタグの使い方
tableはHTMLで表を作成できるタグで、trやth、tdタグを合わせて使用します。
ここではtableタグについて、以下2つを簡単に解説します。
- tableで使用するタグの意味
- tableの書き方の基本
それぞれ順番に見ていきましょう。
tableで使用するタグの意味
tableに関するタグの意味をまとめました。
- table：表全体を挟む
- thead：表のヘッダー
- tbody：表の内容、内側の部分
- tr：行
- th：表の見出し
- td：表の中身のセル
theadとtbodyは省略できるタグですが、tableの構造をはっきりとさせるときに役立つため、必要に応じて活用しましょう。
表に見出しがない場合は、thも書く必要はありません。
tableの書き方の基本
以下のシンプルな表をtableタグを使って書いてみましょう。
| <table> <tbody> <tr> <th>果物</th> <th>野菜</th> </tr> <tr> <td>いちご</td> <td>トマト</td> </tr> <tr> <td>バナナ</td> <td>レタス</td> </tr> </tbody> </table> |
| table , td, th { border: solid 1px #595959; border-collapse: collapse; }td, th { padding: 3px; width: 60px; } |
まずtableタグで全体を囲み、表のヘッダーtheadがある場合は最初にコードを書き、表の内容部分をtbodyで挟みます。
見出しthと中身のセルtdはそれぞれの行のtrの中に入れ、列と行の数に合わせてth・tr・tdを書きます。
上記のように2列3行の書き方は、以下のとおり。
- tableの中に行trを3つ作成する
- 3つあるtrのうち1つには、見出しthを入れる
- あとのtrには、中身のセルtdを2つずつ作る
レイアウトが崩れないようにtrの中に入れるセルの数は、同じ数に統一しましょう。
次の章からは、CSSについて解説していきます。
tableをCSSでキレイに整える
次に、tableをCSSで以下のように見栄えを整える方法を紹介します。
- 色を変更する
- 文字の位置を変更する
- 枠線を変更する
- 余白を整える
- セルを結合する
- 表の幅を変更する
- tableの位置を調整する
順番に解説していきます。
色を変更する
まず、文字や背景の色を変更していきます。
文字の色を変える
表全体の文字色を変えるときは、CSSでtableにcolorを指定します。
文字を赤色にしてみましょう。
| table { color: red; } |
見出しやセルの色だけを変更するときは、同じようにtdやthにcolorを当てると色が変わります。
背景色を変える
背景の色を変更するときは、CSSで変更したいタグにbackgroundを追記します。
見出しの背景を緑に変えてみましょう。
| th { background: green; } |
文字の位置を変更する
次に、セル内の文字の位置を変更します。
デフォルトでは、見出し以外は左寄せです。（これまで例で示していた表内の文字数は、同じなので中央寄せのように見えていました）
文字の位置を変えるときは、text-alignを使いましょう。
| td { text-align: center; } |
枠線を変更する
枠線の装飾には、borderを使用します。
tableの枠線はデフォルトでは、二重線で表現されています。
近年のホームページの表のデザインには、二重線を使った使ったものは多くありません。
そのため、border-collapse: collapse;を指定して二重線を重ね、一本線にしてから装飾するのが一般的です。
では、枠線を一本線にして罫線にdashedを当てて点線にしてみましょう。
| table { border-collapse: collapse; border: solid 2px #595959; }td, th { border: dashed 1px #595959; /* 点線 */ } |
余白を整える
デフォルトのままでは、以下のように文字と枠線が幅が狭くて、見づらい印象があります。
余白をつけて見やすくするには、見出しの場合はthに、それ以外にはtdにpaddingを指定します。
| td, th { padding: 3px; } |
さらにデフォルトでは、幅を自動調整する機能が備わっています。
とても便利な機能ですが、デザインカンプをするときには再現が難しくなる原因になり得るため、table-layout: fixed;を当てて列幅を整えるのがおすすめです。
表の幅を変更する
表全体の幅は、tableにwidthを指定して調整します。
たとえば、幅を500pxにしたいときは以下のように書きます。
| table{ width: 500px } |
全体の幅を指定すると、それぞれのセルの幅が自動で調整されます。
tableの位置を調整する
位置を調整するときは、marginを使用します。
たとえば、画面の真ん中に配置したいときは以下のようにtableに指定します。
| table{ margin: auto; } |
上下に余白をとりたいときは、margin: 100px auto;などとピクセルを当てるとよいでしょう。
左に寄せるときはmargin-left、右に寄せるならmargin-rightを指定してください。
セルを結合した表を作成する
複数のセルを結合して、表すコードもあります。
縦にセルを結合するときはrowspan、横に結合するときはcolspanを使用します。
まず、縦にセルを結合する表を作ってみましょう。
| <table> <tbody> <tr> <th></th> <th>商品</th> <th>値段</th> </tr> <tr> <td rowspan=”2″>果物</td> <td>いちご</td> <td>250</td> </tr> <tr> <td>バナナ</td> <td>100</td> </tr> <tr> <td rowspan=”2″>野菜</td> <td>トマト</td> <td>150</td> </tr> <tr> <td>レタス</td> <td>200</td> </tr> </tbody> </table> |
| table{ margin: 100px auto; border-collapse: collapse; border: solid 2px #595959; }td, th { padding: 5px; width: 90px; border: solid 1px #595959; }td{ vertical-align: middle; text-align: center; }th { background: #C0C0C0; } |
つなげたい箇所にrowspanを書き、結合するセルの数をイコールでつなぎます。
2つのセルをつなげる場合はrowspan=”2″と書き、セル2つ分の大きさになります。
次は、横のセルをつなげた以下の表を作成してみましょう。
| <table> <tbody> <tr> <th colspan=”3″>果物</th> </tr> <tr> <th>商品</th> <th>値段</th> <th>産地</th> </tr> <tr> <td>いちご</td> <td>250</td> <td>栃木県</td> </tr> <tr> <td>バナナ</td> <td>150</td> <td>沖縄県</td> </tr> </tbody> </table> |
| table { margin: 100px auto; border-collapse: collapse; border: solid 2px #595959; }td, th { padding: 5px; width: 90px; border: solid 1px #595959; }td{ vertical-align: middle; text-align: center; }th { background: #C0C0C0; } |
横にセルをつなげるときも、同じ書き方でタグが異なるだけです。
書き方を覚えてしまえば、いろんな表を作成できるようになります。
コピペOK！よくあるtableのCSSデザイン事例
tableのCSSデザインを3つ紹介します。
どれもコピペで使えるため、気になるものはコードをストックしたり、カスタマイズして利用してみてください。
ストライプ状のテーブル
| <table> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> </table> |
| table { width: 100%;/* 表の幅 */ border-collapse: collapse;/* セルの枠線を重ねる */ }th, td { padding: 8px;/* 余白 */ border-bottom: solid 1px #ddd;/* 枠線の下線の太さと色 */ }tr:nth-child(even) { background-color: #f2f2f2; }/* 背景色 */ |
ストライプ状の表は、互い違いに行の背景に色をつけることで読みやすさが向上し、視認性がアップします。
ボタン付きの料金表
| <div class=”pricing-table”> <div class=”pricing-row”> <div class=”pricing-column”> <div class=”pricing-header”> <h2>Basic</h2> </div> <p class=”price”>$10<span>/month</span></p> <ul class=”features”> <li class=”feature”><i class=”fas fa-check”></i> Feature 1</li> <li class=”feature”><i class=”fas fa-check”></i> Feature 2</li> <li class=”feature”><i class=”fas fa-times”></i> Feature 3</li> </ul> <a href=”#” class=”button”>Sign Up</a> </div><div class=”pricing-column”> <div class=”pricing-header”> <h2>Premium</h2> </div> <p class=”price”>$20<span>/month</span></p> <ul class=”features”> <li class=”feature”><i class=”fas fa-check”></i> Feature 1</li> <li class=”feature”><i class=”fas fa-check”></i> Feature 2</li> <li class=”feature”><i class=”fas fa-check”></i> Feature 3</li> </ul> <a href=”#” class=”button”>Sign Up</a> </div><div class=”pricing-column”> <div class=”pricing-header”> <h2>Pro</h2> </div> <p class=”price”>$30<span>/month</span></p> <ul class=”features”> <li class=”feature”><i class=”fas fa-check”></i> Feature 1</li> <li class=”feature”><i class=”fas fa-check”></i> Feature 2</li> <li class=”feature”><i class=”fas fa-check”></i> Feature 3</li> </ul> <a href=”#” class=”button”>Sign Up</a> </div> </div> </div> |
| body { font-family: ‘Arial’, sans-serif; background-color: #f8f9fa; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }.pricing-table { width: 80%; max-width: 800px; margin: 20px; }.pricing-row { display: flex; justify-content: space-around; background-color: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }.pricing-column { flex: 1; padding: 20px; text-align: center; }.pricing-header { background-color: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 10px 10px 0 0; }.price { font-size: 36px; font-weight: bold; color: #3498db; }.features { list-style: none; padding: 0; }.feature { margin: 10px 0; }.button { display: inline-block; padding: 10px 20px; background-color: #3498db; color: #fff; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; }.button:hover { background-color: #2980b9; } |
Featureの横のアイコンにはFontAwesomeを使用しており、同じように使用するにはhead内に以下の追記が必須です。
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”>
会社概要
| <table> <thead> <tr> <th>項目</th> <th>内容</th> </tr> </thead> <tbody> <tr> <td>会社名</td> <td>サンプル株式会社</td> </tr> <tr> <td>設立</td> <td>2020年</td> </tr> <tr> <td>本社</td> <td>東京都中央区</td> </tr> <tr> <td>事業</td> <td>ITソリューション</td> </tr> <tr> <td>代表者</td> <td>山田太郎</td> </tr> <tr> <td>連絡先</td> <td>info@example.com</td> </tr> </tbody> </table> |
| body { font-family: ‘Arial’, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }table { width: 300px; border-collapse: collapse; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; border-radius: 8px; margin: 20px; background-color: #fff; }th, td { padding: 10px; text-align: left; border-bottom: solid 1px #e0e0e0; }th { background-color: #3498db; color: #ecf0f1; } |
表のセルには<td>要素を使用し、ヘッダーセルには<th>要素を使用しています。
テーブルはシャドウと背景色が追加されており、視覚的に引き締まったデザインです。
便利な表作成ツールの紹介
tableタグは複雑ですが、ジェネレーターを使用すると難しい操作ゼロで表が生成できます。
Table Tag Generatorは列数や行数やclassなども指定でき、テーブルタグ作成ツールでは外枠や背景色までこだわった表を作成できます。
角丸対応テーブルジェネレーターでは、おしゃれな表も。
ジェネレーターで作成したものは、コピペですぐに使用できるため、自分で複雑なコードを書く手間が省けます。
tableのレスポンシブ対応
tableは横幅が広くなりやすいため、画面サイズが小さいデバイスでもキレイに見えるようにレスポンシブ対応が必須です。
tableのレスポンシブには、横スクロールするのがおすすめ。
| table{ overflow-x: auto; } |
横スクロールをするには、1つコードを追加するだけです。
横幅がテーブル表示の領域を超えてしまうと、スクロールバーが表示されます。
横スクロール以外にも、メディアクエリでスタイル調整も可能です。
tableタグを使わずに表を作る方法
tableタグを用いた表は、単純な表ならシンプルなコードで記述できますが、複雑なレイアウトになると難しい構造になりやすく、修正が困難になる傾向があります。
そこで、ここではtableタグを使用せずにdivで作る表を作成します。
| <!– 表のコンテナ → <div class=”table”><!– 行 –> <div class=”row”> <!– セル –> <div class=”cell”>見出し</div> <div class=”cell”>見出し</div> <div class=”cell”>見出し</div> </div><!– 行 –> <div class=”row”> <!– セル –> <div class=”cell”>テキストが入ります</div> <div class=”cell”>テキストが入ります</div> <div class=”cell”>テキストが入ります</div> </div><!– 行 –> <div class=”row”> <!– セル –> <div class=”cell”>テキストが入ります</div> <div class=”cell”>テキストが入ります</div> <div class=”cell”>テキストが入ります</div> </div> </div> |
| .table { display: table; width: 100%; border-collapse: collapse;/* セルの枠線を重ねる */ margin-bottom: 20px; }.row { display: table-row; }.cell { display: table-cell; padding: 8px; border: solid 1px #ddd; text-align: center; }/* ホバーエフェクトの追加 */ .cell:hover { background-color: #f5f5f5; } |
CSSで使用しているdisplay: tableは、tableタグと同じ使い方で表を作成できます。
行のtrはdisplay: table-row、display:table-cellはセルtdや見出しthと同様の使い方です。
横に並べたい要素にdisplay: table-cellを指定するだけで簡単に整理できます。
まとめ
慣れないうちはtableタグで表を作成するのは難しいですが、手を動かして書くことを続けるとスムーズにコードが書けるようになります。
便利な表作成のジェネレーターもありますが、使いこなすにはコードを理解している方が応用してどんどん活かしていけるはずです。
自信を持ってコードを書けるようになるには、デイトラのWeb制作コースで学ぶのがおすすめ。
現役コーダーに質問し放題に加えて、課題添削でしっかりスキルアップできるため、最速で稼げるコーダーを目指せます。
業界最安級のオンラインスクール”デイトラ”の紹介
東京フリーランスでは、1日1題のステップで未経験からでも迷わず・楽しく学べる業界最安級のオンラインスクールデイトラを運営しています。
- 仕事に繋がる現場のスキルが身に付くカリキュラム
- 閲覧無制限＆アップデートされるカリキュラム
- メンターは全員が現役で活躍するプロのみ
デイトラの強みは、現場水準の高いスキルを身につけられること。実務を意識したカリキュラムや、自分の頭と手を動かす実践的な課題を用意しています。
一度購入すればカリキュラムの内容は閲覧無制限なうえ、Web業界の流れに応じて都度カリキュラムをアップデートしています！そのため、実務に入ったあとも“生きた教科書”として使っていただけるでしょう。