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;
}