<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>
の中に入れることは避け、適切な要素を使用する。