TECH I.S.

CSSでtable（表）のデザインをカスタマイズする

CSSを使用すると、HTMLテーブルの外観を大幅に改善できます。






会社 コンタクト 国
アルフレッドのフードボックス マリア・アンダース ドイツ
バーグルンドのスーパーマーケット クリスティーナ・ベルグルンド スウェーデン
モンテスマ ショッピング センター フランシスコ・チャン メキシコ
エルンスト・ヘンデル ローランド・メンデル オーストリア
アイランドトレーディング ヘレン・ベネット イギリス
ロイヤルフード フィリップ・クレイマー ドイツ
ラフィング バッカス ワインセラーズ ヨーシ・タナムリ カナダ
マガッツィーニ・アリメンタリ・リウニティ ジョン・ロヴェリ イタリア

自分で試してみる »


表の罫線

CSSで表の境界線を指定するには、borderプロパティを使用します。

次の例では、<table>、<th>、および<td>要素に実線の境界線を指定しています。















ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

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

自分で試してみる »

全幅テーブル

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
















ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

table {   width: 100%; }

自分で試してみる »

二重の境界線

上記の例のテーブルには二重の境界線があることに注意してください。これは、テーブルと<th>および<td>要素の両方に別々の境界線があるためです。

二重枠を削除するには、以下の例をご覧ください。

表の枠線を折りたたむ

border-collapseプロパティは、テーブルの境界線を1つの境界線に折りたたむかどうかを設定します。
ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

table{   border-collapse: collapse; }

自分で試してみる »

テーブルの周囲に境界線のみが必要な場合は、<table>のborderプロパティのみを指定します。
















ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

table{   border: 1px solid; }

自分で試してみる »



CSSを使用すると、HTMLテーブルの外観を大幅に改善できます。






会社 コンタクト 国
アルフレッドのフードボックス マリア・アンダース ドイツ
バーグルンドのスーパーマーケット クリスティーナ・ベルグルンド スウェーデン
モンテスマ ショッピング センター フランシスコ・チャン メキシコ
エルンスト・ヘンデル ローランド・メンデル オーストリア
アイランドトレーディング ヘレン・ベネット イギリス
ロイヤルフード フィリップ・クレイマー ドイツ
ラフィング バッカス ワインセラーズ ヨシ・タンナムリ カナダ
マガッツィーニ・アリメンタリ・リウニティ ジョン・ロヴェリ イタリア

自分で試してみる »


表の罫線

CSSで表の境界線を指定するには、borderプロパティを使用します。

次の例では、<table>、<th>、および<td>要素に実線の境界線を指定しています。















ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

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

自分で試してみる »

全幅テーブル

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
















ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

table {   width: 100%; }

自分で試してみる »

二重の境界線

上記の例のテーブルには二重の境界線があることに注意してください。これは、テーブルと<th>および<td>要素の両方に別々の境界線があるためです。

二重枠を削除するには、以下の例をご覧ください。

表の枠線を折りたたむ

border-collapseプロパティは、テーブルの境界線を1つの境界線に折りたたむかどうかを設定します。
ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

table{   border-collapse: collapse; }

自分で試してみる »

テーブルの周囲に境界線のみが必要な場合は、<table>のborderプロパティのみを指定します。
















ファーストネーム ラストネーム
ピーター グリフィン
ロイス グリフィン

例

table{   border: 1px solid; }

自分で試してみる »



チュートリアル