<div> は <tbody> の子要素としては利用できない
HTMLでテーブルを作成する際には、しっかりとした構造が求められる。 <table>, <thead>, <tbody>, <tr>, <td> などの要素があるが、これらの要素の中に不適切な要素を入れると、ブラウザのレンダリングエラーや意図しない表示が生じることがある。
エラーの原因
<div> を <tbody> の中に直接置くと、このエラーが発生する。<tbody> の直接の子要素として許可されているのは <tr> のみ。
<!-- これは間違い -->
<table>
<tbody>
<div>
<tr>
<td>データ1</td>
</tr>
</div>
</tbody>
</table>
正しい方法
テーブル内の要素をグループ化したい場合、<div> ではなく <tr> を利用する
<!-- これが正しい -->
<table>
<tbody>
<tr>
<td>データ1</td>
</tr>
<tr>
<td>データ2</td>
</tr>
</tbody>
</table>
まとめ
HTMLのテーブル要素は、特定の構造を持っているので、<div> を <tbody> の中に入れることは避け、適切な要素を使用する。