HTML/CSS

【table】テーブルの基本とレスポンシブ対応する方法【まとめ】

Web Design layout sketch drawing Software Media WWW and Graphic Layout Website development project

 

tableのマークアップの基本

テーブルをマークアップするには、基本を抑える必要がありますね。

<table>
  <thead>
    <tr>
      <th>見出しA</th>
      <th>見出しB</th>
      <th>見出しC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aのコンテンツ</td>
      <td>BのコンテンツBのコンテンツ</td>
      <td>CのコンテンツCのコンテンツ</td>
    </tr>
    <tr>
      <td>Aのコンテンツ</td>
      <td>BのコンテンツBのコンテンツ</td>
      <td>CのコンテンツCのコンテンツ</td>
    </tr>
    <tr>
      <td>Aのコンテンツ</td>
      <td>BのコンテンツBのコンテンツ</td>
      <td>CのコンテンツCのコンテンツ</td>
    </tr>
  </tbody>
</table>

基本はこんな感じでマークアップしていきます。

 

もちろん、CSSは何も触っていないので、罫線すら入っていない文字だけの状態になります。

See the Pen
Kjxbzy
by kei (@kei_01011)
on CodePen.

テーブルのマークアップをする手順としては以下の通りです。

  1. テーブルをマークアップする
  2. 罫線で区切る
  3. セル内の余白サイズ,フォントサイズを指定する
  4. 1列目の横幅を固定する
  5. 位置揃えを指定する
  6. 見出しセルの背景色を指定する
  7. テーブルをレスポンシブにする

順に解説していきます。

 

テーブルをマークアップする

<table>    
<thead>      
<tr>        
<th>見出しA</th>        
<th>見出しB</th>        
<th>見出しC</th>      
</tr>
  </thead>
  <tbody>
    <tr>
      <td>Aのコンテンツ</td> 
      <td>BのコンテンツBのコンテンツ</td> 
      <td>CのコンテンツCのコンテンツ</td> 
    </tr>
    <tr>
      <td>Aのコンテンツ</td>
      <td>BのコンテンツBのコンテンツ</td>
      <td>CのコンテンツCのコンテンツ</td>
    </tr>
    <tr>
      <td>Aのコンテンツ</td>
      <td>BのコンテンツBのコンテンツ</td>
      <td>CのコンテンツCのコンテンツ</td>
    </tr>
  </tbody>
</table>

 

テーブルのマークアップ

全体 → <table>

各行 → <tr>

見出しセル → <th>

データセル → <td>

見出しセルのグループ → <thead>

 

罫線で区切る

このままではテキストだけの表になってしまいますので罫線を追加していきます。

罫線を追加するにはもちろん「border」を指定します。

See the Pen
XLPoMy
by kei (@kei_01011)
on CodePen.

すると、テーブル全体、見出しセル、データセルがそれぞれ罫線で囲んで表示されるため、二重の罫線を引いたように表示されてしまいます。

罫線で区切ったように見せるためには、「border-collapseをcollapse」と指定します。すると、罫線が重なって1本の線で区切って表示されます。

 

See the Pen
JQawNq
by kei (@kei_01011)
on CodePen.

 

セル内の余白,フォントサイズ,位置を指定する

See the Pen
mZGaBE
by kei (@kei_01011)
on CodePen.

フォントサイズ、セル内の余白、左上寄せに位置調整します。

それぞれ、

font-size

padding

text-align:left;

vertical-align:top;

を指定することで余白を整えて、上下左右の位置を調整します。

 

1列目の横幅を固定する

各セルの幅は、標準ではリキッド(可変)になっていて、セル内のコンテンツの分量に王子で、自動で横幅が決まります。

ただ、「1列目のコンテンツには改行を入れたくない」という場合は、widthを指定することで幅が固定されます。

 

See the Pen
WqgLMd
by kei (@kei_01011)
on CodePen.

こんな感じで、<tr>のfirst-childに指定してあげれば、1列目のみ幅が固定できます。

 

見出しセルの背景色を指定する

See the Pen
jjvXzz
by kei (@kei_01011)
on CodePen.

見出し<th>に背景色を設定すれば、完成です。やっとテーブルっぽくなりました。

 

あとは、レスポンシブにしていきます。

テーブルをレスポンシブにする

スマホでテーブルを見るときは、どうしても読みづらくなってしまいます。特に、列数の多いテーブルは厄介そう、、。

 

See the Pen
orPJKx
by kei (@kei_01011)
on CodePen.


これは、テーブルの幅を800ピクセルに固定したものです。

 

こうすることで、800ピクセル以下で表示した場合には横スクロールで閲覧できるようになります。

 

必要な記述としては、

<div class="table-container">  
<table>

…略…

</table>
</div>
  
table{
  width:800px;
}
.table-container{
  over-flow-x:auto;
  -webkit-over-flow-scrolling:touch;
 }

<table>全体を<div>で囲いつつ、<table>にはwidthでテーブルの横幅を800pxに指定します。

次に、<div>で全体をマークアップし、「over-flow-x:auto;」を記述します。この記述で、<div class=”table-container”>が800ピクセル以下の横幅になると、横スクロールができるようになります。

 

おまけ:Bootstrapでテーブル作成

See the Pen
PrdVPE
by kei (@kei_01011)
on CodePen.

Bootstrapだとめちゃくちゃ簡単に作れます。

<table class=”table>とするだけで罫線が引かれて形になるので、簡単な表をサクッと作るならBootstrapでOKですね。