HTMLテーブルの外観を大幅にCSSで改善することができます。
| 会社 | 接触 | 国 |
|---|---|---|
| Alfreds Futterkiste | マリア・アンダース | ドイツ |
| Berglunds snabbkop | クリスティーナ・ベルグルンド | スウェーデン |
| セントロコマーシャルモンテズマ | フランシスコ・チャン | メキシコ |
| エルンスト・ヘンデル | ローランド・メンデル | オーストリア |
| 島のトレーディング | ヘレン・ベネット | イギリス |
| Koniglichエッセン | フィリップ・クレイマー | ドイツ |
| バッカスWinecellarsを笑います | ヨッシーTannamuri | カナダ |
| Magazzini Alimentari Riuniti | ジョバンニRovelli | イタリア |
表の罫線
CSSで表の罫線を指定するには、使用するborderプロパティを。
次の例では、黒のボーダーを指定する<table> 、 <th> 、および<td>要素：
例の表は、上記の二重の境界線があることに注意してください。 テーブルとの両方があるためです<th>および<td>要素は別々の境界線を持っています。
表の罫線を折りたたみます
border-collapseプロパティは、表の罫線は、単一の境界線に崩壊する必要があるかどうかを設定します。
あなたが唯一のテーブルの周りに境界線が必要な場合は、指定するだけでborderのプロパティを<table> ：
表の幅と高さ
幅とテーブルの高さは以下のように定義されたwidthとheightのプロパティ。
次の例では、100％にテーブルの幅、および高さ設定<th>は50pxに要素を：
平面線形
text-alignプロパティは、コンテンツの（左、右、または中央など）水平方向の整列設定<th>または<td>
デフォルトでは、の内容は、 <th>の要素が中央揃えされているとの内容<td>要素が左寄せされています。
次の例のテキスト左揃えにし<th>要素を：
垂直整列
vertical-alignプロパティは、コンテンツの（上部、下部、または中間のような）垂直方向の配置を設定します<th>または<td>
デフォルトでは、テーブル内のコンテンツの垂直方向の配置は、（両方のため途中で<th>および<td>要素）。
次の例では、用の下に縦書きテキストの配置設定<td>要素を：
テーブルのパディング
、テーブル内の境界線とコンテンツの間のスペースを制御し使用するには、 paddingのプロパティを<td>と<th>の要素：
水平ディバイダー
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | $ 100 |
| ロイス | グリフィン | $ 150 |
| ジョー | スワンソン | $ 300 |
追加border-bottomにプロパティを<th>および<td>水平ディバイダーのために：
Hoverable表
使用:hover上のセレクター<tr>マウスオーバーでテーブルの行をハイライトします：
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | $ 100 |
| ロイス | グリフィン | $ 150 |
| ジョー | スワンソン | $ 300 |
ストライプテーブル
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | $ 100 |
| ロイス | グリフィン | $ 150 |
| ジョー | スワンソン | $ 300 |
ゼブラストライプテーブルの場合、使用するnth-child()セレクタをし、追加background-colorすべての偶数（または奇数）テーブル行に：
表の色
次の例では、背景色とテキストの色を指定し<th>要素を：
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | $ 100 |
| ロイス | グリフィン | $ 150 |
| ジョー | スワンソン | $ 300 |
レスポンシブ表
画面がいっぱいにコンテンツを表示するには小さすぎる場合は応答テーブルには、水平スクロールバーが表示されます。
| ファーストネーム | 苗字 | 点数 | 点数 | 点数 | 点数 | 点数 | 点数 | 点数 | 点数 | 点数 | 点数 | 点数 | 点数 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ジル | スミス | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| イブ | ジャクソン | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| アダム | ジョンソン | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
（のようなコンテナ要素追加<div>持つ） overflow-x:auto周り<table>要素は、それが応答するために：
その他の例
派手な表を作ります
この例では、派手な表を作成する方法を示します。
テーブルのキャプションの位置を設定します。
この例では、テーブルのキャプションを配置する方法を示します。
練習で自分自身をテスト！
CSSのテーブルプロパティ
| プロパティ | 説明 |
|---|---|
| border | 1宣言内のすべての境界プロパティを設定します。 |
| border-collapse | 表の罫線が崩壊するかどうかを指定します |
| border-spacing | 隣接するセルの境界線との間の距離を指定します。 |
| caption-side | テーブルのキャプションの配置を指定します |
| empty-cells | テーブルに空のセルに罫線や背景を表示するかどうかを指定します |
| table-layout | レイアウトアルゴリズムは、テーブルに使用する設定 |