tableタグに関するあれこれ備忘録【応用編】

tableタグを使う機会が多々あるので、以前tableタグに関する基本あれこれ備忘録という記事を書きました。
今回は更に応用編として、（自分的に）新しい小ワザをまとめました。

※2018年2月8日に追記しました。

thead、tbody、tfootを使おう！
data-titleとかいう便利なやつ
スマホのメニューに便利なtable
英字を入れる時は、折り返しの設定が必要
まとめ

thead、tbody、tfootを使おう！

これまでtbodyすら使わずtableの中に直接trを書いていましたが、

thead…テーブル内でいちばん上の、見出し部分
tbody…内容の部分
tfoot…テーブル内最後のまとめ部分

というふうに書き換えると、テーブル内の構造がはっきりします。

ゆくゆくはtheadを固定してスクロールできるようになる？？と聞いたことがあり、
（そうなったら、テキスト量が多いテーブルの時はめっちゃ便利！！）

文書構造を重要視しているHTML5の考え方にも合致しているので、
thead、tbody、tfootはすぐにでも取り入れたいタグです。

data-titleとかいう便利なやつ

tableの項目が多い時、スマホでそのまま縮小して表示すると、セルの幅が狭くなって読みにくくなります。
tdにdata-titleを指定すると、それをcssで呼び出すことができるため、theadを非表示にしてもタイトルを表示することができます。

HTML


<table class="data-title-sample">
    <thead>
        <tr>
            <th>タイトルその１</th>
            <th>タイトルその２</th>
            <th>タイトルその３</th>
            <th>タイトルその４</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="タイトルその１">データその１</td>
            <td data-title="タイトルその２">データその２</td>
            <td data-title="タイトルその３">データその３</td>
            <td data-title="タイトルその４">データその４</td>
            <td data-title="タイトルその５">データその５</td>
        </tr>
    </tbody>
</table>

<tableclass="data-title-sample">

<thead>

<tr>

<th>タイトルその１</th>

<th>タイトルその２</th>

<th>タイトルその３</th>

<th>タイトルその４</th>

</tr>

</thead>

<tbody>

<tr>

<tddata-title="タイトルその１">データその１</td>

<tddata-title="タイトルその２">データその２</td>

<tddata-title="タイトルその３">データその３</td>

<tddata-title="タイトルその４">データその４</td>

<tddata-title="タイトルその５">データその５</td>

</tr>

</tbody>

</table>

CSS


.data-title-sample thead{
    display: none;
}
.data-title-sample td{
    display: block;
}
.data-title-sample td:before{
    content: attr(data-title) "＝";
}

.data-title-samplethead{

display:none;

}

.data-title-sampletd{

display:block;

}

.data-title-sampletd:before{

content:attr(data-title)"＝";

}

プレビュー

タイトルその１	タイトルその２	タイトルその３	タイトルその４
データその１	データその２	データその３	データその４	データその５

attrでdata-titleを呼び出せます。
""の中に＝や：などを入れてあげると、タイトルとデータの区切りができてさらに見やすくなります。
attr(data-title)と"…"の間は半角スペースを入れて区切ります。

こちらの記事が大変わかりやすく参考になりました！
→スマホでtableタグを見やすくするCSS：Qiita

スマホのメニューに便利なtable

スマホの画面下に固定されているようなボタンメニューを作るとき、
display: table;が簡単で重宝します。
tableの表示からは少し脱線しますが掲載しておきます。

HTML


<nav>
<ul class="sp_menu">
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
</ul>
</nav>

<nav>

<ulclass="sp_menu">

</ul>

</nav>

CSS


.sp_menu{
    display: table;
    width: 100%;
}
.sp_menu li{
    list-style: none;
    display: table-cell;
    color: #333;
    border: 1px solid #fff;
}
.sp_menu li a{
    display: block;
    background: #480404;
    padding: 10px;
    text-align: center;
    color: #fff;
}

.sp_menu{

display:table;

width:100%;

}

.sp_menuli{

list-style:none;

display:table-cell;

color:#333;

border:1pxsolid#fff;

}

.sp_menulia{

display:block;

background:#480404;

padding:10px;

text-align:center;

color:#fff;

}

プレビュー

今回はメニューを3つにしていますが、数が増減した場合でもセルの幅の計算がいらず、手軽です。

英字を入れる時は、折り返しの設定が必要

スマホで閲覧した時は特に、URLなど繋がった英字を入れると、
thやtdの幅が無視されてしまったり、文字がはみ出してしまうことがあります。b
指定した幅で表示させるには設定が必要です。


th,td{
    word-break: break-all;
}

th,td{

word-break:break-all;

}

折り返し処理をする似たようなCSSで、word-wrapというのがあります。
word-wrapは、単語の切れ目の余白で折り返されるものです。

意味のある英文ではword-wrap: breal-word;が好ましいですが
URLの場合は、単語の切れ目がないため、word-wrapを指定しても結局はみ出してしまう場合が多いです。
URLの場合はword-breakを指定する方が好ましいでしょう。

折り返しについては、こちらの記事に詳細がまとめられていました。（勉強になります…！！）
→word-breakとword-wrapはややこしい：W3G

まとめ

レスポンシブデザインの場合のtableの表示には、データ量などにより読みやすい工夫が必要な場合が多々あります。
そんな場合に使える小ワザをまとめました。お役にたてれば幸いです(^^)