CSS Table 関係の文書を更新

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

8 files changed, 453 insertions, 534 deletions

diff --git a/files/ja/web/css/border-collapse/index.md b/files/ja/web/css/border-collapse/index.md
index 7de69d0f6f..588bd841b0 100644
--- a/files/ja/web/css/border-collapse/index.md
+++ b/files/ja/web/css/border-collapse/index.md
@@ -3,80 +3,90 @@ title: border-collapse
 slug: Web/CSS/border-collapse
 tags:
   - CSS
-  - CSS Reference
+  - CSS 境界
+  - CSS プロパティ
+  - CSS 表
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.border-collapse
 translation_of: Web/CSS/border-collapse
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>border-collapse</code> プロパティは、 {{htmlElement("table")}} の中のセルが境界線を共有するか分離するかを設定します。</p>
+**`border-collapse`** は [CSS](/ja/docs/Web/CSS) のプロパティで、表 ({{htmlElement("table")}}) の中のセルが境界を共有するか分離するかを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+セルが折り畳まれている場合 (collapse)、 {{cssxref("border-style")}} の値で `inset` が `groove` のように動作し、 `outset` が `ridge` のように動作します。
 
-<p>セルが collapsed の場合、 {{cssxref("border-style")}} の値で <code>inset</code> が <code>groove</code> のように動作し、 <code>outset</code> が <code>ridge</code> のように動作します。</p>
+セルが分離されている場合 (separate)、セル間の距離は {{cssxref("border-spacing")}} プロパティで定義されます。
 
-<p>セルが separated の場合、セルの間隔は {{cssxref("border-spacing")}} プロパティで定義されます。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 border-collapse: collapse;
 border-collapse: separate;
 
 /* グローバル値 */
 border-collapse: inherit;
 border-collapse: initial;
+border-collapse: revert;
 border-collapse: unset;
-</pre>
+```
+
+`border-collapse` プロパティは、以下のリストから選択された単一のキーワードで指定します。
 
-<p><code>border-collapse</code> プロパティは、以下のリストから選択された単一のキーワードで指定します。</p>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `collapse`
+  - : 隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
+- `separate`
+  - : 隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。
 
-<dl>
- <dt><code>collapse</code></dt>
- <dd>隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。</dd>
- <dt><code>separate</code></dt>
- <dd>隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="A_colorful_table_of_browser_engines" name="A_colorful_table_of_browser_engines">ブラウザーエンジンのカラフルな表</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;table class="separate"&gt;
-  &lt;caption&gt;&lt;code&gt;border-collapse: separate&lt;/code&gt;&lt;/caption&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ed"&gt;Edge&lt;/td&gt; &lt;td class="tr"&gt;EdgeHTML&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-&lt;table class="collapse"&gt;
-  &lt;caption&gt;&lt;code&gt;border-collapse: collapse&lt;/code&gt;&lt;/caption&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ed"&gt;Edge&lt;/td&gt; &lt;td class="tr"&gt;EdgeHTML&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">.collapse {
+## 例
+
+<h3 id="A_colorful_table_of_browser_engines">ブラウザーエンジンのカラフルな表</h3>
+
+#### HTML
+
+```html
+<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+```
+
+#### CSS
+
+```css
+.collapse {
   border-collapse: collapse;
 }
 
