CSS Table 関係の文書を更新

- 2021/10/28 時点の英語版に同期

1 files changed, 55 insertions, 72 deletions

diff --git a/files/ja/web/css/border-spacing/index.md b/files/ja/web/css/border-spacing/index.md
index a7eb1e8afe..27da3fb4f2 100644
--- a/files/ja/web/css/border-spacing/index.md
+++ b/files/ja/web/css/border-spacing/index.md
@@ -3,81 +3,83 @@ title: border-spacing
 slug: Web/CSS/border-spacing
 tags:
   - CSS
-  - CSS テーブル
   - CSS プロパティ
   - CSS 表
-  - Reference
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.border-spacing
 translation_of: Web/CSS/border-spacing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>CSS の <strong><code>border-spacing</code></strong> プロパティは、 {{htmlelement("table")}} における隣り合うセルの枠線同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が <code>separate</code> のときのみ適用されます。</p>
+**`border-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{htmlelement("table")}} における隣り合うセルの境界同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が `separate` のときのみ適用されます。
 
-<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
 
-<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+`border-spacing` の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する `border-spacing` と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。
 
-<p><code>border-spacing</code> の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する <code>border-spacing</code> と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。</p>
+> **Note:** `border-spacing` プロパティは、`<table>` 要素における非推奨の `cellspacing` 属性と同等ですが、任意で 2 つ目の値を指定して、水平方向と垂直方向に異なる間隔を設定することができる点が異なります。
 
-<div class="note">
-<p><strong>メモ:</strong> <code>border-spacing</code> プロパティは、 <code>&lt;table&gt;</code> 要素の非推奨になった <code>cellspacing</code> 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers">/* &lt;length&gt; */
+```css
+/* <length> */
 border-spacing: 2px;
 
-/* 左右の &lt;length&gt; | 上下の &lt;length&gt; */
+/* 左右の <length> | 上下の <length> */
 border-spacing: 1cm 2em;
 
 /* グローバル値 */
 border-spacing: inherit;
 border-spacing: initial;
+border-spacing: revert;
 border-spacing: unset;
-</pre>
+```
+
+`border-spacing` プロパティは 1 つまたは 2 つの値で指定することができます。
+
+- **1 つ**の `<length>` 値が指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
+- **2 つ**の `<length>` 値が指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う*列*の間隔) を定義し、2 番目の値がセル間の上下方向の間隔 (つまり、隣り合う*行*の間隔) を定義します。
 
-<p><code>border-spacing</code> プロパティは1つまたは2つの値で指定することができます。</p>
+### 値
 
-<ul>
- <li><code>&lt;length&gt;</code> 値が<strong>1つ</strong>指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。</li>
- <li><code>&lt;length&gt;</code> 値が<strong>2つ</strong>指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う<em>列</em>の間隔) を定義し、2番目の値がセル間の上下方向の間隔 (つまり、隣り合う<em>行</em>の間隔) を定義します。</li>
-</ul>
+- {{cssxref("&lt;length&gt;")}}
+  - : 固定値による間隔の大きさです。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値による間隔の大きさです。</dd>
-</dl>
+{{CSSInfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<p>この例では表のセル間において、垂直方向に <code>.5em</code>、水平方向に <code>1em</code> の間隔を適用します。なお、外の辺においては、表の <code>padding</code> の値が <code>border-spacing</code> の値に追加されます。</p>
+<h3 id="Spacing_and_padding_table_cells">表のセルの余白とパディング</h3>
 
-<h3 id="HTML">HTML</h3>
+この例では表のセル間において、垂直方向に `.5em`、水平方向に `1em` の間隔を適用します。なお、外の辺においては、表の `padding` の値が `border-spacing` の値に追加されます。
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+#### HTML
 
-<h3 id="CSS">CSS</h3>
+```html
+<table>
+  <tr>
+    <td>1</td><td>2</td><td>3</td>
+  </tr>
+  <tr>
+    <td>4</td><td>5</td><td>6</td>
+  </tr>
+  <tr>
+    <td>7</td><td>8</td><td>9</td>
+  </tr>
+</table>
+```
+
+#### CSS
 
-<pre class="brush: css">table {
+```css
+table {
   border-spacing: 1em .5em;
   padding: 0 2em 1em 0;
   border: 1px solid orange;
@@ -90,40 +92,21 @@ td {
   text-align: center;
   vertical-align: middle;
 }
-</pre>
+```
 
-<h3 id="Result" name="Result">結果</h3>
+#### 結果
 
-<p>{{ EmbedLiveSample('Example', 400, 200) }}</p>
+{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.border-spacing")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("border-collapse")}}, {{cssxref("border-style")}}</li>
- <li><code>border-spacing</code> プロパティは HTML の {{htmlelement("table")}} 要素の出現方法を変更します。</li>
-</ul>
+- {{cssxref("border-collapse")}}, {{cssxref("border-style")}}
+- `border-spacing` プロパティは HTML の {{htmlelement("table")}} 要素の出現方法を変更します。