CSSテーブル
HTMLテーブルの外観は、CSSを使用して大幅に改善できます。
| 会社 | コンタクト | 国 |
|---|---|---|
| アルフレッドの給餌箱 | マリアアンダース | ドイツ |
| ベルグルンドのスーパーマーケット | クリスティーナ・ベルグルンド | スウェーデン |
| モンテスマショッピングセンター | フランシスコ・チャン | メキシコ |
| 深刻な貿易 | ローランドメンデル | オーストリア |
| アイランドトレーディング | ヘレン・ベネット | 英国 |
| ロイヤルフード | フィリップ・クラマー | ドイツ |
| 笑うバッカスワインセラー | Yoshi Tannamuri | カナダ |
| 集められた食品倉庫 | ジョバンニ・ロヴェッリ | イタリア |
テーブルの境界線
CSSでテーブルの境界線を指定するには、borderプロパティを使用します。
次の例では、<table>、<th>、および<td>要素の黒い境界線を指定しています。
例
table, th, td {
border: 1px solid black;
}
全幅テーブル
上記の表は、場合によっては小さく見える場合があります。画面全体（全幅）にまたがるテーブルが必要な場合はwidth: 100%、<table>要素に次のように追加します。
例
table {
width: 100%;
}
二重の境界線
上記の例の表には二重の境界線があることに注意してください。これは、テーブルと<th>要素および<td>要素の両方に別々の境界線があるためです。
二重の境界線を削除するには、以下の例を見てください。
テーブルの境界線を折りたたむ
このborder-collapseプロパティは、テーブルの境界線を1つの境界線に折りたたむかどうかを設定します。
例
table
{
border-collapse: collapse;
}
テーブルの周囲に境界線のみが必要な場合は、border<table>のプロパティのみを指定します。
例
table
{
border: 1px solid black;
}