2016/09/14

もう迷わない!tableタグの使い方とやりがちな間違い

7003deaa1e2d828b9277c572c0047329_s

やぁ、最近胸筋が出てきたユトピ(@yutopi60pa)だよ。


皆さん9月はどうお過ごしですか?
9月個人的にすごく中途半端な季節です。

残暑という名で夏の力にすがりながらも、秋にも浮気し始める感じ。
優柔不断な男みたい。

全然関係ないけど、今回はHTMLタグのtableタグについて解説していきますぜ。
ここ最近ではあまり使うこともなくなった気がするけど、絶対に必須のタグなのでぜひ最後まで読んでやってください!

tableタグとは?

tableタグとはHTMLで作成しているページで、を使う場合に使用するタグです。
表とは言葉そのままの表です。売上表とか商品一覧とか、エクセルで使うようなものとかがそうですね。

こんなやつですね。

578-500x631

この表のことをテーブルともいいます。
tableタグには表を作成する際に使うタグがいくつかあります。
代表的なものを挙げていきますね。

  • trタグ・・・テーブルの横一列を指定
  • tdタグ・・・テーブルの個別のセル(マス目)を定義
  • thタグ・・・テーブルの見出しを指定
  • tbodyタグ・・・テーブルのメインとなる内容をグループ化
  • theadタグ・・・テーブルのヘッダー(見出しなど)となる内容をグループ化
  • tfootタグ・・・テーブルのフッター(注意事項や注釈など)となる内容をグループ化

全部で6個のタグがあります。
ですが、基本的にはtableタグとtr、tdタグは必須です。この3つを使用するればテーブルは作れちゃいます。
下4つのタグは情報が多くなったり、複雑になった表を分かりやすくまとめるために使用すると便利なタグです。


言葉だけでの説明ですと分かりにくいと思うので、実際にやってみましょう。

tableタグを使おう!

基本的なテーブルタグ

コード

結果

このような感じで作れました。
まず表全体をtableタグで囲み、横一列をtrタグ、セルをtdタグで囲っていきます。

table

table2

これが基本的な使い方ですね。
意外と単純ですので、難しく考えることはないですよん!

表に境界線を入れるborder属性

先ほどのデモテーブルは境界線が無いので少し見づらかったですよね。
そこで境界線を挿入するため「border属性」を使ってみましょう!

border属性はピクセルで指定します。実際に見てみましょう。

tableに枠線を付けよう!

border="1"

コード

結果

border="2"

コード

結果

border="3"

コード

結果

border="10"

コード

結果

数値はどこまでも設定できますが、ほどほどに済ませた方がいいですね。
ちなみに数値を0にすれば、枠線はなくせます。

また、CSSではもっと細かい指定をすることも可能なので、こだわりたい方はそちらも試してみてくださいね。


thタグとは?

thタグとは表の見出しとなる部分に使うタグです。
こちらは実際に見てもらった方が早いですのが、デモを召し上がれ。


thタグを使おう!

一番上の横一列のセルと年代のセルがthタグ

コード

結果

table3

見た目的には太字に変化しましたね。このように表の内容ではない見出しをtdタグを使わずにthタグにしていきます。
CSSなどでthタグを指定して背景色を変えてあげれば、ぐっと見やすい表になりますよ!

このように見出しで使用するthタグでコードとしても見た目的にも分かりやすい構造にしていきましょ!

tbody・thead・tfootタグとは?


tbody・thead・tfootタグとはそれぞれ表の該当部分をグループ化させます。

thedタグは先ほどの一番上の横一列の見出しが該当しますね。
tfootタグ表の一番下にくる横一列のセルをグループ化させます。売上の一覧表の場合ですと、合計金額を出している部分をtfootとしていく使い方がありますね。

ちなみにtheadとtfootは1の表に1回しか使うことができません。

tbodyタグは表のメインの内容をグループ化させます。
こちらは1つの表にいくつ使っても大丈夫です。

それでは早速やってみましょう!

tbody・thead・tfootタグを使おう!

コードの順番を要チェック!

コード

結果

このようにtbody・thead・tfootタグでグループ化していきます。※各年代はtdタグに戻しました。
見た目はあまり変わることはないですが、コードの書き方が少々特徴的ですね。

thedタグ → tfootタグ → tbodyタグ

この順番で書いていきます。
メインとなる内容のtbodyは一番最後に書いていくのが特徴です。


