` のすべての行を、行に含まれる `td` セルに基づいてソートします。
+thead > tr,
+tfoot > tr {
+ background-color: rgb(228 240 245);
+}
-> [!NOTE]
-> この方法では、 `` 要素が子孫要素のない生のテキストで作成されていることを想定しています。
+th,
+td {
+ border: 1px solid rgb(160 160 160);
+}
+```
+
+#### 結果
-##### HTML
+{{EmbedLiveSample("Basic_table_styling", 650, 180)}}
-```html
+### 高度な表のスタイル設定
+
+これで、ヘッダーと本体の両方の領域で、スタイル設定された行をすべて使用し、行の色を交互に変えたり、行内の位置指定に応じてセルの色を変えたり、といった具合に、すべてを徹底的に行います。 今回は、まず結果から見ていきましょう。
+
+#### 結果
+
+最終的な表は次のようになります。
+
+{{EmbedLiveSample("Advanced_table_styling", 650, 210)}}
+
+今回も、HTML に変更はありません。HTML 構造を適切に用意すると、どのようなことができるか見てみましょう。
+
+```html hidden
+
+ 2021 年の会員の状況
+
- | Numbers |
- Letters |
+ 名前 |
+ ID |
+ 会員資格期間 |
+ 残高 |
+
+
+ | 入会日 |
+ 退会日 |
- | 3 |
- A |
+ Margaret Nguyen |
+ 427311 |
+ |
+ なし |
+ 0.00 |
- | 2 |
- B |
+ Edvard Galinski |
+ 533175 |
+ |
+ |
+ 37.00 |
- | 1 |
- C |
+ Hoshi Nakamura |
+ 601942 |
+ |
+ なし |
+ 15.00 |
+
+
+ | 合計残高 |
+ 52.00 |
+
+
```
-##### JavaScript
+#### CSS
-```js
-const allTables = document.querySelectorAll("table");
+今回は、CSS がかなり込み入っています。複雑というほどではありませんが、まだあります。分解してみましょう。
-for (const table of allTables) {
- const tBody = table.tBodies[0];
- const rows = Array.from(tBody.rows);
- const headerCells = table.tHead.rows[0].cells;
+ここでは、 {{CSSxRef("border-collapse")}} および {{CSSxRef("border-spacing")}} プロパティを追加して、セル間の空間をなくし、互いに接している境界線を 1 つにまとめ、二重の境界線にならないようにしています。さらに、`bottom` を {{CSSxRef("caption-side")}} プロパティを使用して、表の一番下にキャプション ({{HTMLElement("caption")}}) を配置しています。
- for (const th of headerCells) {
- const cellIndex = th.cellIndex;
+```css
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ border: 2px solid rgb(140 140 140);
+ font:
+ 16px "Open Sans",
+ Helvetica,
+ Arial,
+ sans-serif;
+}
- th.addEventListener("click", () => {
- rows.sort((tr1, tr2) => {
- const tr1Text = tr1.cells[cellIndex].textContent;
- const tr2Text = tr2.cells[cellIndex].textContent;
- return tr1Text.localeCompare(tr2Text);
- });
+caption {
+ caption-side: bottom;
+ padding: 10px;
+ font-weight: bold;
+}
+```
+
+次に、 {{CSSxRef("padding")}} プロパティを使用して、表のすべてのセルにコンテンツの周囲に空白を設けます。 {{CSSxRef("vertical-align")}} プロパティは、見出しセルのコンテンツをセルの `bottom` に配置します。これは、2 つの行にまたがる見出しセルで確認できます。
- tBody.append(...rows);
- });
- }
+```css
+th,
+td {
+ border: 1px solid rgb(160 160 160);
+ padding: 4px 6px;
+}
+
+th {
+ vertical-align: bottom;
}
```
-##### 結果
+次の CSS ルールは、 {{cssxref("background-color")}} を表のヘッダー（ {{HTMLElement("thead")}} を用いて指定されるもの）にあるすべての {{HTMLElement("tr")}} 要素に設定します。次に、ヘッダーの下の境界線を 2 ピクセル幅の線に設定します。ただし、 {{CSSxRef(":nth-of-type")}} セレクターを使用して、ヘッダーの 2 番目の行に {{CSSxRef("border-bottom")}} プロパティを適用していることに注意してください。なぜでしょうか？ ヘッダーは 2 行で構成されており、一部のセルが 2 行にまたがっているからです。つまり、実際には 2 行あるということです。最初の行にスタイルを適用しても、期待通りの結果は得られません。
+
+```css
+thead > tr {
+ background-color: rgb(228 240 245);
+}
-{{EmbedLiveSample('Sorting_rows_with_a_click_on_the_th_element', '100%', '100')}}
+thead > tr:nth-of-type(2) {
+ border-bottom: 2px solid rgb(140 140 140);
+}
+```
+
+「入会日」と「退会日」という 2 つの見出しセルを、入会者の「良い」と、退会者の「悪い」面を表す緑色と赤色でスタイル設定してみましょう。ここでは、 {{CSSxRef(":last-of-type")}} セレクターを使用して表の見出し部分の最後の行を掘り下げ、その最初の見出しセル（「入会日」の見出し）に緑がかった色を、2 つ目の見出しセル（「退会日」の見出し）に赤みがかった色を指定します。
+
+```css
+thead > tr:last-of-type > th:nth-of-type(1) {
+ background-color: rgb(225 255 225);
+}
+
+thead > tr:last-of-type > th:nth-of-type(2) {
+ background-color: rgb(255 225 225);
+}
+```
+
+最初の列も目立つようにすべきなので、ここにもいくつかの独自のスタイルを追加します。この CSS ルールは、テーブル本体の各行の最初のヘッダーセルを {{CSSxRef("text-align")}} プロパティでスタイルし、メンバーの名前を左揃えにし、 {{cssxref("background-color")}} を少し変えています。
+
+```css
+tbody > tr > th:first-of-type {
+ text-align: left;
+ background-color: rgb(225 229 244);
+}
+```
+
+表データをもっと読み取りやすくするために、行の色を交互に変えることは一般的です。これは「縞模様」と呼ばれることもあります。偶数行すべてに {{cssxref("background-color")}} を少し追加してみましょう。
+
+```css
+tbody > tr:nth-of-type(even) {
+ background-color: rgb(237 238 242);
+}
+```
+
+表では通貨の値を右揃えにするのが標準的な慣習なので、ここではそれを実行します。これは、本体のそれぞれの行の最後の {{HTMLElement("td")}} の {{CSSxRef("text-align")}} プロパティを `right` に設定するだけです。
+
+```css
+tbody > tr > td:last-of-type {
+ text-align: right;
+}
+```
+
+最後に、表のフッターの部分にも同様のスタイル設定を適用し、目立つようにします。
+
+```css
+tfoot > tr {
+ border-top: 2px dashed rgb(140 140 140);
+ background-color: rgb(228 240 245);
+}
+
+tfoot th,
+tfoot td {
+ text-align: right;
+ font-weight: bold;
+}
+```
### 巨大な表を小さな空間に表示
@@ -558,24 +878,28 @@ for (const table of allTables) {
|