Weblasts

tableまとめ

今回サンプルとして下のコードのtableを使って検証していきます

使用するtable

<table>
  <tr>
    <th>見出しセル1</th>
    <th>見出しセル2</th>
    <th>見出しセル3</th>
  </tr>
  <tr>
    <td>データセル1</td>
    <td>データセル2</td>
    <td>データセル3</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プロパティは、表のレイアウト方法を設定するプロパティ。
このプロパティを指定することで、表組みの列幅を決定する方法が変化します。

プロパティ値

auto列幅は表組みの幅とセルの内容に合わせて自動的に調整されます。 fixed列幅はwidthプロパティで指定した値で固定されて表示されます。指定がない列の列幅は、表組みの残りの幅に合わせて均等に分割されます。

細かく設定できるのであれば必要ないのかもしれませんが覚えておいて損はないでしょう

Recommend Post