値を表で見やすくしたい！意外とよく使うテーブルプロパティの使い方

tableの使い方

今回はWebサイト内で表を作る方法を説明していきます。

<table>はHTMLのタグの1つです。
<tr>や<th>、<td>などのタグと合わせて使うことで表を作成していきます。

【各タグ説明と略称】

<table>　表全体をはさむ。<table>〜</table>の範囲が表となる。
<tr>　「Table Row」の略。行全体をはさむ。
(いくつ使用しても大丈夫です。)
<th>　「Table Header」の略。trの中で使います、はさまれた部分は見出しセルとなる。
<td>　「Table Data」の略。trの中で使います、はさまれた部分が表の中身のセルとなる。
(いくつ使用しても大丈夫です。)

tableの書き方

【HTML】


<table>
  <tr>
    <th>所属</th><th>名前</th>
  </tr>
  <tr>
    <td>AKB48 チームB</td><td>渡辺麻友</td>
  </tr>
  <tr>
    <td>NMB48 チームM</td><td>吉田朱里</td>
  </tr>
</table>

【表示例】




所属
名前


AKB48 チームB
渡辺麻友


NMB48 チームM
吉田朱里

所属	名前
AKB48 チームB	渡辺麻友
NMB48 チームM	吉田朱里

⬆︎「見出しセルの<th>」と「中身のセルの<td>」は同じように<tr>の中に入れます。
それぞれの段「<tr>内」に含めるセルの数は合わせるようにしましょう。

行や列の数を増やす

表の列数と行数は、<tr> <td> <th>を使う数によって変えることができます。

例：5×5の表を作っていきます。

<table>の中に<tr>を5つ作「<tr>の数=行数」
5つのうちの1つの<tr>の中には<th>を5つ作る「=見出しに」
残りに4つの<tr>には<td>を5つずつ入れる「=中身のセルに」

実際にコードを書いてみます。

【HTML】


<table>
  <tr>
<th>所属</th><th>名前</th><th>順位</th><th>年齢</th><th>好きな食べ物</th>
  </tr>
  <tr>
<td>AKB48 チームB</td><td>渡辺麻友</td><td>2位</td><td>23歳</td><td>唐揚げ</td>
  </tr>
  <tr>
<td>NMB48 チームM</td><td>吉田朱里</td><td>16位</td><td>21歳</td><td>アサイーボウル</td>
  </tr>
　<tr>
<td>NMB48 チームH</td><td>矢吹奈子</td><td>37位</td><td>16歳</td><td>キウイ</td>
  </tr>
</table>

【表示例】




所属
名前
順位
年齢
好きな食べ物


AKB48 チームB
渡辺麻友
2位
23歳
唐揚げ


NMB48 チームM
吉田朱里
16位
21歳
アサイーボウル


HKT48 チームH
矢吹奈子
37位
16歳
キウイ

⬆︎1つの<tr>〜</tr>の中には<th>もしくは<td>が5つ並んで入ります。

table装飾の変え方

背景の色と文字の色をCSSを使い変えていきます。

【CSS】


table th{　　/*thに対して*/
　color: #f39c12　;　　　/*文字色*/
   background-color: #8ec6ff;　/*背景色*/
  }
table td{　　/*tdに対して*/
  color:#95a5a6;
  }

【HTML：表示例(上記と同じもの)】

所属	名前	順位	年齢	好きな食べ物
AKB48 チームB	渡辺麻友	2位	23歳	唐揚げ
NMB48 チームM	吉田朱里	16位	21歳	アサイーボウル
HKT48 チームH	矢吹奈子	37位	16歳	キウイ

⬆︎<th>と<td>別々に指定すれば、上記のように違う色を指定することもできます。
背景色の指定にはbackground-colorを使います、指定すると上記のように色を変えることができます。

表の枠線の変え方

【CSS】


table th, table td {
  border: solid 2px #000000; /*実線 2px 黒*/
}

【HTML：表示例(上記と同じもの)】

所属	名前	順位	年齢	好きな食べ物
AKB48 チームB	渡辺麻友	2位	23歳	唐揚げ
NMB48 チームM	吉田朱里	16位	21歳	アサイーボウル
HKT48 チームH	矢吹奈子	37位	16歳	キウイ

⬆︎<th>と<td>に対してborderを指定することで各セルに線を引くことができます。

隙間を無くして一つの線にしたい場合

一重線に変えるにはtableに対して「border-collapse: collapse;」と指定します。
※border-collapseは線の間に隙間を作るかどうかを決めるCSSのプロパティになります。

【CSS】


table th, table td {
  border: solid 2px #000000; /*実線 2px 黒*/
  
 table {
  border-collapse: collapse;
}

【HTML：表示例(上記と同じもの)】

所属	名前	順位	年齢	好きな食べ物
AKB48 チームB	渡辺麻友	2位	23歳	唐揚げ
NMB48 チームM	吉田朱里	16位	21歳	アサイーボウル
HKT48 チームH	矢吹奈子	37位	16歳	キウイ

⬆︎上記のように一重線になりました。あとは線の太さを変えたり、色を変えるなど自由に編集してみましょう。

表の幅を変える方法

表全体の幅を変えるには、tableに対してwidthを指定します。
たとえば、表全体の幅を500pxにしたいときはtable {width:500px}と書きます。
すると各列の大きさが自動調整されて、全体の幅がぴったり500pxになります。


table{
  width:500px
  }

【HTML：表示例(上記と同じもの)】

所属	名前	順位	年齢	好きな食べ物
AKB48 チームB	渡辺麻友	2位	23歳	唐揚げ
NMB48 チームM	吉田朱里	16位	21歳	アサイーボウル
HKT48 チームH	矢吹奈子	37位	16歳	キウイ