【6日でできるHTML＆CSS入門】テーブルのスタイルの指定

―テーブルを“見せる”ための CSS 基本レシピ―
　<table> タグだけで作った表は、ブラウザ既定のグレー罫線で味気なく表示されます。CSS で枠線・セル間隔・背景色を整えると、データの可読性やデザインの統一感が一気に向上します。ここでは「枠線 1 本化」と「線種・線幅のバリエーション」を中心に、すぐ試せるサンプルコードでテーブル装飾の基礎を身に付けます。

１．最小構成：1 px の細線テーブル

1.1. サンプルコード（単独動作）

ファイル名： lesson25_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS で枠線 1 本化</title>
<meta charset="UTF-8">
<style>
  /* 表全体の罫線とセル間隔を設定 */
  table {
    width: 60%;
    border: 1px solid #000;      /* 黒い 1px 線 */
    border-collapse: collapse;   /* 隣接セルの線を重ねて 1 本に */
  }
  td {
    padding: 6px 10px;
  }
</style>
</head>
<body>
  <h1>シンプルなテーブル</h1>
  <table border="1">
    <tr><td>アイテム A</td><td>100</td></tr>
    <tr><td>アイテム B</td><td>250</td></tr>
  </table>
</body>
</html>

表示結果

黒い 1 px の外枠とセル罫線が 1 本で統一されています。

1.2. 表全体の罫線の指定

箇所	説明
border: 1px solid #000;	幅 1 px・実線・黒
border-collapse: collapse;	重なった罫線を 1 本にまとめる

２．ボーダーのカスタマイズ

2.1. 幅・スタイル・色を一括指定

border: <幅> <スタイル> <色>;

幅の単位	意味	例
px	画素数	`2px`
em	文字サイズ基準	`0.1em`

2.2. 主な線種

値	表示例	用途
solid	───	標準実線
double	══	強調枠
dashed	▬▬▬	区分線
dotted	⋯⋯⋯	点線
none / hidden	罫線なし	レイアウト用

2.3. バリエーション例

ファイル名： lesson25_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>線種バリエーション</title>
<style>
table { border-collapse:collapse; margin-bottom:20px; }
.sample1 { border:2px double #0066cc; }
.sample2 { border:3px dashed #ff6600; }
.sample3 { border:4px dotted #008000; }
td { padding:4px 8px; }
caption { font-weight:bold; margin:6px; }
</style>
</head>
<body>
  <table class="sample1"><caption>double</caption>
    <tr><td>A</td><td>B</td></tr></table>

  <table class="sample2"><caption>dashed</caption>
    <tr><td>C</td><td>D</td></tr></table>

  <table class="sample3"><caption>dotted</caption>
    <tr><td>E</td><td>F</td></tr></table>
</body>
</html>

表示結果

それぞれ 二重線・破線・点線 が確認できます。

３．キャッシュとスーパーリロード

CSS を修正したのに反映されない場合はブラウザが旧 CSS をキャッシュしています。

Chrome (Windows)： Ctrl + Shift + R または Shift + F5
macOS： Cmd + Shift + R

４．使用タグ／プロパティ一覧

タグ／属性	役割
`<table>`	表全体
`<tr>`	行
`<td>`	データセル
`<caption>`	表タイトル
`border`	幅・線種・色をまとめて指定
`border-collapse`	罫線重ね表示の制御
`padding`	セル内余白

まとめ

border + border-collapse: collapse で「枠線 1 本テーブル」が完成。
線種 (solid / double / dashed / dotted) と幅単位 (px, em) を組み合わせて自由にデザイン。
変更が反映されないときは スーパーリロード でブラウザキャッシュを無視。

　これらの基本を押さえれば、見出し行だけ太枠にする、交互行に色を付ける、といった応用もスムーズに行えます。