[16-1] table(表)を作ろう(まずは基本の table, tr, th, td)

最終更新日:2017年10月04日  (初回投稿日:2011年06月13日)

今回から、table(テーブル = 表)を作ってみましょう。
テーブルはデータをまとめて表組みにしたいときに使用します。
テキストだけで説明するよりわかりやすくするのが表組みです。

HTMLでの テーブルは、表組みにする必要がないモノに使ってはならないことになってます。例えば、レイアウトだけのためにテーブルを使うのはNGです。

使用する要素 <table> 〜 </table>
<tr> 〜 </tr>
<th> 〜 </th>
<td> 〜 </td>
CSSプロパティ border
padding
border-spacing

2017年10月、本文を大幅に書き換えました。
最小単位 <td>要素だけの構成から <tr>要素でグルーピングするという流れに書き換え、サンプルは本文内に記載し、外部サンプルをやめました。

最小の部品「テーブルセル」があってこそテーブル

<table>要素は中身が何も無ければ、ぺったんこで高さも幅もない状態。非表示です。
CSSで背景やボーダーを指定していても何も表示されません。

<table>
</table>

<table> 〜 </table>内に テキストが入っていたら表示はされますが、それはテーブルとしてではなく、単に中身がそのまま表示されるだけ。

テーブルセル <td> <th> を使った最小限のカタチ

テーブルとして表示させるには、<table>要素の中には最低1コ <td>要素が必要です。

<table>
 <td>td1つだけ</td>
</table>

この最小の部品は テーブルセル(table cell)と呼ばれます。
テーブルセルには <th>要素もあります。

<th> は、table header の略。header = ヘッダー、見出しの役割です。
<td> は、table data の略。テーブルのデータです。

セルに見出しの役割を持たせたいなら <th>を使います。
ですので <th>単独で使うってのは無いな。<th>(見出し)を使うなら、<td>(データ)もないと変だから。

<table>
 <th>th(見出し)</th>
 <td>td(データ)</td>
</table>

<table>要素だけとか <td>要素だけ では、ブラウザはテーブルとして表示しません。
これは CSSの display: table(他の要素をテーブルの性質にする)を使う時にとても重要な基礎知識です。
display: table については、
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく をご覧ください。

行のグルーピングをする <tr>要素

セルのセットを複数行にしたい場合、1行を <tr>要素で囲む必要があります。

<tr>は、table row の略。row とは横列。行(ぎょう)。

<tr>要素はテーブルセルでなくグルーピングのための要素。セルを行としてまとめます。

ちなみに、row の反対語は column(縦列)で、略して col です。
この「row(横列)」と「col(縦列)」は、tableではけっこうよく出てくるコトバです。

<table>
 <tr>
  <th>th(見出し)</th>
  <td>td(データ)</td>
 </tr>
  <tr>
  <th>th(見出し)</th>
  <td>td(データ)</td>
 </tr>
</table>

もしも 1行しかないテーブルなら <tr>要素は不要。
グルーピング用の要素なので、必要無ければ書かなくていいんです。

table要素の基本構造

tableの基本的な構造は下図のようになります。
<th>(見出し)は、横にも縦にも並べてOK。見出しのセルに使うならどこでも。

1行(横一列)<tr>〜</tr>で囲むんですが、この時 各行内セルの数が同じである必要があります。
1行目がセル3コだったら、2行目も3行目も3コ。じゃないとエラーになるよ。

まあ、エクセルとかで表作ってるときと同じです。そんな難しい話じゃない。

セルの数を変えたい場合は colspan属性、rowspan属性 を使って セルの連結で調整します。
使い方は、[16-3] table のセルを連結しよう(colspan属性, rowspan属性)で説明します。

<table>要素の属性で HTML5から廃止になったもの

<table>要素の cellpadding属性・cellspacing属性・frame属性・rules属性・summary属性・width属性 は、HTML5では廃止されました。

属性で残されたのは border属性のみ。
しかも、border属性を指定する場合は、値は「空(何も書かない)「1」でなければなりません。
この属性は、セルの周囲にボーダーを表示するとブラウザに指示します。

summary属性 は残っていましたが、<caption>要素で事足りるのでやはり廃止に。
また、sortable属性 も HTML5 で登場しましたが、HTML5.1 で無くなりました。
<th>要素の sorted属性と共に使ってソート機能の実現を目指していたようですが。

参考:HTML 5.1 - W3C Recommendation, 1 November 2016 - 4.9.1. The table element

cellpadding属性・cellspacing属性は CSSで

かつてHTML4までは、
<table border="数値" cellpadding="数値" cellspacing="数値">
と指定していました。テーブルの枠線の表示のための属性たちです。

