6日でできる 新HTML&CSS入門｜CSSでテーブルを見やすくする
CSSで表の印象は大きく変わる。
罫線・余白・線種を整えて、読みやすく見やすいテーブルを作ろう。
HTMLの<table>を使うと、行と列を持つ表を作ることができます。商品一覧、料金表、時間割、比較表、成績表など、Webページの中で情報を整理して見せたいときにテーブルはとても便利です。
ただし、HTMLだけで作ったテーブルは、見た目が少しそっけなくなりがちです。セル同士の境界が分かりにくかったり、文字と罫線の間が詰まって見えたり、表全体の印象がページのデザインに合わなかったりすることがあります。
そこで役立つのがCSSです。CSSを使うと、表の罫線の太さ、線の種類、色、セル内の余白、表の幅などを自由に調整できます。特に、borderとborder-collapseを使うと、テーブルの罫線をすっきり1本にまとめることができます。
テーブルは、内容そのものが大切な要素です。だからこそ、デザインを整える目的は「派手にすること」ではなく、「情報を読み取りやすくすること」です。この記事では、CSSでテーブルを見やすくするための基本として、細い罫線のテーブル、線種の変更、セル内余白、ブラウザキャッシュへの対応までを順番に見ていきます。
テーブルの見た目を整える基本
テーブルを見やすくするうえで、最初に意識したいのは罫線です。罫線があると、どのデータがどの行・列に属しているのかが分かりやすくなります。
しかし、罫線を何も考えずに付けると、セルとセルの間に線が二重に見えたり、線が太く感じられたりすることがあります。そのようなときに使うのがborder-collapseです。
border-collapse: collapse;を指定すると、隣り合うセルの罫線が重なって1本の線として表示されます。これにより、表全体がすっきりした印象になります。
図1：HTMLだけの表とCSSで整えた表の違い
この図から分かること
HTMLだけでも表は作れますが、見た目を整えるにはCSSが必要です。罫線を整理し、セル内に余白を入れるだけでも、表の読みやすさは大きく変わります。テーブルのCSSは、デザイン性だけでなく、情報の見つけやすさにも関係します。
1pxの細線でシンプルなテーブルを作る
まずは、基本形として1pxの細い罫線を持つテーブルを作ります。学習用のテーブルでは、いきなり複雑なデザインにするよりも、細い線で表の構造を分かりやすくするのがおすすめです。
ここでは、商品名と価格を並べる簡単なテーブルを例にします。表全体と各セルにborderを指定し、border-collapse: collapse;で罫線を1本にまとめます。
ファイル名： lesson25_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで細線テーブルを作る</title>
<style>
table {
width: 70%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #333;
padding: 8px 12px;
}
th {
background-color: #f2f6ff;
}
</style>
</head>
<body>
<h1>文房具の価格表</h1>
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>ノート</td>
<td>180円</td>
</tr>
<tr>
<td>ボールペン</td>
<td>120円</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
このHTMLでは、<table>で表全体を作り、<tr>で行を作り、<th>と<td>でセルを作っています。<th>は見出し用のセル、<td>は通常のデータ用のセルです。
CSSでは、tableにborder-collapse: collapse;を指定しています。これにより、隣り合うセルの罫線が1本にまとまります。さらに、thとtdにborder: 1px solid #333;を指定しているため、各セルに細い実線が付きます。
padding: 8px 12px;は、セルの内側に余白を作る指定です。文字と罫線の距離が少し空くため、表が窮屈に見えにくくなります。
細線テーブルで使っているCSS
| 指定 | 役割 |
|---|---|
| border-collapse: collapse; | 隣り合う罫線を1本にまとめる |
| border: 1px solid #333; | 幅1px、実線、濃いグレーの罫線を付ける |
| padding: 8px 12px; | セルの内側に上下8px、左右12pxの余白を作る |
| width: 70%; | 表の横幅を画面幅の70%にする |
| background-color: #f2f6ff; | 見出しセルに淡い背景色を付ける |
このように、テーブルの見た目は複数のCSSを組み合わせて整えます。特にborder、border-collapse、paddingは、テーブル装飾の基本としてよく使われます。
borderで罫線の太さ・種類・色をまとめて指定する
borderは、罫線を指定するためのCSSです。borderでは、線の太さ、線の種類、線の色をまとめて指定できます。
基本の書き方は次の形です。
border: 線の太さ 線の種類 線の色;たとえば、次のように書くと、1pxの黒い実線になります。
border: 1px solid #000;2pxの青い実線にしたい場合は、次のように書きます。
border: 2px solid #0066cc;このように、borderは1つの指定で線の見た目をまとめて決められる便利なCSSです。テーブルでは、table、th、tdなどに指定して使います。
罫線の太さでよく使う単位
| 単位 | 意味 | 例 |
|---|---|---|
| px | 画面上のピクセルを基準にした単位 | 1px、2px、4px |
| em | 文字サイズを基準にした単位 | 0.1em、0.2em |
テーブルの罫線では、pxがよく使われます。1pxは細くてすっきりした印象になり、2px以上にすると少し強調された印象になります。
emは文字サイズに応じて変化する単位です。文字サイズに合わせて線の太さも調整したい場合に使えます。ただし、初心者のうちはpxのほうが見た目を想像しやすいです。
線種を変えるとテーブルの印象も変わる
borderでは、線の種類も指定できます。よく使われる線種には、solid、double、dashed、dottedなどがあります。
| 値 | 線の種類 | 印象・用途 |
|---|---|---|
| solid | 実線 | 標準的で読みやすい |
| double | 二重線 | 見出し枠や強調したい部分に向いている |
| dashed | 破線 | 区切りや補足情報の表現に使いやすい |
| dotted | 点線 | 軽い印象やメモ風の表現に向いている |
| none | 線を表示しない | 罫線を消したいときに使う |
| hidden | 線を隠す | 表示上の罫線を見せたくないときに使う |
通常のデータ表では、solidがもっとも使いやすいです。一方で、デザインの雰囲気に合わせてdoubleやdashedを使うと、表に変化を出すことができます。
ただし、線種を変えすぎると、どこを見ればよいのか分かりにくくなることもあります。基本はsolidで整え、強調したい部分だけ線種や太さを変えると、見やすい表になります。
図2：borderで指定できる線の種類
この図から分かること
borderでは、線の太さや色だけでなく、線の種類も変更できます。実線は標準的で読みやすく、二重線は強調に向いています。破線や点線はやわらかい印象を出せますが、使いすぎると表が読みにくくなるため、目的に合わせて使い分けることが大切です。
線種を変えたテーブルを作る
次に、複数の線種を使ったテーブルを作ってみます。ここでは、同じ形のテーブルに対して、classを変えることで線の種類を切り替えます。
ファイル名： lesson25_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルの線種を変える</title>
<style>
table {
border-collapse: collapse;
margin-bottom: 24px;
width: 50%;
}
td {
padding: 8px 14px;
text-align: center;
}
caption {
font-weight: bold;
margin-bottom: 6px;
}
.line-double td {
border: 3px double #0066cc;
}
.line-dashed td {
border: 3px dashed #ff6600;
}
.line-dotted td {
border: 3px dotted #008000;
}
</style>
</head>
<body>
<h1>罫線の種類を比べる</h1>
<table class="line-double">
<caption>二重線のテーブル</caption>
<tr>
<td>東京</td>
<td>大阪</td>
</tr>
</table>
<table class="line-dashed">
<caption>破線のテーブル</caption>
<tr>
<td>春</td>
<td>夏</td>
</tr>
</table>
<table class="line-dotted">
<caption>点線のテーブル</caption>
<tr>
<td>赤</td>
<td>青</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
この例では、3つのテーブルにそれぞれ異なるclassを付けています。
line-doubleのテーブルでは、tdにborder: 3px double #0066cc;を指定しています。これにより、青い二重線のテーブルになります。
line-dashedのテーブルでは、tdにborder: 3px dashed #ff6600;を指定しています。これにより、オレンジ色の破線になります。
line-dottedのテーブルでは、tdにborder: 3px dotted #008000;を指定しています。これにより、緑色の点線になります。
同じHTML構造でも、classを変えてCSSを分けることで、見た目を簡単に切り替えることができます。Web制作では、このようにHTMLは情報の構造を担当し、CSSは見た目を担当する、と考えると分かりやすくなります。
captionで表のタイトルを付ける
テーブルには、<caption>を使って表のタイトルを付けることができます。captionは、表が何を示しているのかを説明するためのタグです。
たとえば、料金表、売上表、予定表など、表の内容をひと目で分かるようにしたいときに使います。
<caption>二重線のテーブル</caption>captionにCSSを指定すると、文字を太くしたり、表との間隔を調整したりできます。
caption {
font-weight: bold;
margin-bottom: 6px;
}表は数字や単語が並ぶことが多いため、タイトルがないと何の表なのか分かりにくくなる場合があります。captionを付けることで、表の意味が伝わりやすくなります。
paddingでセル内の余白を整える
テーブルを見やすくするうえで、paddingもとても大切です。paddingは、セルの内側の余白を指定するCSSです。
セル内の文字と罫線が近すぎると、表が詰まって見えます。特に、数字や短い単語が並ぶ表では、余白がないと読みづらくなりやすいです。
td {
padding: 8px 14px;
}この指定では、上下に8px、左右に14pxの余白が入ります。左右の余白を少し広めにすると、文字がゆったり配置され、読みやすい表になります。
| paddingの例 | 見た目の印象 |
|---|---|
| padding: 2px 4px; | 文字と罫線が近く、少し詰まった印象 |
| padding: 6px 10px; | 標準的で使いやすい余白 |
| padding: 10px 18px; | ゆったりした印象で見やすい |
| padding: 16px 24px; | 大きめの表やデザイン重視の表に向いている |
初心者向けの教材では、まずpadding: 6px 10px;やpadding: 8px 12px;あたりから試すと扱いやすいです。
border-collapseで罫線を1本にまとめる
テーブルの罫線で特に重要なのがborder-collapseです。テーブルでは、セルごとに罫線を付けると、隣り合うセルの境界線が重なって見えることがあります。
border-collapse: collapse;を指定すると、その重なった罫線が1本にまとまります。
table {
border-collapse: collapse;
}この指定があるだけで、表の見た目はかなりすっきりします。テーブル装飾では定番の指定なので、表を作るときはまずborder-collapse: collapse;を思い出すとよいでしょう。
反対に、セル同士の間隔をあえて空けたい場合は、border-collapse: separate;を使うこともあります。ただし、基本的な一覧表や料金表ではcollapseのほうが使いやすい場面が多いです。
図3：border-collapseで罫線が1本にまとまる仕組み
この図から分かること
border-collapse: collapse;を使うと、隣り合うセルの罫線が1本にまとまります。罫線が二重に見えると表が重たく感じられますが、1本に整理するとすっきりして読みやすくなります。テーブルをきれいに見せる基本として、border-collapseはとても重要です。
テーブルの幅を指定してページに合わせる
テーブルは、内容に合わせて横幅が決まることもありますが、ページ全体のレイアウトに合わせて幅を指定したい場合があります。
table {
width: 70%;
}width: 70%;と指定すると、親要素の幅に対して70%の幅で表示されます。画面幅に応じて表の大きさが変わるため、固定幅よりも柔軟に使えます。
一方で、次のようにpxで指定することもできます。
table {
width: 600px;
}pxで指定すると、表の幅が固定されます。デザインを正確にそろえたい場合には便利ですが、画面が狭い環境では横にはみ出すことがあります。
| 指定方法 | 特徴 |
|---|---|
| width: 70%; | 画面や親要素の幅に合わせて変化する |
| width: 600px; | 常に同じ幅で表示される |
| width: 100%; | 表を横幅いっぱいに広げる |
初心者向けの学習では、まずwidth: 60%;やwidth: 70%;のように割合で指定すると、テーブルの大きさを感覚的につかみやすいです。
thとtdを使い分ける
テーブルでは、見出しセルに<th>、通常のデータセルに<td>を使います。
<th>は、表の見出しとして使うセルです。ブラウザによっては、標準で太字・中央揃えのように表示されます。<td>は、通常のデータを入れるセルです。
| タグ | 役割 |
|---|---|
| <table> | 表全体を表す |
| <tr> | 表の行を表す |
| <th> | 見出しセルを表す |
| <td> | データセルを表す |
| <caption> | 表のタイトルを表す |
見た目だけを考えると、すべて<td>でも表は作れます。しかし、表の構造を正しく伝えるためには、見出しには<th>を使うのがおすすめです。CSSで背景色や文字の太さを調整すれば、見出し行をさらに分かりやすくできます。
表を見やすくするための小さな工夫
テーブルを見やすくするには、罫線だけでなく、余白、背景色、文字の配置も大切です。
たとえば、数値を扱う表では、価格や数量を右寄せにすると読みやすくなります。項目名は左寄せ、数値は右寄せにすると、情報の種類が分かりやすくなります。
td {
text-align: left;
}中央にそろえたい場合は、text-align: center;を使います。
td {
text-align: center;
}見出し行に背景色を付けると、表の構造がさらにはっきりします。
th {
background-color: #f2f6ff;
}背景色は、濃すぎる色にすると文字が読みづらくなることがあります。教材や業務用の表では、淡い色を使うと落ち着いた印象になります。
CSSを修正したのに表示が変わらないとき
CSSを書き直したのに、ブラウザ上の表示が変わらないことがあります。その場合、ブラウザが古いCSSを一時的に保存している可能性があります。
この一時保存の仕組みをキャッシュといいます。キャッシュは、Webページを素早く表示するために便利な仕組みですが、学習中や制作中には、修正内容がすぐに反映されない原因になることがあります。
そのようなときは、スーパーリロードを試します。スーパーリロードを行うと、キャッシュを使わずにページを読み込み直せます。
| 環境 | 操作 |
|---|---|
| Chrome Windows | Ctrl + Shift + R |
| Chrome Windows | Shift + F5 |
| macOS | Cmd + Shift + R |
CSSを変更したのに表示が変わらないときは、コードが間違っているとは限りません。まず保存できているかを確認し、次にスーパーリロードを試すとよいです。
使用するタグとCSSの整理
ここまでに出てきたタグとCSSを整理しておきます。
| 種類 | 役割 |
|---|---|
| <table> | 表全体を作る |
| <tr> | 表の行を作る |
| <th> | 見出しセルを作る |
| <td> | データセルを作る |
| <caption> | 表のタイトルを付ける |
| border | 罫線の太さ、線種、色をまとめて指定する |
| border-collapse | テーブルの罫線を分離するか、重ねて1本にするかを指定する |
| padding | セル内の余白を指定する |
| width | 表の横幅を指定する |
| background-color | セルや見出し行の背景色を指定する |
| text-align | セル内の文字の位置を指定する |
テーブルのCSSでは、まずborderで罫線を付け、border-collapse: collapse;で線を1本に整理し、paddingで文字まわりの余白を整える流れが基本です。
この基本を押さえておくと、見出し行だけ色を付ける、特定の列だけ中央揃えにする、行ごとに背景色を変えるなど、より実用的なテーブルデザインにも進みやすくなります。
読みやすいテーブルを作るときの考え方
テーブルを装飾するときは、見た目を華やかにすることよりも、情報を正しく読み取りやすくすることが大切です。
罫線が細く整理されていると、表の構造が分かりやすくなります。セル内に適度な余白があると、文字が詰まって見えにくくなります。見出し行に背景色を付けると、どの列が何を意味しているのかすぐに分かります。
また、線種や色を変える場合は、目的を決めて使うことが大切です。すべての罫線を目立たせるのではなく、必要な場所だけを強調すると、落ち着いた読みやすいテーブルになります。
CSSでテーブルを整える基本は、難しいものではありません。border、border-collapse、paddingを中心に少しずつ調整していけば、HTMLで作った表を、Webページに合った見やすいデザインへ変えていくことができます。
必要でしたら、この続きとして「見出し行に色を付ける」「交互行に背景色を付ける」「スマホでも見やすいテーブルにする」内容も同じ文調で作成できます。