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

*作成日:2011-06-13
*更新日:「テーブルセル」と「グルーピングのための要素」を追加しました

今回から、table(テーブル=表)を作ってみましょう。
<table>はこのように、データをまとめて表示したいときに使います。

こんなふうに表組にしたほうが、テキストで説明するよりグッとわかりやすくて省スペース。
企業やお店、学校では、資料として表組をいろいろ扱いますが、それをウェブサイトで表示するときには、この<table>要素を使います。

まずは基本形を作りましょう

まずはこのような、基本形のテーブルを作っていきます。


これは↑プレビュー画像。
クリックするとサンプルHTMLで見られます(別ウィンドウで開く) 。

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

サンプルのダウンロードはこちら

★上のサンプル画像クリックでHTMLファイルを開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample16-1set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

table要素の基本構造

tableの基本構造はこうなります。

必ず全体は <table></table>で囲まれ、 横一列(1行)は、<tr></tr>で囲まれる構造です。
そして<tr></tr>の中に、各セルが入りますが、見出し用のセルは th要素データ用のセルはtd要素で示します。

trは「table row」の略。rowは横列。(「行(ぎょう)」ってこと。)
反対語の縦列を表すのは、column。略してcolです。
この「row(横列)」と「col(縦列)」は、tableではけっこう出てきます。覚えといて損は無い。

それから、
thは「table header」の略。header=ヘッダ。見出しです。
tdは「table data」の略。データです。

tableの基本HTMLソースを組んでみましょう

とにかくソースを見ましょう。サンプルのHTMLソースはこちらです。

<table class="sample1">
  <tr>
    <th>table header(テーブルの見出し)</th>
    <th>table header(テーブルの見出し)</th>
    <th>table header(テーブルの見出し)</th>
  </tr>
  <tr>
    <td>table data(テーブルデータ)1</td>
    <td>table data(テーブルデータ)2</td>
    <td>table data(テーブルデータ)3</td>
  </tr>
  <tr>
    <td>table data(テーブルデータ)4</td>
    <td>table data(テーブルデータ)5</td>
    <td>table data(テーブルデータ)6</td>
  </tr>
</table>

全体は<table>〜</table>で、1行ずつは<tr>〜</tr>で囲まれてます。
<tr>〜</tr>の中に、見出しは<th>〜</th>内、データは<td>〜</td>内に入ってます。

1行目で、<table>に class名「sample1」を指定してます。
このあと、CSSでこのtableの見た目を整えていくためです。
(ウェブページで使うtableがすべて同じCSSなら、classやid名をつけなくてOKですよ。)

★idとclassの違いについては…「CSSレイアウトメモ : 本文2段組[0]基本のキ : IDとCLASSの違い」をご覧ください。

HTMLだけだと見た目はさっぱり…

上記のHTMLソースのままだと、ブラウザのデフォルトのスタイルで表示されますので
このように表示されます↓

table header(テーブルの見出し) table header(テーブルの見出し) table header(テーブルの見出し)
table data(テーブルデータ)1 table data(テーブルデータ)2 table data(テーブルデータ)3
table data(テーブルデータ)4 table data(テーブルデータ)5 table data(テーブルデータ)6

セルの枠線や塗りがなくて、何が何だかさっぱりわかりませんね。
(th要素が太い文字になってるのだけはわかりますけどね。)

HTML文書的にはこれでOK。要素の構造上の使い方は正しいので、視覚情報なしのビジタには伝わっています。
詳しくは…「ほんっとにはじめてのHTML : [12-2] なんでHTMLとCSSはセットなの?」をご覧ください。

ビジュアルで情報を得ている者にはとてもわかりにくいので、CSSで見やすくします。
こんな感じに整えてみましょう。

これは↑プレビュー画像。クリックでサンプルHTMLで見られます(別ウィンドウで開く) 。

tableのCSSの基本_シンプルに見た目を整えましょう

サンプルのCSSソースを見てみましょう。

table.sample1 {
	width: 100%;
	margin:20px 0 50px;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-spacing:0;
}
table.sample1 tr th,table.sample1 tr td { /*「,(カンマ)」で区切って複数のセレクタを指定しています*/
	font-size: 12px;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	padding: 7px;
}
table.sample1 tr th {
	background: #E6EAFF;
}

まず青バックの部分を見てください。(合計4行ありますね。)
table要素の、上と左にborderの指定を、
thやtd要素の、下と右にborderの指定をしてますよ。

こんなふうに table要素に上と左、セル要素(th td)に下と右にborderの指定をするのは、
table要素と各セルすべてに上下左右にborder指定をすると、重複して二重線になっちゃうから。
図解するとこういうこと↓です。

次に、12行目を見てください。
各セルの padding を 7px にして、余白(padding)をあけて見やすくしていますよ。
罫線(border)とテキストがくっついてると読みにくいから。

