HTML・HTMLリファレンス・WEBやぁ、最近胸筋が出てきたユトピ(@yutopi60pa)だよ。皆さん9月はどうお過ごしですか?9月個人的にすごく中途半端な季節です。残暑という名で夏の力にすがりながらも、秋にも浮気し始める感じ。関係ないけど、今回はHTMLタグのtableタグについて解説していきますぜ。width属性・height属性はそのままの意味で、表全体や、セル単体に幅や高さの指定をすることができます。指定できるのはtableタグとtdタグ。tableタグに指定した場合は表全体の幅・高さ、tdタグなら指定したセル単体の幅・高さを指定することができます。ちなみにこの指定はCSSでもできますので、状況に応じて使い分けるようにしましょう。基本的にはCSSで指定してもらってもかまいません。まとめtableタグとは?tableタグとはHTMLで作成しているページで、表を使う場合に使用するタグです。表とは言葉そのままの表です。売上表とか商品一覧とか、エクセルで使うようなものとかがそうですね。この表のことをテーブルともいいます。tableタグには表を作成する際に使うタグがいくつかあります。代表的なものを挙げていきますね。全部で6個のタグがあります。基本的にはtableタグとtr、tdタグは必須です。この3つを使用するればテーブルは作れちゃいます。下4つのタグは情報が多くなったり、複雑になった表を分かりやすくまとめるために使用すると便利なタグです。言葉だけでの説明ですと分かりにくいと思うので、実際にやってみましょう。</table>12345678910111213<table><tr><td>年代</td><td>作品名</td><td>主演</td></tr><tr><td>2000年</td><td>仮面ライダークウガ</td><td>オダギリジョー</td></tr><tr><td>2001年</td><td>仮面ライダーアギト</td><td>賀集利樹</td></tr><tr><td>2002年</td><td>仮面ライダー龍騎</td><td>須賀貴匡</td></tr><tr><td>2003年</td><td>仮面ライダー555</td><td>半田健人</td></tr><tr><td>2004年</td><td>仮面ライダー剣</td><td>椿隆之</td></tr><tr><td>2005年</td><td>仮面ライダー響鬼</td><td>細川茂樹</td></tr><tr><td>2006年</td><td>仮面ライダーカブト</td><td>水嶋ヒロ</td></tr><tr><td>2007年</td><td>仮面ライダー電王</td><td>佐藤健</td></tr><tr><td>2008年</td><td>仮面ライダーキバ</td><td>瀬戸康史</td></tr><tr><td>2009年</td><td>仮面ライダーディケイド</td><td>井上正大</td></tr></table>結果このような感じで作れました。表全体をtableタグで囲み、横一列をtrタグ、セルをtdタグで囲っていきます。これが基本的な使い方ですね。先ほどのデモテーブルは境界線が無いので少し見づらかったですよね。そこで境界線を挿入するために「border属性」を使ってみましょう!border属性はピクセルで指定します。実際に見てみましょう。数値はどこまでも設定できますが、ほどほどに済ませた方がいいですね。ちなみに数値を0にすれば、枠線はなくせます。CSSではもっと細かい指定をすることも可能なので、こだわりたい方はそちらも試してみてくださいね。thタグとは?thタグとは表の見出しとなる部分に使うタグです。こちらは実際に見てもらった方が早いですのが、デモを召し上がれ。見た目的には太字に変化しましたね。このように表の内容ではない見出しをtdタグを使わずにthタグにしていきます。CSSなどでthタグを指定して背景色を変えてあげれば、ぐっと見やすい表になりますよ!このように見出しで使用するthタグでコードとしても見た目的にも分かりやすい構造にしていきましょ!tbody・thead・tfootタグとは?tbody・thead・tfootタグとはそれぞれ表の該当部分をグループ化させます。thedタグは先ほどの一番上の横一列の見出しが該当しますね。tfootタグは表の一番下にくる横一列のセルをグループ化させます。売上の一覧表の場合ですと、合計金額を出している部分をtfootとしていく使い方がありますね。ちなみにtheadとtfootは1の表に1回しか使うことができません。tbodyタグは表のメインの内容をグループ化させます。こちらは1つの表にいくつ使っても大丈夫です。</table>12345678910111213141516171819<thead><tr><th>年代</th><th>作品名</th><th>主演</th></tr></thead><tfoot><tr><th>全10作</th><th>第1期平成ライダー</th><th>みんな人気者</th></tr></tfoot><tbody><tr><td>2000年</td><td>仮面ライダークウガ</td><td>オダギリジョー</td></tr><tr><td>2001年</td><td>仮面ライダーアギト</td><td>賀集利樹</td></tr><tr><td>2002年</td><td>仮面ライダー龍騎</td><td>須賀貴匡</td></tr><tr><td>2003年</td><td>仮面ライダー555</td><td>半田健人</td></tr><tr><td>2004年</td><td>仮面ライダー剣</td><td>椿隆之</td></tr><tr><td>2005年</td><td>仮面ライダー響鬼</td><td>細川茂樹</td></tr><tr><td>2006年</td><td>仮面ライダーカブト</td><td>水嶋ヒロ</td></tr><tr><td>2007年</td><td>仮面ライダー電王</td><td>佐藤健</td></tr><tr><td>2008年</td><td>仮面ライダーキバ</td><td>瀬戸康史</td></tr><tr><td>2009年</td><td>仮面ライダーディケイド</td><td>井上正大</td></tr></tbody></table>結果このようにtbody・thead・tfootタグでグループ化していきます。※各年代はtdタグに戻しました。見た目はあまり変わることはないですが、コードの書き方が少々特徴的ですね。tbodyタグこの順番で書いていきます。メインとなる内容のtbodyは一番最後に書いていくのが特徴です。セルを結合してみよう!colspan属性とrowsapn属性tableタグには複数のセルを結合をすることができる属性があります。セルを結合するにはcolspan属性、rowspan属性というものを使用します。colspan属性・・・横に並んだセルを結合します。指定は数値rowspan属性・・・縦に並んだセルを結合します。color="gray">(セル11個分を結合!)</font></td><tr><td>2000年</td><td>仮面ライダークウガ</td><td>オダギリジョー</td></tr><tr><td>2001年</td><td>仮面ライダーアギト</td><td>賀集利樹</td></tr><tr><td>2002年</td><td>仮面ライダー龍騎</td><td>須賀貴匡</td></tr><tr><td>2003年</td><td>仮面ライダー555</td><td>半田健人</td></tr><tr><td>2004年</td><td>仮面ライダー剣</td><td>椿隆之</td></tr><tr><td>2005年</td><td>仮面ライダー響鬼</td><td>細川茂樹</td></tr><tr><td>2006年</td><td>仮面ライダーカブト</td><td>水嶋ヒロ</td></tr><tr><td>2007年</td><td>仮面ライダー電王</td><td>佐藤健</td></tr><tr><td>2008年</td><td>仮面ライダーキバ</td><td>瀬戸康史</td></tr><tr><td>2009年</td><td>仮面ライダーディケイド</td><td>井上正大</td></tr></table>結果このような感じで複数のセルにわたって結合されているのがわかりますね!(縦がレイアウトひどいですが)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タグに指定することができ、中身のテキストなどの位置を調整することができます。それでは指定の仕方です。height="50px">18人</td></tr></table>結果このようにセルの中身を好きな位置に置くことができます。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以外にもスマホで見るユーザーのためを考えなければならないので、さらに工夫が必要となっています。コメントをキャンセルメールアドレスが公開されることはありません。