@@ -103,40 +113,22 @@ table td {
 .wk { border-color: gold blue; }
 .ch { border-color: red yellow green blue; }
 .bk { border-color: navy blue teal aqua; }
-.op { border-color: red; }</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p>
-
-<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#borders', 'border-collapse') }}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+.op { border-color: red; }
+```
+
+#### 結果
+
+{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}
+
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.border-collapse")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}</li>
- <li><code>border-collapse</code> プロパティは HTML の {{htmlelement("table")}} 要素の表示方法を変更します。</li>
-</ul>
+- {{cssxref("border-spacing")}}, {{cssxref("border-style")}}
+- `border-collapse` プロパティは HTML の {{htmlelement("table")}} 要素の表示方法を変更します。
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")}} 要素の出現方法を変更します。
diff --git a/files/ja/web/css/caption-side/index.md b/files/ja/web/css/caption-side/index.md
index 5b95a7c75e..c62e778cd2 100644
--- a/files/ja/web/css/caption-side/index.md
+++ b/files/ja/web/css/caption-side/index.md
@@ -3,92 +3,94 @@ title: caption-side
 slug: Web/CSS/caption-side
 tags:
   - CSS
-  - CSS Property
-  - CSS Tables
-  - Reference
+  - CSS プロパティ
+  - CSS 表
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.caption-side
 translation_of: Web/CSS/caption-side
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>caption-side</code></strong> は、表 ({{htmlelement("table")}}) の {{HTMLElement("caption")}} の配置位置を指定する <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティです。</p>
+**`caption-side`** は [CSS](/ja/docs/Web/CSS) のプロパティで、表 ({{htmlelement("table")}}) の {{HTMLElement("caption")}} の中身を指定された側に配置します。この値は表の {{cssxref('writing-mode')}} に対する相対値です。
 
-<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
+{{EmbedInteractiveExample("pages/css/caption-side.html")}}
 
+## 構文
 
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* 方向を示す値 */
+```css
+/* 方向を示す値 */
 caption-side: top;
 caption-side: bottom;
 
 /* 警告: 非標準の値 */
-caption-side: left;
-caption-side: right;
-caption-side: top-outside;
-caption-side: bottom-outside;
+caption-side: block-start;
+caption-side: block-end;
+caption-side: inline-start;
+caption-side: inline-end;
 
 /* グローバル値 */
 caption-side: inherit;
 caption-side: initial;
+caption-side: revert;
 caption-side: unset;
-</pre>
-
-<p>このプロパティの値は、表の {{cssxref('writing-mode')}} に対して相対的です。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>top</code></dt>
- <dd>キャプションボックスを表の上に配置することを示すキーワードです。</dd>
- <dt><code>bottom</code></dt>
- <dd>キャプションボックスを表の下に配置することを示すキーワードです。</dd>
- <dt><code>left</code> {{non-standard_inline}}</dt>
- <dd>キャプションボックスを表の左に配置することを示すキーワードです。</dd>
- <dd>{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}</dd>
- <dt><code>right</code> {{non-standard_inline}}</dt>
- <dd>キャプションボックスを表の右に配置することを示すキーワードです。</dd>
- <dd>{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}</dd>
- <dt><code>top-outside</code> {{non-standard_inline}}</dt>
- <dd>キャプションボックスを表の上に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。<br>
- {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 <code>top</code> について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}</dd>
- <dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
- <dd>キャプションボックスを表の下に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。<br>
- {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 <code>bottom</code> について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式構文</h3>
+```
+
+`caption-side` プロパティは、以下のキーワード値のうちの一つで指定します。
+
+### 値
+
+- `top`
+  - : キャプションボックスを表の上方に配置します。
+- `bottom`
+  - : キャプションボックスを表の下方に配置します。
+- `block-start`
+  - : キャプションボックスを表のブロック方向の先頭に配置します。
+- `block-end`
+  - : キャプションボックスを表のブロック方向の末尾に配置します。
+- `inline-start`
+  - : キャプションボックスを表のインライン方向の先頭に配置します。
+- `inline-end`
+  - : キャプションボックスを表のインライン方向の末尾に配置します。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+<h3 id="Setting_captions_above_and_below">キャプションを上や下に設定</h3>
 
-<pre class="brush: html">&lt;table class="top"&gt;
-  &lt;caption&gt;Caption ABOVE the table&lt;/caption&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Some data&lt;/td&gt;
-    &lt;td&gt;Some more data&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
+#### HTML
 
-&lt;br&gt;
+```html
+<table class="top">
+  <caption>Caption ABOVE the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
 
-&lt;table class="bottom"&gt;
-  &lt;caption&gt;Caption BELOW the table&lt;/caption&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Some data&lt;/td&gt;
-    &lt;td&gt;Some more data&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+<br>
 
-<h3 id="CSS">CSS</h3>
+<table class="bottom">
+  <caption>Caption BELOW the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+```
+
+#### CSS
 
-<pre class="brush: css">.top caption {
+```css
+.top caption {
   caption-side: top;
 }
 
@@ -103,38 +105,16 @@ table {
 td {
   border: 1px solid blue;
 }
-</pre>
+```
 
-<h3 id="出力">出力</h3>
+#### 結果
 
-<p>{{EmbedLiveSample('Examples')}}</p>
-
-<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('CSS Logical Properties', '#caption-side', 'caption-side')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>値 <code>top</code> および <code>bottom</code> は、<code>writing-mode</code> の値に対して相対的であることを定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>最初の定義</td>
-  </tr>
- </tbody>
-</table>
+{{EmbedLiveSample('Setting_captions_above_and_below', 'auto', 160)}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+## 仕様書
 
+{{Specifications}}
 
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.caption-side")}}</p>
+{{Compat}}
diff --git a/files/ja/web/css/css_table/index.md b/files/ja/web/css/css_table/index.md
index 8c1b45c427..e6d6366213 100644
--- a/files/ja/web/css/css_table/index.md
+++ b/files/ja/web/css/css_table/index.md
@@ -4,44 +4,28 @@ slug: Web/CSS/CSS_Table
 tags:
   - CSS
   - CSS 表
-  - リファレンス
+  - ガイド
   - 概要
+  - リファレンス
 translation_of: Web/CSS/CSS_Table
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><ruby><strong>CSS 表</strong><rp> (</rp><rt>CSS Table</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、表データをレイアウトする方法を定義します。</p>
+**CSS 表** (CSS Table) は CSS のモジュールの一つで、表データをレイアウトする方法を定義します。
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="Properties" name="Properties">プロパティ</h3>
+### プロパティ
 
-<div class="index">
-<ul>
- <li>{{cssxref("border-collapse")}}</li>
- <li>{{cssxref("border-spacing")}}</li>
- <li>{{cssxref("caption-side")}}</li>
- <li>{{cssxref("empty-cells")}}</li>
- <li>{{cssxref("table-layout")}}</li>
- <li>{{cssxref("vertical-align")}}</li>
-</ul>
-</div>
+- {{cssxref("border-collapse")}}
+- {{cssxref("border-spacing")}}
+- {{cssxref("caption-side")}}
+- {{cssxref("empty-cells")}}
+- {{cssxref("table-layout")}}
+- {{cssxref("vertical-align")}}
 
-<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")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+| 仕様書                                | 状態                | 備考     |
+| ------------------------------------- | ------------------- | -------- |
+| {{SpecName("CSS2.1", "tables.html")}} | {{Spec2("CSS2.1")}} | 初回定義 |
diff --git a/files/ja/web/css/empty-cells/index.md b/files/ja/web/css/empty-cells/index.md
index 8e4030d657..67e4ed0854 100644
--- a/files/ja/web/css/empty-cells/index.md
+++ b/files/ja/web/css/empty-cells/index.md
@@ -6,21 +6,22 @@ tags:
   - CSS プロパティ
   - CSS 表
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.empty-cells
 translation_of: Web/CSS/empty-cells
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>CSS の <strong><code>empty-cells</code></strong> プロパティは、目に見える内容を持たない{{htmlelement("table", "表")}}のセルの、周囲の境界と背景を{{glossary("user agent", "ユーザーエージェント")}}がどのように描画するかを指定します。</p>
+**`empty-cells`** は CSS のプロパティで、{{htmlelement("table", "表")}}のセルが目に見える内容を持たない場合に、周囲の境界と背景を{{glossary("user agent", "ユーザーエージェント")}}がどのように描画するかを指定します。
 
-<div>{{EmbedInteractiveExample("pages/css/empty-cells.html")}}</div>
+{{EmbedInteractiveExample("pages/css/empty-cells.html")}}
 
-<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+このプロパティは、 {{cssxref("border-collapse")}} プロパティが `separate` であった場合のみ効果があります。
 
-<p>このプロパティは、 {{cssxref("border-collapse")}} プロパティが <code>separate</code> の場合のみ効果があります。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 empty-cells: show;
 empty-cells: hide;
 
@@ -28,53 +29,59 @@ empty-cells: hide;
 empty-cells: inherit;
 empty-cells: initial;
 empty-cells: unset;
-</pre>
+```
+
+`empty-cells` プロパティは、以下のキーワード値のうちの一つで指定します。
 
-<p><code>empty-cells</code> プロパティは、以下のキーワード値のうちの一つで指定します。</p>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `show`
+  - : 通常のセルのように、境界や背景を描くことを示すキーワードです。
+- `hide`
+  - : 境界や背景を描かないことを示すキーワードです。
 
-<dl>
- <dt><code>show</code></dt>
- <dd>通常のセルのように、境界や背景を描くことを示すキーワードです。</dd>
- <dt><code>hide</code></dt>
- <dd>境界や背景を描かないことを示すキーワードです。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Examples" name="Examples">例</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table class="table_1"&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Moe&lt;/td&gt;
-    &lt;td&gt;Larry&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Curly&lt;/td&gt;
-    &lt;td&gt;&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-&lt;br&gt;
-&lt;table class="table_2"&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Moe&lt;/td&gt;
-    &lt;td&gt;Larry&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Curly&lt;/td&gt;
-    &lt;td&gt;&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">.table_1 {
+## 例
+
+<h3 id="Showing_and_hiding_empty_table_cells">表の空のセルの表示・非表示</h3>
+
+#### HTML
+
+```html
+<table class="table_1">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+<br>
+<table class="table_2">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+```
+
+#### CSS
+
+```css
+.table_1 {
   empty-cells: show;
 }
 
@@ -86,33 +93,22 @@ td,
 th {
   border: 1px solid gray;
   padding: 0.5rem;
-}</pre>
+}
+```
 
-<h3 id="Result" name="Result">結果</h3>
+#### 結果
 
-<p>{{ EmbedLiveSample('Examples', '100%', '200') }}</p>
+{{ EmbedLiveSample('Showing_and_hiding_empty_table_cells', '100%', '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#empty-cells', 'empty-cells')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
+
+## ブラウザーの互換性
 
-<p>{{cssinfo}}</p>
+{{Compat}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## 関連情報
 
-<p>{{Compat("css.properties.empty-cells")}}</p>
+- {{cssxref("border-collapse")}}
+- [表のスタイル付け](/ja/docs/Learn/CSS/Building_blocks/Styling_tables)
diff --git a/files/ja/web/css/table-layout/index.md b/files/ja/web/css/table-layout/index.md
index 74507ca0d3..c10fdd6250 100644
--- a/files/ja/web/css/table-layout/index.md
+++ b/files/ja/web/css/table-layout/index.md
@@ -5,7 +5,7 @@ tags:
   - CSS
   - CSS プロパティ
   - CSS 表
-  - Reference
+  - リファレンス
   - recipe:css-property
 browser-compat: css.properties.table-layout
 translation_of: Web/CSS/table-layout
diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md
index 7302c8c57b..97000a1c58 100644
--- a/files/ja/web/css/vertical-align/index.md
+++ b/files/ja/web/css/vertical-align/index.md
@@ -4,108 +4,26 @@ slug: Web/CSS/vertical-align
 tags:
   - CSS
   - CSS プロパティ
-  - Reference
+  - リファレンス
 translation_of: Web/CSS/vertical-align
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>vertical-align</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。</p>
+**`vertical-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div>
+{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+vertical-align は、2 つの場面で使用することができます。
 
-<p>vertical-align は、2 つの場面で使用することができます。</p>
+- 包含する行ボックスの中で、インライン要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。
+- [表のセルの内容](#vertical_alignment_in_a_table_cell)の垂直方向の配置を決める場合。
 
-<ul>
- <li>行ボックスの中でインライン要素の縦方向の整列方法を決める場合。例えば、テキストの行の中で {{HTMLElement("img")}} の縦方向の位置を決めるために使います。</li>
-</ul>
+`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Web/HTML/Block-level_elements)の垂直方向の配置には使用できません。
 
-<div id="vertical-align-inline">
-<pre class="hidden brush: html notranslate">&lt;p&gt;
-top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-&lt;/p&gt;
-&lt;p&gt;
-text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
--1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
--100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-&lt;/p&gt;
+## 構文
 
-</pre>
-
-<pre class="hidden brush: css notranslate">#* {
-  box-sizing: border-box;
-}
-
-img {
-  margin-right: 0.5em;
-}
-
-p {
-  height: 3em;
-  padding: 0 .5em;
-  font-family: monospace;
-  text-decoration: underline overline;
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
-
-<ul>
- <li>表内のセルの内容を垂直方向に整列する場合</li>
-</ul>
-
-<div id="vertical-align-table">
-<pre class="hidden brush: html notranslate">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
-    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
-    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
-    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
-    &lt;td&gt;
-      &lt;p&gt;There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.&lt;/p&gt;
-&lt;p&gt;There is another theory which states that this has already happened.&lt;/p&gt;
-    &lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-
-</pre>
-
-<pre class="hidden brush: css notranslate">table {
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
-}
-
-table, th, td {
-  border: 1px solid black;
-}
-
-td {
-  padding: 0.5em;
-  font-family: monospace;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
-
-<p><code>vertical-align</code> はインライン要素、インラインブロック要素、表セル要素だけに適用できることに注意してください。つまり、<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>の縦方向の整列には使えないのです。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -115,138 +33,204 @@ vertical-align: middle;
 vertical-align: top;
 vertical-align: bottom;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 vertical-align: 10em;
 vertical-align: 4px;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 vertical-align: 20%;
 
 /* グローバル値 */
 vertical-align: inherit;
 vertical-align: initial;
+vertical-align: revert;
 vertical-align: unset;
-</pre>
+```
 
-<p><code>vertical-align</code> プロパティは、以下の値のうち一つで指定します。</p>
+`vertical-align` プロパティは、以下の値のうち一つで指定します。
 
-<h3 id="Values_for_inline_elements" name="Values_for_inline_elements">インライン要素用の値</h3>
+### インライン要素用の値
 
-<h4 id="Parent-relative_values" name="Parent-relative_values">親要素との相対値</h4>
+#### 親要素との相対値
 
-<p>以下の値は、親要素に対しての縦方向の整列方法を表します。</p>
+以下の値は、親要素に対する垂直方向の配置方法を表します。
 
-<dl>
- <dt><code>baseline</code></dt>
- <dd>要素のベースラインを親要素のベースラインに揃えます。 {{HTMLElement("textarea")}} のような、一部の <a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a> のベースラインは HTML 仕様で未定義であり、このため、このキーワードの挙動はブラウザにより異なるかもしれません。</dd>
- <dt><code>sub</code></dt>
- <dd>要素のベースラインを親要素の subscript-baseline に揃えます。</dd>
- <dt><code>super</code></dt>
- <dd>要素のベースラインを親要素の superscript-baseline に揃えます。</dd>
- <dt><code>text-top</code></dt>
- <dd>要素の上端を親要素のフォントの上端に揃えます。</dd>
- <dt><code>text-bottom</code></dt>
- <dd>要素の下端を親要素のフォントの下端に揃えます。</dd>
- <dt><code>middle</code></dt>
- <dd>要素の中央を親要素の <code>baseline + x-height の半分</code> に揃えます。</dd>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>&lt;length&gt; 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセンテージで指定します。負の値を使えます。</dd>
-</dl>
+- `baseline`
+  - : 要素のベースラインを親要素のベースラインに揃えます。一部の[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{HTMLElement("textarea")}} などのベースラインは HTML 仕様で未定義です。このため、このキーワードの挙動はブラウザーにより異なるかもしれません。
+- `sub`
+  - : 要素のベースラインを親要素の subscript-baseline に揃えます。
+- `super`
+  - : 要素のベースラインを親要素の superscript-baseline に揃えます。
+- `text-top`
+  - : 要素の上端を親要素のフォントの上端に揃えます。
+- `text-bottom`
+  - : 要素の下端を親要素のフォントの下端に揃えます。
+- `middle`
+  - : 要素の中央を親要素の `baseline + x-height の半分` に揃えます。
+- {{cssxref("&lt;length&gt;")}}
+  - : 要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : &lt;length&gt; 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセント値で指定します。負の値を使えます。
 
-<h4 id="Line-relative_values" name="Line-relative_values">行との相対値</h4>
+#### 行との相対値
 
-<p>以下の値は、親要素ではなく、行全体に対しての縦方向の整列方法を表します。</p>
+以下の値は、親要素ではなく、行全体に対する垂直方向の配置方法を表します。
 
-<dl>
- <dt><code>top</code></dt>
- <dd>要素と子孫要素の上端を行全体の上端に揃えます。</dd>
- <dt><code>bottom</code></dt>
- <dd>要素と子孫要素の下端を行全体の下端に揃えます。</dd>
-</dl>
+- `top`
+  - : 要素と子孫要素の上端を行全体の上端に揃えます。
+- `bottom`
+  - : 要素と子孫要素の下端を行全体の下端に揃えます。
 
-<p>ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。</p>
+ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。
 
-<h3 id="Values_for_table_cells" name="Values_for_table_cells">表セル用の値</h3>
+### 表のセル用の値
 
-<dl>
- <dt><code>baseline</code> (および <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>)</dt>
- <dd>セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。</dd>
- <dt><code>top</code></dt>
- <dd>セルの上端のパディング境界を行の上端に揃えます。</dd>
- <dt><code>middle</code></dt>
- <dd>セルのパディングボックスが行の中央になるようにします。</dd>
- <dt><code>bottom</code></dt>
- <dd>セルの下端のパディング境界を行の下端に揃えます。</dd>
-</dl>
+- `baseline` (および `sub`, `super`, `text-top`, `text-bottom`, `<length>`, `<percentage>`)
+  - : セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。
+- `top`
+  - : セルの上端のパディング境界を行の上端に揃えます。
+- `middle`
+  - : セルのパディングボックスが行の中央になるようにします。
+- `bottom`
+  - : セルの下端のパディング境界を行の下端に揃えます。
 
-<p>負の値を使用することができます。</p>
+負の値を使用することができます。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+<h3 id="Basic_example">基本的な例</h3>
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div&gt;An &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a default alignment.&lt;/div&gt;
-&lt;div&gt;An &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-top alignment.&lt;/div&gt;
-&lt;div&gt;An &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-bottom alignment.&lt;/div&gt;
-&lt;div&gt;An &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a middle alignment.&lt;/div&gt;
-</pre>
+```html
+<div>An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
+<div>An <img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
+<div>An <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
+<div>An <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">img.top { vertical-align: text-top; }
+```css
+img.top { vertical-align: text-top; }
 img.bottom { vertical-align: text-bottom; }
 img.middle { vertical-align: middle; }
-</pre>
+```
 
-<h4 id="Result" name="Result">Result</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("Basic_example")}}</p>
+{{EmbedLiveSample("Basic_example")}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h3 id="Vertical_alignment_in_a_line_box">行ボックス内での垂直方向の配置</h3>
 
-<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', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>{{cssxref("&lt;length&gt;")}} 値を追加し、 {{cssxref("display")}} が <code>table-cell</code> である要素で使えるようにした。</td>
-  </tr>
+#### HTML
+
+```html
+<p>
+top:         <img style="vertical-align: top" src="star.png"/>
+middle:      <img style="vertical-align: middle" src="star.png"/>
+bottom:      <img style="vertical-align: bottom" src="star.png"/>
+super:       <img style="vertical-align: super" src="star.png"/>
+sub:         <img style="vertical-align: sub" src="star.png"/>
+</p>
+
+<p>
+text-top:    <img style="vertical-align: text-top" src="star.png"/>
+text-bottom: <img style="vertical-align: text-bottom" src="star.png"/>
+0.2em:       <img style="vertical-align: 0.2em" src="star.png"/>
+-1em:        <img style="vertical-align: -1em" src="star.png"/>
+20%:         <img style="vertical-align: 20%" src="star.png"/>
+-100%:       <img style="vertical-align: -100%" src="star.png"/>
+</p>
+```
+
+```css hidden
+#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}}
+
+<h3 id="Vertical_alignment_in_a_table_cell">表のセル内での垂直方向の配置</h3>
+
+#### HTML
+
+```html
+<table>
   <tr>
-   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
+    <td style="vertical-align: baseline">baseline</td>
+    <td style="vertical-align: top">top</td>
+    <td style="vertical-align: middle">middle</td>
+    <td style="vertical-align: bottom">bottom</td>
+    <td>
+      <p>There is a theory which states that if ever anyone discovers exactly
+      what the Universe is for and why it is here, it will instantly disappear and
+      be replaced by something even more bizarre and inexplicable.</p>
+      <p>There is another theory which states that this has already happened.</p>
+    </td>
   </tr>
- </tbody>
 </table>
+```
+
+#### CSS
+
+```css
+table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}}
+
+## 仕様書
+
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.vertical-align")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#Center_item">フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節</a></li>
- <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li>
- <li><a href="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li>
- <li><a href="https://christopheraue.net/design/vertical-align">Vertical-Align: All You Need To Know</a></li>
-</ul>
+- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#center_item)
+- {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}
+- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html)
+- [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align)
diff --git a/files/ja/web/css/vertical-align/star.png b/files/ja/web/css/vertical-align/star.png
new file mode 100644
index 0000000000..bee01b962b
--- /dev/null
+++ b/files/ja/web/css/vertical-align/star.png