Webサイトにおける表は、情報をまとめることに効果的です。料金表やメニュー表があることによって、サービスの内容をまとめているWebサイトを見かけることは多いのではないでしょうか。
表の作成は、HTML/CSSコーディングで簡単に実装できます。
この記事では、HTMLとCSSを用いて表を作成する方法を解説します。表を活用すれば、Webサイトのおしゃれさもアップできるので、ぜひ表を作れるようになっておきましょう。
- 表の作り方
- 表のデザインを調整する
- 表をレスポンシブデザインにする
Web制作の学習にお困りではありませんか？
Web制作の学習は、独学だと難しく挫折しやすい傾向にあります。
「わからない部分を必死に調べてもなかなか解決できず、やっとの思いで解決できたと思ったらまたわからない部分が出てきて挫折しそう」こんな経験、あなたにもありませんか？
どうしても独学で学習が進まないと感じたら、スクールで学習することがおすすめです。ZeroPlus Gateではたった30日間、しかも無料でWeb制作を学べます。
現役のエンジニアが講師陣を務め、ひとりひとりにメンターがつくので挫折せずに学習できます。あなたもZeroPlus Gateで効率よく、楽しくWeb制作を学んでみませんか？
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ZeroPlus Gateでどんなことをするのか詳しく知りたい人は、こちらの記事がおすすめです。
また、学習の方向性でお悩みの方は、こちらの記事を参考にしてください。Web制作を仕事にしたい人に必要なスキル、学習の順番がわかる内容となっております。学習ロードマップを活用して、計画的に学習を進めていきましょう！
目次
表の作り方
<table>タグを使用する
表を作るには<table>タグを使います。<table>タグは表の全体を囲むタグです。
<table>タグの中には<tr>タグ、<th>タグ、<td>タグが必要です。
それぞれのタグの意味は下の表を参照してください。
| 表の作成で使用するタグ | タグの意味 |
| <table> | 表の範囲を示す |
| <tr> | 行を作成する |
| <th> | 見出しとなるセルを作成する |
| <td> | 表の中身のセルを作成する |
<table>タグを用いて表を作成すると、以下のように表示されます。
See the Pen CSS表 スタイルなし by ZeroPlus (@zeroplus-programming) on CodePen.
この状態では表のように見えないので、CSSでスタイリングをしていきます。スタイルの調整は次の項目から詳しく解説します。
表のデザインを調整する
HTMLで表を作成したら、CSSでスタイリングしていきましょう。綺麗で見やすい表のスタイリング方法を解説します。
表を見やすくするためのおもなスタイルは以下のとおりです。
- 枠線を追加する
- 枠線なしの表を作成する
- セルの内側に余白をつける
- セルの外側に余白をつける
- セルを結合する
枠線を追加する
CSSで表に枠線を追加するには、borderプロパティを使用します。<th>タグと<td>タグにborderを指定して枠線を作成しましょう。
See the Pen CSS表 枠線をつける by ZeroPlus (@zeroplus-programming) on CodePen.
枠なしの表を作成する
枠がない表を作りたいときには、<th>や<td>にそれぞれ背景色を指定します。背景色の指定にはbackground-colorを使用します。
See the Pen CSS表 枠線なし by ZeroPlus (@zeroplus-programming) on CodePen.
見出しセルと表の中身のセルの区別が、背景色によって分かりやすくなりました。
CSSで背景色を指定する方法については、こちらの記事で詳しく解説しています。ぜひ参考にしてください。
セルの内側に余白をつける
セルの内側に余白をつけるには、paddingプロパティを使用します。
See the Pen CSS表 セル内padding by ZeroPlus (@zeroplus-programming) on CodePen.
セル内の余白ができたことで、表が見やすくなりました。
セルの外側に余白をつける
セルの外側に余白をつけたいときには、<table>タグにborder-spacingとborder-collapseを指定します。外側の余白といえばmarginを使う、と思うかもしれませんが、<th>と<td>にmarginは適用されないので注意しましょう。
2つのプロパティは、表の作成においては以下のように使用します。
| プロパティ | 使い方 |
| border-spacing | 数値を指定する |
| border-collapse | separateを指定する |
記述例と出力結果を見てみましょう。
See the Pen CSS表 セル同士の余白 by ZeroPlus (@zeroplus-programming) on CodePen.
セル同士の間隔を空けることができました。
セルを結合する
表はセルを結合することもできます。結合したいセルの起点のタグにrowspan属性、もしくはcolspan属性を指定します。
| 属性 | 意味 |
| rowspan | 縦のセルを結合する |
| colspan | 横のセルを結合する |
セルを縦に結合する
セルを縦に結合したいときは、rowspanを使用します。
rowspanは、結合したい起点の<th>タグか<td>タグ内に記述します。記述の仕方はrowspan="結合するセルの数"とします。
記述例を見てみましょう。上2つのセルを結合するときは以下のように記述します。
See the Pen CSS表 セルを結合 by ZeroPlus (@zeroplus-programming) on CodePen.
rowspanを記述していないタグの記述がそのままだと、セルが残ってしまいます。rowspanを記述していないタグは、削除するかコメントアウトしましょう。
セルを横に結合する
セルを横に結合したいときはcolspanを使用します。基本的な使い方はrowspanと同じです。
See the Pen CSS表 横にセル結合 by ZeroPlus (@zeroplus-programming) on CodePen.
セルを横に結合できました。
表をレスポンシブデザインにする
表の作成は、レスポンシブ対応も一緒に行いましょう。レスポンシブ対応とは、スマホやタブレットなど小さい画面幅での表示を調整する作業のことです。
レスポンシブ対応を行わないと、以下のような問題が起こります。
- 表のデザイン崩れ
- Webサイト全体に横スクロールが発生する
おしゃれで使いやすいサイトにするためにも、レスポンシブ対応は必ず行いましょう。
レスポンシブ対応を行うには、メディアクエリという記述が必要です。メディアクエリの書き方について、以下の記事で詳しく解説しているので、併せてお読みください。
よく使われる表のレスポンシブデザインの例は以下の2つです。
- 表を縦並びにする
- 表を横スクロールにする
表を縦並びにする
表が横に長いと、小さい画面幅では表が幅内に収まりきらず、横スクロールが発生してしまうことがあります。そのようなときは、表を縦並びにすることで画面幅内に表を収めることができます。
縦並びの表は、<th>と<td>にdisplay: block;を指定するだけで実装可能です。実装の際は、画面幅に合わせて適宜セルの幅を調整しましょう。
See the Pen CSS表 縦並び by ZeroPlus (@zeroplus-programming) on CodePen.
表を横スクロールにする
表を横スクロールにするには、以下のように記述します。
<table>タグを囲む親要素を作成する<table>タグの親要素にoverflow: scroll;を指定する
この実装は表中のテキストを折り返したくないときに便利です。
See the Pen CSS表 横スクロール by ZeroPlus (@zeroplus-programming) on CodePen.
表をレスポンシブに対応させる方法は以下の記事で紹介しています。併せてお読みください。
まとめ
表を使えば、情報量が多い内容もわかりやすくまとめることができます。料金の比較やメニューを一目で把握できるため、ユーザーにとって親切な設計にすることができます。
綺麗で見やすい表はWebサイトの見た目を整えます。
是非あなたのサイトにも表を実装してみてください。
ZeroPlus GateでWeb制作を学んでみませんか？
Web制作を効率よく学ぶなら、ZeroPlus Gateの受講がおすすめです。
ZeroPlus Gateとは、30日間でWeb制作を学べる学習プログラムです。基本的なコーディングからサーバーアップ、WebデザインなどWeb制作を一気通貫して身につけることができます。
学習サポートも充実。受講生一人ひとりにメンターがつくので、学習面での困りごとやキャリアについて、案件獲得の相談も行えます。
しかも、これだけのサポートが完全無料。難しい条件もなく、誰でも無料で受講できます。
爆発的に成長できる環境があなたをお待ちしています！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
