HTMLを学ぶ。表をあらわす要素(table要素)を学ぶ。

HTMLを学ぶ。表をあらわす要素(table要素)を学ぶ。

今回のポイント

今回は表をあらわす要素について学んでいきます。
これは自分のウェーブページに訪問してくれた人に、文章だけではなく表を用いることで、視覚的に情報を整理して伝えることが出来るようになります。
この要素については文章ではうまく伝えることが難しいので、実際に解説しながら説明していきます。

表をあらわす要素(table要素)

表をあらわすにはtable(テーブル)要素を使用します。
今回は実際に作りたい表を想像しながら作っていくと説明しやすいので、完成形から解説していきます。
以下のような表を作っていきたいとします。

まずは何も表をあらわすHTMLの要素を記述していないので、記事の内容的には以下のようになっています。

要素名意味・役割p段落h1大見出しbr改行

これを表にする為に、完成形を元に解説していきます。

表を宣言する(table要素)

まずはこれは表なので、table要素を記述していきます。

HTMLで表現すると、以下のようになります。

<table>
要素名意味・役割p段落h1大見出しbr改行
</table>

行を作っていく(tr要素)

table要素だけでは「ここから表ですよ」と宣言したのみになります。
そこで「ここから、ここまでが行ですよ」と次に宣言してあげることが必要となります。

そこで使用するのがtr要素です。
これはtable row(テーブル・ロウ)の略で、行を表す要素となります。

完成形の表から記述内容を解説すると、以下のようになります。

HTMLで表現したいところですが一度、完成まで解説を続けていきますね。

見出しを作っていく(th要素)

次に見出しです。これは図でいうところの「要素名」と「意味・役割」の部分になります。

見出しにはth要素を使用します。
これはtable header cell(テーブル・ヘッダー・セル)の略で、見出しのセルをを表す要素となります。

完成形の表から記述内容を解説すると、以下のようになります。

ここでHTMLで表現したいところですが、まだまだ完成まで解説を続けていきます。

セルを作っていく(td要素)

次にセルです。これは図でいうところの内容の部分になります。
少し難しいと思うので、ここは聞き流して次の解説に進みます。

このセルを表すにはtd要素を使用します。
これはtable data cell(テーブル・データ・セル)の略で、内容のセルを表す要素です。

完成形の表から記述内容を解説すると、以下のようになります。

実際に要素を記述していく

これで骨格はできました。
それでは早速、これまで解説してきた要素を記述していきます。

以下のように、table要素までは記述していました。

<table>
要素名意味・役割p段落h1大見出しbr改行
</table>

まずは単語同士がくっついて見づらいので、単語を分けておきましょう。

<table>
要素名
意味・役割
p
段落
h1
大見出し
br
改行
</table>

ここから完成形で記述していった要素を、実際にHTMLに反映してみましょう。
まずは一番外側にあったtr要素から記述してみます。

<table>
<tr>
要素名
意味・役割
</tr>
<tr>
p
段落
</tr>
<tr>
h1
大見出し
</tr>
<tr>
br
改行
</tr>
</table>

次に見出しである、th要素を記述してみます。

<table>
<tr>
<th>要素名</th>
<th>意味・役割</th>
</tr>
<tr>
p
段落
</tr>
<tr>
h1
大見出し
</tr>
<tr>
br
改行
</tr>
</table>

続いてセルの内容を表す、td要素を記述していきます。

<table>
<tr>
<th>要素名</th>
<th>意味・役割</th>
</tr>
<tr>
<td>p</td>
<td>段落</td>
</tr>
<tr>
<td>h1</td>
<td>大見出し</td>
</tr>
<tr>
<td>br</td>
<td>改行</td>
</tr>
</table>

一旦これで表は完成です。
それでは完成した表を、ブラウザで見てみましょう。

いかがでしょうか。表が出来たと思います。
しかし「境界線が無いよ。。。」って思った方がいらっしゃると思います。
大丈夫です。次の項目で境界線を表す属性を解説します。

境界線を表す属性(border属性)

それでは先程作成した表に、境界線を表してみましょう。

これにはborder(ボーダー)属性を使用します。
このborder属性は、table要素内に記述して使用します。

早速、先程のHTMLに記述してみます。

<table border=”1″>
<tr>
<th>要素名</th>
<th>意味・役割</th>
</tr>
<tr>
<td>p</td>
<td>段落</td>
</tr>
<tr>
<td>h1</td>
<td>大見出し</td>
</tr>
<tr>
<td>br</td>
<td>改行</td>
</tr>
</table>

それでは完成したので、ブラウザで確認してみましょう。

いかがだったでしょうか。無事表はできたでしょうか。
表を作成するには「少し複雑だ」と思われる方もいると思いますが、これも慣れです。
どんどん作成して、自分のものにしていって下さい。

補足ですがHTML5以前、このtable属性を使ってレイアウトに活用している時代がありました。
しかし現在は、CSSでレイアウトすることが推奨されています。
そしてborder属性は「この表はレイアウトで使用はしていない」という宣言ともなっているので、記述するようにしましょう。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事