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

自分で試してみる »

実績多数！おすすめのプログラミングスクール９選

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル