【html】table/table-cellまとめ 上下中央揃えに最適

2019-07-07 12:11

コーディングを始めたばかりの方にも馴染み深い「table」について紹介します。

tableは崩れにくく、安定ですがレスポンシブデザインに組み込むとなると、やや固すぎるところもあるかと思います。そこで今回は併せて「table-cell」も紹介します。

tableタグの使い方

見出し01見出し02見出し03
セル01セル02セル03

table : tableの一番外囲むタグ
colgroup : widthの配分を調整する(ここで合計100%になるように注意する)
col : 各widthの配分(spanで数、classによるwidthで幅を指定する)
thaed : 見出し行を囲むタグ
tbody : 内容部分
tr : 1行ごとに囲むタグ
th : タイトルセル
td : 通常のセル

<table>
<colgroup>
<col span="1" class="w50per">
<col span="2" class="w25per">
</colgroup>
<thead>
<tr>
<th>見出し01</th><th>見出し02</th><th>見出し03</th>
<tr>
</thead>
<tbody>
<tr>
<td>セル01</td><td>セル02</td><td>セル03</td>
<tr>
</tbody>
</table>

☆ 先ほど述べた、widthを1%〜100%まで用意しておくことで、colgroup > colによるセルの横幅調整がフレキシブルに行うことができます。
上記↑例の場合、左から50%のセルが1つ+25%のセルが2つ=100%となっています。

tableでよく使うCSS

vertical-align  
tr.v-bottom下揃え
下揃え
下揃え
tr.v-middle中央揃え
中央揃え
中央揃え
tr.v-top上揃え
上揃え
上揃え
tr.v-bottom > * {
    vertical-align: bottom;
}
tr.v-middle > * {
    vertical-align: middle;
}
tr.v-top > * {
    vertical-align: top;
}
border-collapse  
ボーダーを重ねないseparateseparate
border-collapse  
ボーダーを重ねるcollapsecollapse
table.collapse-separate {
    border-collapse: separate;
}

table.collapse {
    border-collapse: collapse;
}

table-cellで作る上下中央揃え

  • ボタン1
  • ボタン2
    ここに注釈とか
  • ボタン3は
    とてもテキストが長い

display:table-cellの使い方は、通常のtable > trに相当するところに「display:table」、通常のtable > tr > tdに相当するところに「display:table-cell」、を使用することになります。
この時の注意点は、「display:table」=「table > tr」と考えておくことです。
「display:table」で囲んだところが1行となるので、折り返し(float)のような動きはできません。

<!--html-->
<ul class="table_btn">
<li><span class="inner">ボタン1</span></li>
<li><span class="inner">ボタン2<br /><small>ここに注釈とか</small></span></li>
<li><span class="inner">ボタン3は<br />とてもテキストが長い</span></li>
</ul>

/*  css  */
ul.table_btn {
    display: flex;
    justify-content: space-between;
    text-align: center;
}
ul.table_btn > li {
    display: table;
    width: 30%;
    min-height: 60px;
}
span.inner:hover {
    opacity: 0.8;
}
ul.table_btn > li > span.inner {
    display: table-cell;
    vertical-align: middle;
    background: #fff0ca;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
ul.table_btn > li > span.inner small {
    font-size: 10px;
}