次は 6行目を見てください。
table要素に「border-spacing:0」の指定をしています。
「border-spacing」とは、セルとセルの間隔、セル間の距離です。
さきほどのborder指定をして、この「border-spacing:0」を指定しとかないと、
各borderがぴったりくっつきません(デザインの狙いならいいんですが)。
図解すると、こういうこと↓

以上の「border」「padding」「border-spacing」の指定は、
かつてHTML4までの tabl要素では、属性の指定として成り立っていました。
<table border="○" cellpadding="○" cellspacing="○">と使っていたものです。
これらの属性はHTML5では奨励されず、上記のようにCSSで指定するようになりました。

thは縦に並べても

ここまでは、th要素が横に並ぶカタチでやってきましたが、
th要素は、縦に並べてもいいんです。表組によってはこの方が表現しやすい場合もありますもんね。

縦に並べるとこんな感じになります。

これは↑プレビュー画像。クリックでサンプルHTMLで見られます(別ウィンドウで開く) 。

ソースはこれ。th要素を、各trの先頭にもってきただけです。CSSは上のサンプルと同じです。

<table class="sample1">
  <tr>
    <th>table header(テーブルの見出し)</th>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <th>table header(テーブルの見出し)</th>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <th>table header(テーブルの見出し)</th>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

tableをサイトのレイアウトに使うのはNG

長年放置されているウェブサイトには、table要素でレイアウトを組んでいるものが見られます。
これを「テーブルレイアウト」と呼びますが、昔は各ブラウザのCSSへの対応にバラバラだったから、このようなテーブルレイアウトが主流だったんです。

★そのあたりの流れは…「ほんっとにはじめてのHTML : [12-2] なんでHTMLとCSSはセットなの?」をご覧ください。

W3Cは、HTML文書に見た目の装飾などを書き込まず、CSSで指定する事を推奨しています。
table要素をレイアウトに使うのはNGなのです。

音声読み上げブラウザでは、table要素は、左から右へ、上から下へと「表組」として読み上げていきます。 ですから、サイトのレイアウトをtableで組んであると、わけがわからんものになってるはず。
そんな理由もあり、tableはその本来の役割の表組として使うのがルールです。

「テーブルセル」と「グルーピングのための要素」

*この項目はに追加しました

最後に、テーブルの「テーブルセル」と「グルーピングのための要素」の関係について。
テーブルセルとは、テーブルの最小単位、1つ1つのセルのこと。<td>か <th>要素のことです。

<table>要素は、中に何も無ければ表示されません。CSSで背景やボーダーを指定していても非表示です。
中にテキストや テーブルに関係ない他の要素が入っていたら表示はされますが、それはテーブルとしてではなく、単に中身がそのまま表示されているだけ。

<table>要素の中に <td>要素か <th>要素の1つが入って初めてテーブルとして表示されます。
最小限のテーブルの構成はこのように↓なります。

<table style="border:solid 1px #ccc">
 <td>td1つだけ
</table>

上のソースのプレビューはこちら↓

td1つだけ

*上のソースでは </td>(<td>要素の終了タグ)を省略しています。
終了タグの省略については(ちょっとメモ)HTML5 での 省略可能なタグについて を見てね。

というわけで、
今日の記事では、テーブルの基本形は <table> <tr> <td> <th> のセットで紹介していますが、それはよく使うテーブル(表組み)としての基本形。

もしも 1行しかないテーブルだったら <tr>は無くてもOKなんです。(そんなテーブル滅多に無いけど)
<tr> はテーブルセルではなく、単にグルーピングのための要素だから。

テーブルを表示させるには、最低限1つのテーブルセルが必要。
<table>要素と<td>要素は必ずセット。切っても切れない関係です。どちらも単独では、ブラウザはテーブルだと認識してくれません。

で、セルに見出し的な役割を持たせたいなら <td>でなく <th>を使う。<th>は見出しセルという役割がありますので。

グルーピング用の要素は、必要がなければ書かなくてもOK。それでもテーブルは表示されます。
今回出てきた <tr>要素は、セルの行(段)をグルーピングする要素です。
[16-5] で出てくる <thead>, <tbody>, <tfoot>セルの横方向のグルーピング用、
[16-6] の <colgroup>, <col>セルの縦方向のグルーピング用の要素です。

グルーピング用の要素は、テーブルセルの構成のために使います。
中でも <tr>は行を変える要素なので、まあ必ずと言っていいほど使いますね。
でも、グルーピング用の要素はテーブルセルそのものを表す要素ではないので、これらが無くても、ブラウザはテーブルは表示しちゃうんです。

この「テーブル(親要素 <table>)」「テーブルセル(<td> <th>)」「テーブルのグルーピング用要素」の区別をちゃんと理解しておくと、テーブルを組んでいく上でとてもラクですよ。

いずれにしても、表組みにする必要が無いモノに <table>要素を使わないのが大事。
テーブル的な性質を使ってレイアウトしたい時には、<table> や <td> を使うのではなく、別の要素に CSSで display: table、display: table-cell などを指定して使います。
display: table などの使い方は、
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
をご覧ください。

次回予告

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.