tableまとめ
今回サンプルとして下のコードのtableを使って検証していきます
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tr> <th>見出しセル１</th> <th>見出しセル２</th> <th>見出しセル３</th> </tr> <tr> <td>データセル１</td> <td>データセル２</td> <td>データセル３</td> </tr> </table> |
この記事の目次
borderを付けてみる
まずは境界線を付けてみます
gif動画を見てもらったらわかると思いますがtrにはborderが効かないことがわかります。
セル同士の間に隙間があることにも注目してください
widthを付けてみる
デフォルトでは要素大きさによって幅が決まっていますので好きな幅を付けてみましょう
かなり長いですがすべての要素に「width:600px;」を付けてた時の変化具合をgifにしてあります
table要素
table要素自体に「width:600px;」をするとtable要素自体が600pxになります。
境界線分要素は大きくなるはずですがここではなりません
セルの部分は幅の設定をしていないのですが、設定した600pxに収まるようよう同じ幅で表示されています
が内容によって自動調整されます（今回のは中身が同じ大きさなので）
tr要素
tr要素には幅の設定が使えません
セルの要素
thとtdだけに幅を決めても思った通りの幅にはならず、画面幅いっぱいに表示されるよう自動調整されます
widthまとめ
自分が思った通りの大きさにしたいのであればtable要素に全体幅の設定をしてセル個別に幅を設定する方法がいいでしょう
この時にセルの幅の合計が全体の幅よりも大きくなってしまうと自動で調整されてしまいますので注意しましょう。
場合によっては境界線や内側余白も要素の幅の中に含められてしまいますので注意して設定しましょう
heightを付けてみる
一応検証のために「height: 300px;」も試してみましたが問題なく使えます。
高さの設定をしたいのであればご利用ください
変な隙間をなくしたい
table要素にはデフォルトでセル同士の隙間をあける「border-collapse:separate;」が設定されているため
隙間が空いて少し使いにくい印象を受けるかと思います。
隙間をなくす場合は「border-collapse:collapse;」をtable要素に設定しましょうこの設定はセル同士の隙間をなくす設定になっています
列（縦方向の並び）ごとに幅を変えるときは
ひとつひとつ幅を設定するのもいいと思いますが「table-layout」プロパティを使うと簡単にいく場合もあります。
例えば一つ目の列の幅は小さくしてあとの列は同じ大きさにしたい場合にはもってこいだと思います
table-layoutプロパティ
table-layoutプロパティは、表のレイアウト方法を設定するプロパティ。
このプロパティを指定することで、表組みの列幅を決定する方法が変化します。
プロパティ値
細かく設定できるのであれば必要ないのかもしれませんが覚えておいて損はないでしょう
