tablecell(<th>, <td>)がwidth:100%;にならない時の対処法

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

本日のOWLet設計で

tableタグについて初めて知ったことがあったので、アウトプットしたいと思います。

Tableタグとはエクセルのような表を作成するときに使用するタグです！

このタグあまり使うことがなくて学習が疎かになっていました。

表ってあまり作ることないですからね。

あと、もっと言えば、HTMLって空間をタグで区切るのが一番重要で、CSSを使えばあとは自由に設定できるんですよ。

つまりdivタグもulタグもliタグもsectionタグもasideタグもtableタグも全部似たようなもんなんですよね。初期設定が違うくらいですかね。

CSS使えば、どれを使っても見た目は同じように作れるんです。

したがって、初期設定が一番簡単なdivを使うことが多くなっていって、初期設定が面倒なtableタグを使う頻度が減ると。

まぁ、後者は最近はほぼないですけれどね。

パーツによってタグを使い分けることで、SEO対策にもなりますからできるだけ最適なタグを使うよう心がけています。

さてさてさて

本日学んだtableタグの特徴はtableの子要素のwidth設定です！！

Table要素の子要素にはtablecelllと呼ばれるthタグやtdタグといった要素が存在します。

このtablecellはデフォルトでtable要素と同じ幅となるようになっているのですが、

tebalecellの並びを縦並びにすると幅が同じにならなくなるんですよね。

中身が左に寄っちゃってダサいですよね

そこでこれを解決する方法を2点ご紹介します！

一つ目はtablecellとtableのどちらにもdisplay: blockを加える

二つ目はtablecellにdisplay:blockとtable要素にdisplay: tableを加える

こんな感じになったら、完成です！

え？元々のtableのコーディングが不細工？だまらっしゃい！！

これでtablecellの大きさを設定することができますね！

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら