0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

<div> cannot appear as a child of <tbody>について

Last updated at Posted at 2023-10-02

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?