セルを結合してみよう!colspan属性とrowsapn属性


tableタグには複数のセルを結合をすることができる属性があります。
セルを結合するにはcolspan属性、rowspan属性というものを使用します。

  • colspan属性・・・横に並んだセルを結合します。指定は数値
  • rowspan属性・・・縦に並んだセルを結合します。指定は数値

それでは実際にやってみましょうか!

セル結合しよう!

colspan属性で横のセル結合!

コード

結果

rowspan属性で縦のセルを結合

コード

結果

このような感じで複数のセルにわたって結合されているのがわかりますね!(縦がレイアウトひどいですが)
colspan属性やrowspan属性を使う場合は、tdタグやthタグの数のつじつまが合うように気を付けましょう。
数がおかしくなると表が崩れてしまいますので、チェックしながら進めましょう。

その他のtableタグ属性


tableタグにはその他にも役に立つ属性が多く用意されています。
その中でも使う頻度が高いものを紹介していきます。

幅と高さの指定!width属性とheight属性


width属性・height属性はそのままの意味で、表全体や、セル単体に幅や高さの指定をすることができます。指定方法はピクセル。
指定できるのはtableタグとtdタグ。tableタグに指定した場合は表全体の幅・高さ、tdタグなら指定したセル単体の幅・高さを指定することができます。

ちなみにこの指定はCSSでもできますので、状況に応じて使い分けるようにしましょう。
基本的にはCSSで指定してもらってもかまいません。


テキストの位置を決めるalign属性・valign属性


align属性はいろいろなタグにもあり、位置を整える機能があります。valign属性も同様で、align属性が横の位置を整えるのに対し、valign属性は縦の位置を調整することができます。指定方法はピクセル。
tableタグではtrタグ、tdタグに指定することができ、中身のテキストなどの位置を調整することができます。
それでは指定の仕方です。

  • align属性・・・left(左寄せ)、center(中央寄せ)、right(右寄せ)
  • valign属性・・・top(上寄せ)、middle(上下中央)、bottom(下寄せ)

さっそくやってみましょう!

align属性・valign属性を使ってみよう!

align属性に"center"を指定

コード

結果

valign属性に"bottom"を指定

コード

結果

このようにセルの中身を好きな位置に置くことができます。alignとvialignを組み合わせて使用することもできますし、中身はテキストでなくても画像でも指定することができますよ!

alignやvalignを設定する際はtdタグにwidthやheightで幅、高さを設定してあげるとよりわかりやすくなります。

ちなみにこの指定はCSSの「text-align」「vertical-align」でも位置の調整をすることが可能です。
基本的にはCSSの方が楽なのですが、そこは状況に応じて変えていきましょう。


そのほかにもいくつかの属性があるのですが、使用頻度が少なかったりCSSで代用が効くため非推奨になっているものですので、ここでは割愛させていただきます。
もし気になる方はこちらのリンクをご参考くださいませ!

テーブルタグ - HTMLタグリスト


注意点:tableタグを使ってサイトのレイアウトをするのはアウト!!

ここでtableタグについての注意点を1つだけ。

今は少なくなりましたが、昔はこのtableタグを使用してサイト全体のレイアウトをしているサイトがよくありました。

tableタグの性質を利用してヘッダーやサイドバー、メインコンテンツ、フッターなどをセルにいれてレイアウトするようなコーディングですね。

しかしtableタグの意味はあくまで表を作ることなので、レイアウトをするために使うのは正しい方法ではありません。
最近ではスマホ向けのレスポンシブ(ウィンドウ幅に合わせてレイアウトが変わること)デザインが増えていき、レスポンシブデザインと相性が悪いtableタグレイアウトは使われなくなりました。

ですがたまに間違った使い方をしている人を見るので、表以外での使い方をしないようにしてください。(SEO的にも間違ったHTMLの使い方は嫌われる傾向があります)

レイアウトする際はdivタグやCSSを使ってコーディングしていきましょう!


まとめ


以上がtableタグの解説でした。
いかがでしたか?tableタグはユーザーにとってわかりやすく情報をまとめているようなページでは頻繁に使われます。
また、セルが多くなると多くなると文字が読みにくくなることがあるので、デザインでより見やすくすることもtableタグには大事なことです。

最近ではPC以外にもスマホで見るユーザーのためを考えなければならないので、さらに工夫が必要となっています。
しっかりと勉強して、tableタグを使えるようになっておきましょう!

, ,