フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

HTMLのtableタグの使い方をわかりやすく解説するよ!

tableというのは表をデザインする時に使うHTMLで頻出タグの1つですよね。でもこのtableタグ、苦手意識を持っている人が多いんです。僕も初めてHTMLを勉強したときに苦手だったことをよく覚えています。

ここではtableタグの基本的な使い方からちょっとした発展系まで解説をしていきます。ここでしっかりtableを習得をしていきましょう。

一番簡単なオーソドックスなtableの使い方

最初にオーソドックスなtableをコードの具体例から見ていきましょう。

ブラウザで見るとこんな感じになります。

これはもうお分かりですよね。tableタグは一番親要素にtableそしてtr、tdと続きます。tableタグでtableを定義して、trタグはテーブルの行です。tdは1つのボックス(セルといいます)ですね。

コードだとtdが縦に並んでいるので、分かりづらいですが、tdはブラウザで見ると横に並んで行く形になりますね。

ちなみに上記の例もこれ以降の例も、予めセルにはCSSでボーダーをつけていますので、その点はご承知おきください。CSSでボーダーを付けないと、例のような枠線付きの表にはなりません。CSSの設定方法は後半でまた解説します。

さて、次に行きましょう。

tableの中に見出しセルを作る

では次にtrの中にthという見出しセルの概念を入れてコーディングしていきます。早速コードの具体例を見てみましょう。

ブラウザで見るとこんな感じになります。

わかりやすく図示するとこんな感じですね。これもイージーですね。

見出しにはthを使うんだなっていうことだけ覚えておいてください。

tableの中にあるセルを結合する

セルを結合する場合は2パターンあります。横に結合するのか、縦に結合するのかです。

横に結合する場合のcolspan=”n”

横に結合する場合は結合する要素(tdやth)にcolspanを設定します。まずは例から行きましょう。この場合は「テスト結果」のセルを横3セル分結合したいので、colspan=”3″と設定しました。

ブラウザでみるとこんな感じですね。

わかりやすく図示するとこんな感じになっています。

縦に結合する場合のrowspan=”n”

次は縦に結合する場合です。

まず例を見てみましょう。「太郎」というセルをthでつくりました。そしてその「太郎」を縦にぶち抜きたいので、rowspan=”2″を設定しました。まずはコードと結果を見てみましょう。

ブラウザでみるとこんな感じですね。

わかりやすく図示するとこんな感じになっています。さて、colspanで横に結合するときはまだわかりやすかったのですが、rowspanで縦となるとtrをまたいで結合するので、少しわかりづらいかもしれません。1行目のtrはセルが4つ、2行目のtrはセルが3つです。結合した部分はセルを書かないわけですね。

横と縦の結合が1つのtableに混ざるケース

さて、この辺からカオスになってきますが、もう少しなのでしっかりついてきてください。

これはまずはブラウザの結果からお見せします。

だいぶややこしいですね。tableタグでコーディングすると次のようになります。

ややこしいのですが、コツをつかめばできるようになります。まず結合する前の段階で、全部で縦横どれだけのセルが必要なのか、つまり何列×何行かを考えます

そうするとこのtableは5列×4行であることがわかりますよね。

あとは1つ1つ考えていけばOK!「テスト結果」は横に5つ結合だからcolspan=”5″、「太郎」は縦に3つ結合だからrowspan=”3″、「国語」と「英語」は縦に2つ結合だからrowspan=”2″、「数学」は横に2つ結合だからcolspan=”2″です。

そう考えるとそんなに難しくありません。最初難しく感じた場合はまずは手書きで表を書いてみましょう。

tableのcssの付け方

最後にいくつかtableのCSSのつけ方を解説します。

ボーダーの間に隙間を入れる

隣接するセルのボーダーの間隔を指定するプロパティとしてborder-collapseというのがあります。border-collapseプロパティの値は2種類です。

このborder-collapseはtableタグに設定するプロパティです。そしてborder-collapse:separate;にした場合は、ボーダーの間隔を設定するためにさらにborder-spacingプロパティを使います。

例の場合は左右5px、上下8pxに設定されます。注意が必要なのは、セルにマージンは効きません。セルの隙間を設定する際は、border-collapse:separate;として、border-spacingを設定することを覚えておきましょう

これまで例に出してきたtableはすべてボーダーがくっついていますよね。つまり、border-collapse:collapse;を設定しています。

border-collapse:collapse;の場合

ボーダーがくっついています。

border-collapse:separate;の場合

ボーダーに隙間が空きます。

よく使うのはborder-collapse:collapse;の方ですね。僕がborder-collapse:separate;を使う場合は下図のようなデザインをする時だったりします。

tdにborder-bottomで下線を入れています。でも下線を繋げたくない場合、td間にマージンが欲しいのですが、table内のセルにmarginは効かないので、border-spacingで調整しています。

こんなやり方もあるんだなぐらいで参考にしてみてください。

セルにボーダーをつける

今までの例はわかりやすくするために予めボーダーをつけていました。ボーダーのつけ方は次の通りです。

tdやthに対してボーダーをつけるということですね。

セルの中のテキストの位置を調整する

セルの中に余白を入れる

 

いかがでしょうか。

これでとりあえず基本的なことはもちろん、ちょっとアドバンス系なこともできると思います。tableは慣れないとイラッとしますが、色々やってるとすぐに慣れますし、使えるとすごく便利ですので、ぜひマスターしてください。



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介