Web ページでは通常、業績表や財務諸表などのデータを表示するために表を使用します。しかし、デフォルトでは表のスタイルは美しくなく、ページのスタイルにも一致しません。 CSS には、表のスタイルを変更して外観を大幅に改善できるプロパティが用意されています。
1. HTML テーブルの境界線
HTML チュートリアル部分では、border 属性を使用してテーブルを設定しました。コードは次のとおりです。
<tableborder=1><thead><th>名前</th><th>性別</th></thead><tbody><tr><td>張三</td><td>男性</td ></tr><tr><td>李思</td><td>女性</td></tr></tbody></table>
実行結果:
実際、この方法はお勧めできません。 Web デザインは、HTML がコンテンツを表すのに対し、CSS はスタイルを記述するという原則に従っているからです。
表の場合、表の内容は行と列のテキストであり、枠線は表の外観を美化するものでスタイル部分に属するため、CSSで記述するのが適しています。
2.CSS設定表枠
CSS ボーダーを使用してテーブルのボーダーを設定できます。コードは次のとおりです。
<!DOCTYPEhtml><html><head><style>table{float:left;}.table_one{border-collapse: Separate;}.table_two{margin-left:20px;border-collapse:collapse;}</style> </head><body><tableclass=table_oneborder=1><tr><th>番号</th><th>名前</th><th>年齢</th></tr><tr><td >1</td><td>張三</td><td>15</td></tr><tr><td>2</td><td>李思</td><td> 11</td></tr></table><tableclass=table_twoborder=1px><tr><th>番号</th><th>名前</th><th>年齢</th></tr ><tr><td>1</td><td>張三</td><td>15</td></tr><tr><td>2</td><td>李思< /td><td>11</td></tr></table></body></html>実行結果は次のとおりです。
(1) table-layout: テーブルのレイアウト アルゴリズムを設定します。レイアウト アルゴリズムには、固定テーブル レイアウト アルゴリズムと自動テーブル レイアウト アルゴリズムがあります。
(2) border-collapse: 標準の HTML スタイルに従って、テーブル内のセルの境界線を結合するか分離するかを設定します。
(3) border-spacing: テーブルの境界線が分離されている場合、隣接する 2 つの境界線間の水平方向と垂直方向の間隔を設定します。
(4) caption-side: 表に対する表タイトルの位置を設定します。
(5) 空セル：表のセルに内容がない場合に、セルの枠線を表示するかどうかを設定します。