CSS テーブル

HTMLテーブルの見た目は、CSSで大幅に改善できます:

会社名 連絡先
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

テーブルボーダー

CSSでテーブルのボーダーを指定するには、borderプロパティを使用します。

以下の例では、<table><th>、および<td>要素に実線のボーダーを指定しています:


table, th, td {
  border: 1px solid;
}

全幅のテーブル

上記のテーブルは場合によっては小さく見えるかもしれません。画面全体にわたる(全幅の)テーブルが必要な場合は、<table>要素にwidth: 100%を追加します:


table {
  width: 100%;
}

二重ボーダー

上記の例のテーブルには二重のボーダーがあります。これは、テーブルと<th>および<td>要素がそれぞれ独立してボーダーを持っているためです。

二重のボーダーを削除するには、以下の例を参照してください。

ボーダーの折り畳み

border-collapseプロパティは、テーブルのボーダーを単一のボーダーに折り畳むかどうかを設定します:


table {
  border-collapse: collapse;
}

テーブル全体にボーダーを付けたい場合は、<table>に対してborderプロパティを指定します:


table {
  border: 1px solid;
}