CSS入門 | CSS基本プロパティ | CSSテーブル

Tags:

CSSを使うと、さまざまな形のテーブルを作成できる。

テーブルには次のプロパティを使用してCSSスタイルを適用できる。

プロパティ	説明
border	すべてのborderプロパティを使ったスタイルを1行で設定できる。
border-collapse	テーブルの境界線を1本の線として表示するかを設定する。
border-spacing	テーブル要素(`th`, `td`)間の余白を設定する。
caption-side	テーブルのキャプションを設定する。
empty-cells	テーブル内の空セルの境界線や背景色を表示するかどうかを設定する。
table-layout	テーブルで使用されるレイアウトアルゴリズムを設定する。

borderプロパティ

borderプロパティでテーブルの境界線を設定できる。このプロパティを指定しない場合、該当テーブルは既定で空の境界線を持つ。

<style>
    table, th, td { border: 2px solid orange; }
</style>

上の例でテーブルの境界線が2本ずつ表示される理由は、<th>タグと<td>タグがそれぞれ独自の境界線を持っているためである。このように2本で表示される境界線を1本にするには、border-collapseプロパティを使う必要がある。

border-collapseプロパティ

border-collapseプロパティ値をcollapseに設定すると、該当テーブルの境界線は1本で表示される。このプロパティを指定しない場合、該当テーブルは既定でテーブル要素ごとの境界線をすべて表示する。

<style>
    table, th, td { border: 2px solid orange; }
    table { border-collapse: collapse; }
</style>

border-spacingプロパティ

border-spacingプロパティは、テーブル要素(th, td)間の余白を設定する。

<style>
    table, th, td { border: 1px solid black; }
    table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }
</style>

text-alignプロパティ

text-alignプロパティは、テーブル要素(th, td)内部でテキストの水平方向の配置を設定する。 <th>タグ内部は中央揃え、<td>タグ内部は左揃えが既定である。

<style>
    table, th, td { border: 1px solid black; }
    table { border-collapse: collapse; width: 100%; }
    th { text-align: left; }
    td { text-align: center; }
</style>

vertical-alignプロパティ

vertical-alignプロパティは、テーブル要素(th, td)内部でテキストの垂直方向の配置を設定する。 <th>タグと<td>タグはいずれも中央揃えが既定である。

<style>
    table, th, td { border: 1px solid black; }
    table { border-collapse: collapse; width: 100%; }
    th { vertical-align: top; height: 50px; }
    td { vertical-align: bottom; height: 50px; }
</style>

さまざまな形のテーブル例

CSSを使うと、HTMLの基本テーブルをより多様な見た目に設定できる。

次の例は、<th>タグと<td>タグにborder-bottomプロパティを使い、水平の区切り線だけで作ったテーブルである。

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
</style>

次の例は、:hoverセレクターを使い、<tr>タグにマウスを置くと行全体がハイライトされるようにしたテーブルである。

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
    tr:hover { background-color: #F5F5F5; }
</style>

次の例は、background-colorプロパティと:nth-childセレクターを使い、縞模様の効果を設定したテーブルである。

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; }
    tr:nth-child(odd) { background-color: #F3F3F3; }
</style>