データを表示する時に、表を使うケースがあります。
MISSION5を確認してみてください。
例として「ユーザー一覧」のデータ表示などで使っています。
もちろんユーザー一覧だけではなく、様々なデータ表示に使えます。
データを扱う時に、よく使う表現方法です。
今回、表の作り方の1つとして、CSSのtableを使います。
少し面倒ですが、進めていきましょう。
■ MISSION 5 – こちらのサイトを再現してみましょう
https://base91.net/mission/cording/5/index.html
■ 解答ファイルのダウンロード
https://base91.net/mission/cording/5/mission5.zip
※ zipファイルって何？ どうやって開くの？
http://base91.net/zip-how-to-open/
もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
1人で何も見ることなく、MISSION5を再現できたら次に進んでみてください。
今回活用しているHTMLとCSSは下記の通りです。
新出のHTMLタグ
特にありません。mission4以前を参考にしてください。
各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/
新出のCSSプロパティ
基本的に表とは、エクセルのように「セル」の集合体になっています。
縦横に線が無数に引かれ、空欄に数字などを入力しますね。
それを、CSSで再現することができます。
下記のプロパティを参考にしてみてください。
display:table;
tableは、対象の要素が表のエリアであることを示します。
tableを指定するのは、データを囲む「親の要素」です。
子要素に指定しても、表のレイアウトを再現することはできません。
ただ、表を作るにはtableだけでは不十分です。
次のタグを「子要素」に適用することによって、tableは再現されます。
display:table-cell;
tableで囲んだ要素の中で「子要素」にtable-cellを使うと、横並びになります。
横並びになった要素に、それぞれborderを指定して線を引くと、表っぽくなるでしょう。
また、widthやpaddingで幅や隙間を調整することで、表らしく表現できます。
どのように表現しているのかは、デベロッパーツールでMISSIONを観察してみましょう。
vertical-align:middle;
主にテーブルの中で、上下の中央に要素を寄せます。
bottomで下に、topで上にあわせることができます。
テーブル以外では、インライン要素同士の横軸を合わせる時にも使えます。
tableをレイアウトに使っている時代があった
実はtableはcssだけではなく、htmlにもtableというhtmlタグがあります。
今回は使っていませんので、興味がある方は調べてみてください。
このtableタグ、昔の話ですがサイトのレイアウトに使った時期がありました。
表のセルの幅を調整しながら、ウェブサイトをレイアウトするのです。
表ではなく、デザインを再現するために、tableを使ったのです。
しかし、tableは表として使うタグです。
レイアウトのためにあるわけではありません。
当然、Googleの見解もNGですし、SEOとしても最悪の結果をもたらします。
そういうわけで、tableレイアウトのサイトは、もう撲滅されました。
また残っていたら、逆に奇跡です。
では、当時、なぜtableレイアウトが使われたかと言うと、CSSが機能してない時期があったからですね。
ブラウザごとに、まったくCSSの解釈が異なり、ブラウザによる崩れが激しかったのです。
今ではそんなことも無くなりましたので、もう必要ありません。
なので、ふと、tableをレイアウトに使おうか、なんて考えは持たないようにしましょう。
何一つとしてメリットはありません。
各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/