30歳からはじめる雑記ブログ

日々あった出来事、考えたことを書いていきます。

theadとtbody使う?使わない?

今までなんとなく気になってたけど、調べてなかったので、theadとtbodyは使うのと使わないのどちらがデファクトスタンダードなのか調べてみた。

 

今までの自分の認識だと、どっちでもいいのかなって思っていた。

theadとtbodyは書いていたら丁寧だけどなくても問題なく動くという意識。

 

ネットで軽く調べてみたけど、まあその通りだった。

 

なくても問題ないけど、とりあえず悩んだら書いとけばいいという感じ。

theadとtbodyが書いていたらCSSが書きやすい、ヘッダーとボディの領域がわかりやすいっていうメリットがあるみたい。

 

detail.chiebukuro.yahoo.co.jp

 

ただ、ヘッダーが横だったらいいけど、縦だった場合使えないよね?

縦だった場合って、次のように書くから。

 

<table>

  <tr>

    <th>ヘッダー1</th>

    <td>データ1</td>

  <tr>

  <tr>

    <th>ヘッダー2</th>

    <td>データ2</td>

  <tr>

 

と思って、調べたけど、いちおうヘッダーが縦の場合でもtheadは使えるみたい。

次のようにCSSを書けば・・・

 

    <style>
        th {
            writing-mode: vertical-rl;
            text-orientation: upright;
            white-space: nowrap;
        }
    </style>

 

あーまぁ確かにこういうのあったなぁって思うけど、これ使ったときめちゃくちゃ管理が大変だった思い出がある。このCSSのせいで他のテーブルの装飾が崩れたりしたから、すごく面倒くさかった。

 

このCSS書くぐらいなら、theadとtbody書かないほうがいいんじゃって思った。