CSSでtable（表）のデザインをカスタマイズする
CSSを使用すると、HTMLテーブルの外観を大幅に改善できます。
| 会社 | コンタクト | 国 |
|---|---|---|
| アルフレッドのフードボックス | マリア・アンダース | ドイツ |
| バーグルンドのスーパーマーケット | クリスティーナ・ベルグルンド | スウェーデン |
| モンテスマ ショッピング センター | フランシスコ・チャン | メキシコ |
| エルンスト・ヘンデル | ローランド・メンデル | オーストリア |
| アイランドトレーディング | ヘレン・ベネット | イギリス |
| ロイヤルフード | フィリップ・クレイマー | ドイツ |
| ラフィング バッカス ワインセラーズ | ヨーシ・タナムリ | カナダ |
| マガッツィーニ・アリメンタリ・リウニティ | ジョン・ロヴェリ | イタリア |
表の罫線
CSSで表の境界線を指定するには、borderプロパティを使用します。
次の例では、<table>、<th>、および<td>要素に実線の境界線を指定しています。
| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
全幅テーブル
上の表は場合によっては小さく見えるかもしれません。画面全体 (全幅) にまたがる表が必要な場合は、<table>要素にwidth: 100%を追加します。
| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
二重の境界線
上記の例のテーブルには二重の境界線があることに注意してください。これは、テーブルと<th>および<td>要素の両方に別々の境界線があるためです。
二重枠を削除するには、以下の例をご覧ください。
表の枠線を折りたたむ
border-collapseプロパティは、テーブルの境界線を1つの境界線に折りたたむかどうかを設定します。| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
テーブルの周囲に境界線のみが必要な場合は、<table>のborderプロパティのみを指定します。
| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
CSSを使用すると、HTMLテーブルの外観を大幅に改善できます。
| 会社 | コンタクト | 国 |
|---|---|---|
| アルフレッドのフードボックス | マリア・アンダース | ドイツ |
| バーグルンドのスーパーマーケット | クリスティーナ・ベルグルンド | スウェーデン |
| モンテスマ ショッピング センター | フランシスコ・チャン | メキシコ |
| エルンスト・ヘンデル | ローランド・メンデル | オーストリア |
| アイランドトレーディング | ヘレン・ベネット | イギリス |
| ロイヤルフード | フィリップ・クレイマー | ドイツ |
| ラフィング バッカス ワインセラーズ | ヨシ・タンナムリ | カナダ |
| マガッツィーニ・アリメンタリ・リウニティ | ジョン・ロヴェリ | イタリア |
表の罫線
CSSで表の境界線を指定するには、borderプロパティを使用します。
次の例では、<table>、<th>、および<td>要素に実線の境界線を指定しています。
| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
全幅テーブル
上の表は場合によっては小さく見えるかもしれません。画面全体(全幅)にまたがる表が必要な場合は、<table>要素にwidth: 100%を追加します。
| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
二重の境界線
上記の例のテーブルには二重の境界線があることに注意してください。これは、テーブルと<th>および<td>要素の両方に別々の境界線があるためです。
二重枠を削除するには、以下の例をご覧ください。
表の枠線を折りたたむ
border-collapseプロパティは、テーブルの境界線を1つの境界線に折りたたむかどうかを設定します。| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
テーブルの周囲に境界線のみが必要な場合は、<table>のborderプロパティのみを指定します。
| ファーストネーム | ラストネーム |
|---|---|
| ピーター | グリフィン |
| ロイス | グリフィン |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。