のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その11:テーブルという表現方法

11日目です。本日は【テーブル】についてのお話です。

テーブルってなんぞ?

その昔は、このテーブルこと<table>=表を使ってレイアウトをしておりました。

ですので、別名”テーブルレイアウト”と呼ばれていたのです。

しかし、現在ではレイアウト用に使用する事は推奨されていません。

SEO的によろしくない

●ブラウザのサイズ変更についていけない

●なによりダサい

 

ダサいとは何事だ!昔は栄えていたんだぞ!と思われる方も多いかと思いますがこれが現状です。時代の流れとは残酷ですね…

 

では、主なタグを見て行きましょう。

<table></table>←表のデータとして扱われる。テーブル関係はこのタグでひとかたまりにしてマークアップしていきます。

<tr></tr>←行を表します

<th></th>←見出しセル。<h>タグ的な扱いです。太字・中央寄せです

<td></td>←通常セル。左寄せです

<caption></caption>←テーブルの表題です

summary属性→表の内容を明示。表示はされません、あくまで検索ロボット用

 

ちなみに、覚えやすいように書きますと、

<tr>=table row:横方向一行

<td>=table data:テーブルの内容

になります。

先にも書きましたが、囲ってる外のタグが親になる為、<tr>は<table>の子になります。

大体は、親に指定したものが子に引き継がれます。

img1

若干ややこしくなってきましたね。

これで出来た表がこうなります。

img2

<tr>がセルの横行を表す。

<td>がそれぞれのセルの内容を表す。

<th>は太字で中央揃え。

 

<table>と</table>の間にはもう少し書く事があるのですが、まあ無くても表示はされるので割愛いたします。ここに色々書く事によって、気持ち悪い感じで書かれてるborderを消す事もできたりします。

 

この他にも、セルの連結を行うcolspanやrowspanなどがあります。

セルとセルの隙間の指定をするcellspacingやセルと文字の隙間を指定するcellpaddingなーんてのもありますが、

本来CSSで設定するものであり、非推奨要素となっております。

HTML5においては装飾はCSSでやれ!という事ですね。

ただ、覚えておいて損はありませんので、詳しくは調べてみてくださいね。