CSS Table 関係の文書を更新

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

1 files changed, 67 insertions, 71 deletions

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)