1
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.

AlphabetAdvent Calendar 2022

Day 20

【T】table要素をレイアウトのために使う

Last updated at Posted at 2022-12-19

本来の使い方ではないから今までやったことなかったんだけど、現役でこの手法が使われている現場に足を突っ込んでしまったのであえて挑戦。

table要素とは?

安心と信頼のMDN web docs
本来は「表を作るための要素」です。

table要素をレイアウトのために使うには?

table要素はwidthやheightなどの属性指定で枠をかなり自由に組めます。
tableのセルに様々な要素を入れることで、webページをレイアウトします。

感覚的な面だとExcelのセルにいろんな要素を配置する感じな気がする。
(列の大きさは自由に変えられるし、セル結合もあるし)

こういう使い方を「レイアウトテーブル」とか「テーブルレイアウト」とか言ったりするようです。
個人的にはtable自体を前者、手法を後者で呼び分けたい。

なぜtable要素でレイアウトを組むの?

正確には「組んでいたの?」かもしれない。

現在はflexboxとかgridとかがあるように、デザイン面はCSSに任せるのが一般的です。
仕様的にも、HTMLは文書の"構造"を、CSSは文書の"デザイン"を担当するように棲み分けが行われています。

strikeタグのようなただ装飾を加えるだけの意味を持つ要素が非推奨になっているのはこのためです。
bタグとかiタグとかは「Bring attention」と「Idiomatic」とかいうそれっぽい意味をこじつけられて復活してますけどね……

しかし、昔はブラウザーのCSS対応が悲惨だったせいでCSSが信用されておらず、しょうがないので枠組みができるtable要素を使っていました。
今ではCSS対応の状況も良くなっているので新たにwebページを作るならCSS使って組んだほうがいいと思います。

今ではどこで使われているの?

いや、使われてないと思ってたんですけど
HTMLメールの現場ではまだまだCSS対応が悲惨なようです。つまりテーブルレイアウトの出番となるわけです。

なんか幅600pxを指定している作例を見かけたのでもしかしたらこれが慣例なのかもしれません。

どうやって使うの?

MDNを見つつ作例で察してください。

テーブルレイアウトのテンプレを用意しました。もともと僕が使うために作ったものですが使えると思うので公開します。
著作権は放棄しないですが公序良俗に反しない限り誰でも自由に使えます。(詳細な規約はこちらを参照)

先述したとおり、Excelのセルに要素をぶち込む感覚に似ています。

  • セル結合はrowspan, colspanの各属性で結合するセル数を指定
  • セルの幅はwidth, heightの各属性でpxを数だけ指定
  • HTMLメールの場合でもタグに直接CSSを書くやつはある程度読んでくれます
1
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
1
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?