CSS テーブル
CSSを使用すると、HTMLテーブルをより美しくすることができます。
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
| Paris spécialités | Marie Bertrand | France |
| The Big Cheese | Liz Nixon | USA |
| Vaffeljernet | Palle Ibsen | Denmark |
テーブルの枠線
CSSテーブルの枠線を指定するには、borderプロパティを使用します。
次の例では、テーブルのth要素とtd要素の黒い枠線を指定しています。
上記の例ではテーブルに二重枠線があることに注意してください。これは、テーブルとth/td要素がそれぞれ独立した境界線を持つためです。
テーブルに単一の枠線を表示するには、border-collapseプロパティを使用します。
枠線の折りたたみ
border-collapseプロパティは、テーブルの枠線を単一の枠線に折りたたむか、または分離するかを設定します。
テーブルの幅と高さ
widthプロパティとheightプロパティは、テーブルの幅と高さを定義します。
次の例では、テーブルの幅を100％、th要素の高さを50ピクセルに設定しています。
テーブルテキストの整列
テーブル内のテキスト整列と垂直整列のプロパティ。
text-alignプロパティは水平方向の配置を設定します。左、右、または中央。
vertical-alignプロパティは垂直方向の配置を設定します。たとえば、上、下、または中央。
テーブルのパディング
枠線とテーブル内容の間隔を制御するには、td要素とth要素のパディングプロパティを使用します。
テーブルの色
次の例では、枠線の色、th要素のテキストの色と背景色を指定しています。
その他の例
個性的なテーブルを作成する
この例では、個性的なテーブルを作成する方法を示します。
テーブルキャプションの位置を設定する
この例では、テーブルキャプションの配置方法を示します。