CSS Tables(表格)

テーブルは通常、テーブルデータを表示するために使用されます。

CSSスタイルシート

スタイルや属性がなく、HTMLテーブル、ブラウザは枠線なしで表示します。CSSスタイルを使用してテーブルをスタイリッシュにするには非常に効果的です。

以下のセクションでは、CSSを使用してテーブル要素のレイアウトと表示方法を制御し、洗練された一貫性のあるテーブルを作成する方法について説明します。

テーブルに枠線を追加する

CSS border属性は、テーブルの枠線を定義する最良の方法です。

以下の例では、黒い枠線の<table>、<th>および<td>要素。

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

テーブル枠線を折り畳む

前の例の出力を確認すると、各テーブルセルに独立した枠線があり、隣接するテーブルセルの枠線間に一定の間隔があることに気づくでしょう。これは、デフォルトではテーブルセルの境界が分離されているためです。しかし、要素を使用してborder-collapseの属性は、独立したテーブル枠線を1つの枠線に折り畳むために使用されます<table>：

以下の例では、スタイルルールがテーブルセルの枠線を折り畳み、テーブルおよびテーブルセル要素に1ピクセルの黒い枠線を適用します。

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

CSSの値を使用して、テーブルセル間のスペースを削除することもできますborder-spacing属性が0の場合、空間は削除されますが、枠線が設定されているように合併しません。-collapseを使用してcollapse。

テーブル内部空間の調整

デフォルトでは、ブラウザが作成するテーブルセルは、セル内のデータを収めるのに十分な大きさです。セルの内容の周りにさらにスペースを追加するには、以下のようにCSS padding属性を使用できます：

th,　td　{
　　　　padding:　15px;
}

border-spacingテーブルの枠線が分離されている場合（デフォルト設定）、CSS属性を使用してセル枠線間の間隔を調整することもできます。

以下のスタイルルールはテーブルのすべての枠線間に適用されます10ピクセルの間隔：

table　{
　　　　border-spacing:　10px;
}

テーブルレイアウトの制御

デフォルトでは、テーブルは含まれるデータに合わせて拡張または収縮します。データがテーブルにフィルダーされるたびに、空きスペースがあればデータは拡張し続けます。しかし、時にはテーブルに固定幅を設定してレイアウトを管理する必要があります。

CSS tableを使用してこれを行うことができます-layout属性を使用してこの操作を実行します。この属性は、テーブルのセル、行、列の配置に使用されるアルゴリズムを定義します。この属性は、二つの値のうちの一つを取ります：

• auto —自動テーブルレイアウトアルゴリズムを使用します。このアルゴリズムでは、テーブルおよびセルの幅を内容に合わせて調整できます。これはデフォルトの値です。

• fixed -固定テーブルレイアウトアルゴリズムを使用しています。このアルゴリズムでは、テーブルの水平レイアウトはセルの内容に依存せず、テーブルの幅、列の幅、境界またはセルの間隔に依存します。

以下の例では、スタイルルールはテーブルが固定レイアウトアルゴリズムを使用してレイアウトされ、300ピクセルの固定幅。

table　{
　　　　width:　300px;
　　　　table-layout:　fixed;
}

この-layout属性の固定値は、大規模なテーブルでは、ブラウザが整个テーブルを表示するまで、ユーザーはテーブルの任何部分を見ることができません。

は空のセルを処理します

この-cellsCSS属性は境界を制御し、テーブルに明確な内容がない場合に、分離された境界モデルのセル背景を使用して表示します。

この属性は、show、hide、inheritのいずれかの値を取ることができます。

以下のスタイルルールは、table要素内で空のセルを非表示にします。

table　{
　　　　border-collapse:　separate;
　　　　empty-cells:　hide;
}

はテーブルタイトルの位置を制御します

この-sideCSS属性を使用してテーブルタイトルの垂直位置を設定できます。

以下のスタイルルールは、テーブルのタイトルをその親テーブルの下に配置します。しかし、キャプションテキストの水平アライメントを変更するには、このtext-align属性。

キャプション　{
　　　　キャプション-side:　bottom;
}