html - 奇妙なHTMLテーブルの行スパンの動作を説明してください

Question

次のHTMLテーブル定義について考えてみます。

<table>
 <tbody>
  <tr>
   <td rowspan='2'>A</td>
   <td>2</td>
   <td rowspan='2'>B</td>
  </tr>
  <tr>
   <td rowspan='2'>C</td>
  </tr>
  <tr>
   <td>1</td>
   <td>3</td>
  </tr>
 </tbody>
</table>

テーブルは次のようになると思います。

+---+---+---+
| A | 2 | B |
|   +---+   |
|   | C |   |
+---+   +---+
| 1 |   | 3 |
+---+---+---+

ただし、Firefox、IE8、およびChromeでは、テーブルは次のようにレンダリングされます。

+---+---+---+
| A | 2 | B |
+---+---+---+
| 1 | C | 3 |
+---+---+---+

次のように、テーブルに別の列を追加すると、次のようになります。

<table>
 <tbody>
  <tr>
   <td>a</td>
   <td rowspan='2'>A</td>
   <td>2</td>
   <td rowspan='2'>B</td>
  </tr>
  <tr>
   <td>b</td>
   <td rowspan='2'>C</td>
  </tr>
  <tr>
   <td>c</td>
   <td>1</td>
   <td>3</td>
  </tr>
 </tbody>
</table>

...私は次のようになります。これは私が欲しいものにもっと似ています。

+---+---+---+---+
| a | A | 2 | B |
+---+   +---+   |
| b |   | C |   |
+---+---+   +---+
| c | 1 |   | 3 |
+---+---+---+---+

質問：

1. ブラウザは正しく動作していますか？もしそうなら、上記の最初のHTMLセグメントの場合、なぜテーブルが直感的に折りたたまれないのですか？

2. 意図したとおりにテーブルを強制的に表示する有効なHTML/cssはありますか？

Answer 1

これは実際に機能すると思います...セルの高さが固定されていないため、機能していないように見えます。しかし、このように試してみると：

<table border="1">
<tr>
    <td height="50px" rowspan="2">A</td>
    <td>2</td>
    <td rowspan="2">B</td>
</tr>
<tr>
    <td rowspan="2">C</td>
</tr>
<tr>
    <td>1</td>>
    <td>3</td>
</tr>
</table>

テーブルが希望どおりに動作することがわかります。

_{（ソース：myimg.de）}

したがって、テーブルを説明したように見せたい場合は、セルの高さをcssで定義するか、上記のように定義するだけでよいと思います。

Answer 2

多分これは助けることができます！私は同じ問題を抱えていました：「行スパンが機能しない」。高さプロパティのトリックを試しましたが、役に立ちませんでした。インターネットで何時間も別のトリックを検索した後、trタグが適切に閉じられていないことに気付きました。<tr>...<tr>代わりに<tr>...</tr>、行スパンが期待どおりにレンダリングされていました。