border属性は、セルの枠線(ボーダー)。
cellpadding属性は、セルの枠とセル内のテキストとの間のスペース。
cellspacing属性は、セル同士の間隔です。

これらは HTML5 では CSS で指定します。
border属性は残ってはいますが、CSSの borderプロパティで指定するのが一般的です。
cellpadding属性は、paddingプロパティで、
cellspacing属性は、border-spacingプロパティで指定します。

テーブルの基本のソースコード

下記のテーブルのソースコードを見てください。
border属性には「 ""(空の値)」を入れています(1行目)

<table border=">
  <tr>
    <th>table header</th>
    <th>table header</th>
    <th>table header</th>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
</table>

コレをプレビューすると、こんなかんじ。
ブラウザのデフォルトスタイルで、セルに枠が付きます。ブラウザの種類によって枠の付き方は若干違います。

table header table header table header
table data table data table data
table data table data table data

「 border="1" 」にしても同じ見た目です。

table header table header table header
table data table data table data
table data table data table data

以前なら、cellspacing属性でセル同士の間隔を詰めて2重線になってるのを解消し、cellpadding属性でセル枠とテキストの間隔をあけたのですが、どっちも廃止されたのでムリ。あとでCSSを使って整えます。

ちなみに、border属性が無いと枠線が無くなって、何がなんだか状態に。

table header table header table header
table data table data table data
table data table data table data

テーブルの罫線が重複しない CSSの指定

上のテーブルを CSSで整えてみました。全体に罫線を入れています。

table header table header table header
table data table data table data
table data table data table data

サンプルの HTML は先ほどと同じです。
<table>要素には border属性は使っていません。(ブラウザによって異なる表示になるのを避けたいので、CSSだけの指定にします)

<table id="smp1">
  <tr>
    <th>table header</th>
    <th>table header</th>
    <th>table header</th>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
</table>

サンプルのCSSです。

table#smp1 {
	width: 100%;
	margin:2em 0;
	border-top: 1px solid #ccc;   /*table要素の「上」ボーダー*/
	border-left: 1px solid #ccc;  /*table要素の「左」ボーダー*/
	border-spacing:0;  /*セル同士の間隔*/
	}
table#smp1 tr th,
table#smp1 tr td {  /*「,」で区切って複数のセレクタを指定しています*/
	border-bottom:1px solid #ccc; /*セルの「下」ボーダー*/
	border-right: 1px solid #ccc; /*セルの「右」ボーダー*/
	padding:0.5em;  /*セルのボーダーとテキストの間をあけて読みやすく*/
	}
table#smp1 tr th {
	background: #e6eaff;  /*th(見出し)だけ背景色を付けてます*/
	}

borderプロパティを4箇所に指定していることに注目。
<table>要素には上と左にborderの指定を(4、5行目)
セル( <th> や <td>要素)には下と右にborderの指定をしてます(10、11行目)

これは、テーブルと各セルに上下左右の border指定をすると 重複した線になるのを防ぐためです。

6行目で、<table>要素に border-spacing: 0 の指定をしています。
セルとセルの間隔を「0」にして、各 border をピッタリくっつけています。

このように、セルには直角になる2辺、テーブルには残りの2辺 を指定するのが一般的です。(全部に罫線を入れたい場合です)

あえて罫線を太くするなら、テーブルにもセルにも、上下左右に border 指定してイイんですけどね。

table header table header table header
table data table data table data
table data table data table data
table#smp2 {
	width: 100%;
	margin:0;
	border:2px solid #e6eaff;  /*table に上下左右のボーダー*/
	border-spacing:0;
	}
table#smp2 tr th,
table#smp2 tr td {
	border:2px solid #e6eaff;  /*セルにも上下左右のボーダー*/
	padding:.5em;
	}
table#smp2 tr th {
	background: #e6eaff;
	}

例えば、横の罫線だけ入れたい場合でも、セルとテーブルを分けて指定します。
接した部分が二重先になるのを防ぐため。

table header table header table header
table data table data table data
table data table data table data
table#smp3 {
	width: 100%;
	margin:0;
	border-top: 1px solid #ccc;  /*topのみ*/
	border-spacing:0;
	text-align:center
	}
table#smp3 tr th,
table#smp3 tr td {
	border-bottom:1px solid #ccc;  /*bottomのみ*/
	padding:.5em;
	}
table#smp3 tr th {
	background: #e6eaff;
	}

次回予告

次回は テーブルにタイトルをつけましょう。
表には「タイトル(題名)」を必要とする場合がありますよね。
HTMLでは、テーブルのタイトルとして<caption>要素が、ちゃんと用意されています。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.