HTMLのtableタグの使い方をわかりやすく解説するよ！
tableというのは表をデザインする時に使うHTMLで頻出タグの１つですよね。でもこのtableタグ、苦手意識を持っている人が多いんです。僕も初めてHTMLを勉強したときに苦手だったことをよく覚えています。
ここではtableタグの基本的な使い方からちょっとした発展系まで解説をしていきます。ここでしっかりtableを習得をしていきましょう。
一番簡単なオーソドックスなtableの使い方
最初にオーソドックスなtableをコードの具体例から見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tr> <td>国語</td> <td>数学</td> <td>英語</td> </tr> <tr> <td>72点</td> <td>92点</td> <td>83点</td> </tr> </table> |
ブラウザで見るとこんな感じになります。
これはもうお分かりですよね。tableタグは一番親要素にtableそしてtr、tdと続きます。tableタグでtableを定義して、trタグはテーブルの行です。tdは１つのボックス（セルといいます）ですね。
コードだとtdが縦に並んでいるので、分かりづらいですが、tdはブラウザで見ると横に並んで行く形になりますね。
ちなみに上記の例もこれ以降の例も、予めセルにはCSSでボーダーをつけていますので、その点はご承知おきください。CSSでボーダーを付けないと、例のような枠線付きの表にはなりません。CSSの設定方法は後半でまた解説します。
さて、次に行きましょう。
tableの中に見出しセルを作る
では次にtrの中にthという見出しセルの概念を入れてコーディングしていきます。早速コードの具体例を見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tr> <th>国語</th> <th>数学</th> <th>英語</th> </tr> <tr> <td>72点</td> <td>92点</td> <td>83点</td> </tr> </table> |
ブラウザで見るとこんな感じになります。
わかりやすく図示するとこんな感じですね。これもイージーですね。
見出しにはthを使うんだなっていうことだけ覚えておいてください。
tableの中にあるセルを結合する
セルを結合する場合は２パターンあります。横に結合するのか、縦に結合するのかです。
横に結合する場合のcolspan=”n”
横に結合する場合は結合する要素（tdやth）にcolspanを設定します。まずは例から行きましょう。この場合は「テスト結果」のセルを横３セル分結合したいので、colspan=”3″と設定しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <tr> <th colspan="3">テスト結果</th> </tr> <tr> <td>国語</td> <td>数学</td> <td>英語</td> </tr> <tr> <td>72点</td> <td>92点</td> <td>83点</td> </tr> </table> |
ブラウザでみるとこんな感じですね。
わかりやすく図示するとこんな感じになっています。
縦に結合する場合のrowspan=”n”
次は縦に結合する場合です。
まず例を見てみましょう。「太郎」というセルをthでつくりました。そしてその「太郎」を縦にぶち抜きたいので、rowspan=”2″を設定しました。まずはコードと結果を見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table> <tr><!-- セルが４つ --> <th rowspan="2">太郎</th> <td>国語</td> <td>数学</td> <td>英語</td> </tr> <tr><!-- セルが３つ --> <td>72点</td> <td>92点</td> <td>83点</td> </tr> </table> |
ブラウザでみるとこんな感じですね。
わかりやすく図示するとこんな感じになっています。さて、colspanで横に結合するときはまだわかりやすかったのですが、rowspanで縦となるとtrをまたいで結合するので、少しわかりづらいかもしれません。１行目のtrはセルが４つ、２行目のtrはセルが３つです。結合した部分はセルを書かないわけですね。
横と縦の結合が１つのtableに混ざるケース
さて、この辺からカオスになってきますが、もう少しなのでしっかりついてきてください。
これはまずはブラウザの結果からお見せします。
だいぶややこしいですね。tableタグでコーディングすると次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table> <tr> <th colspan="5">テスト結果</th> </tr> <tr> <th rowspan="3">太郎</th> <td rowspan="2">国語</td> <td colspan="2">数学</td> <td rowspan="2">英語</td> </tr> <tr> <td>数IA</td> <td>数ⅡB</td> </tr> <tr> <td>72点</td> <td>68点</td> <td>92点</td> <td>83点</td> </tr> </table> |
ややこしいのですが、コツをつかめばできるようになります。まず結合する前の段階で、全部で縦横どれだけのセルが必要なのか、つまり何列×何行かを考えます。
そうするとこのtableは５列×４行であることがわかりますよね。
あとは１つ１つ考えていけばOK！「テスト結果」は横に５つ結合だからcolspan=”5″、「太郎」は縦に3つ結合だからrowspan=”3″、「国語」と「英語」は縦に2つ結合だからrowspan=”2″、「数学」は横に2つ結合だからcolspan=”2″です。
そう考えるとそんなに難しくありません。最初難しく感じた場合はまずは手書きで表を書いてみましょう。
tableのcssの付け方
最後にいくつかtableのCSSのつけ方を解説します。
ボーダーの間に隙間を入れる
隣接するセルのボーダーの間隔を指定するプロパティとしてborder-collapseというのがあります。border-collapseプロパティの値は２種類です。
|
1 2 3 4 |
table{ border-collapse:collapse; /*間隔をあけずボーダー同士を重ねる*/ border-collapse:separate; /*ボーダーとボーダーの間隔をあける*/ } |
このborder-collapseはtableタグに設定するプロパティです。そしてborder-collapse:separate;にした場合は、ボーダーの間隔を設定するためにさらにborder-spacingプロパティを使います。
|
1 2 3 4 |
table{ border-collapse:separate; /*ボーダーとボーダーの間隔をあける*/ border-spacing:5px 8px; /*ボーダーとボーダーの間隔を設定*/ } |
例の場合は左右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で調整しています。
こんなやり方もあるんだなぐらいで参考にしてみてください。
セルにボーダーをつける
今までの例はわかりやすくするために予めボーダーをつけていました。ボーダーのつけ方は次の通りです。
|
1 2 3 4 5 6 |
table td{ border: 1px solid #ccc; } table th{ border: 1px solid #ccc; } |
tdやthに対してボーダーをつけるということですね。
セルの中のテキストの位置を調整する
|
1 2 3 4 |
table td{ text-align:center; /*横中央*/ vertical-align:middle; /*縦中央*/ } |
セルの中に余白を入れる
|
1 2 3 |
table td{ padding:10px; } |
いかがでしょうか。
これでとりあえず基本的なことはもちろん、ちょっとアドバンス系なこともできると思います。tableは慣れないとイラッとしますが、色々やってるとすぐに慣れますし、使えるとすごく便利ですので、ぜひマスターしてください。
