Web開発の初期には、HTMLテーブルは非常に単純で、広範なスタイル設定オプションがありませんでした。ただし、現在、ほとんどのテーブルは、ユーザーにとってより美的で機能的なエクスペリエンスを作成するようにスタイル設定されています。
CSSは、一連のテーブルスタイル属性を提供します。これらの属性を使用すると、特に、テーブルセルを分離したり、テーブルの境界線を指定したり、テーブルの幅と高さを指定したりできます。
このチュートリアルでは、CSSを使用してテーブルのスタイルを設定する方法を例を挙げて説明します。 。このチュートリアルを終了すると、エキスパートになります。
HTMLテーブル
HTMLコードは、テーブルの構造を定義します。
タグを使用して、テーブルを定義します。 、| 、および | タグは、それぞれ行、テーブルヘッダー、およびコンテンツセルを指定します。
HTMLテーブルの例を見てみましょう。以下の例では、2020年3月23日の週の New York Timesベストセラーリストの上位5冊をリストした表があります。
 テーブルのコードは次のとおりです。
このテーブルには、3つの列と6つの行があります。
テーブルCSS CSSは、テーブルのスタイル設定に使用されます。上記の表はデータを整理して示していますが、プレーンHTMLで記述されています（スタイルはありません）。 CSSを使用すると、テーブルの見栄えを良くすることができます。
テーブルのスタイルを設定します。 CSSを使用すると、次のことができます。 - 境界線を追加する
- 境界線を圧縮する
- 境界線の間隔を調整する
- 幅と高さを調整するテーブル
- パディングを追加
- テキストを水平方向に配置
- テキストを垂直方向に配置
- ジョグマウス（ホバー）機能を追加
- セルの色を設定する
- 空のセルの表示方法を設定する
これらのトピックはすべて、以下の説明で説明します。
境界線配列または配列に含まれる要素の周囲に境界線を追加するとします。
境界線を追加するには、borderプロパティを使用できます。次に、borderプロパティを使用して、ヘッダーセルを含むテーブルとそのセルに境界線を追加する例を示します。
このコードでは、幅1ピクセルの黒い実線の境界線を定義します。コードの結果は次のとおりです。  テーブルにdoubleが含まれていることに注意してくださいbordersこれは、テーブル自体（ ）、そのヘッダー（| ）、およびそのセル（ | ）に境界線を適用したためです。単一の境界線に二重境界線を適用すると、border-collapseプロパティを使用できます。
border-collapseプロパティは、テーブルの二重境界線を単一境界線に変換します。border-collapseプロパティのデフォルト値は折りたたまれています。プロパティborder-collapseが値collapse<を受け取った場合/ code>、配列の周囲の境界線は折りたたまれます。
動作中のbコマンド-collapseプロパティの例を次に示します。
コードは次を返します：  テーブルとそのコンテンツの境界線が1つになりました。
Border Spac eng border-spacingプロパティを使用して、テーブル内のセル間の間隔を定義できます。border-spacingプロパティは、セル-そしてそれはこの順序で行われます。
これは、最初のテーブル（折りたたまれた境界線のないテーブル）のborder-spacingプロパティを使用した例です。
コードは次を返します：  | |
