分かりやすいテーブルを使った表の作成

WordPressなどで作成するWebページにテーブル(tableタグ)を使った表を挿入したいときがあります。

さらに、可能であれば下書きのテキストエディタの段階で簡単に済ませておきたい場合もあることでしょう。

そんな望みを実現したくてtableタグの記述について確認してみました。

【広告】


表にtable(テーブル)を用いた例

まず初めに例としてテーブルを用いた基本的な表を作成してみます。

見出し1見出し2
データA1データB1
データA2データB2

これは、一番上を列見出しに設定した簡単な表になります。

表の記述は次の通り


<table>
<tr>
<th>見出し1</th><th>見出し2</th>
</tr>
<tr>
<td>データA1</td><td>データB1</td>
</tr>
<tr>
<td>データA2</td><td>データB2</td>
</tr>
</table>

それぞれのタグの解説

表の作成の基本でよく使用されるタグは<table><tr><th><td>など。

これらのタグの役割をあらためて確認してみます。

基本構成で用いられるタグ

【1:テーブル全体の基本枠の記述】


<table>
<tr>
***1行目「ヘッダー」を並べる***
</tr>
<tr>
***2行目「セル」を並べる***
</tr>
<tr>
***3行目「セル」を並べる***
</tr>
</table>

これら<table>と<tr>は、基本スタイルを記述するためのものなので、タグというよりは宣言とかおまじない程度のものと覚えておいたほうがよいと考えます。

行を増やすには<tr>タグを追加していきます。

【2:行中の表示枠(エクセルでいうところのセルにあたる部分)】

続いて「tr」の中に記述するタグです。


<th>見出しセル</th>

見出しに用いたいセルのみ<th>を使用。
この場合は行見出しだけなので一番上の行だけに<th>を使っています。


<td>データセル</td>

個々の表示枠は<td>を用います。多くの情報はこれに格納されます。

<th>の「h」はヘッダーのh。<td>の「d」はデータのdですね。

枠(セル)を連結する場合

表中のセルを連結したい場合は次のタグを用います。

【1:縦の列(一つ下)を結合させる】

見出しA見出しB見出しC
セルA1-A2セルB1セルC1
セルB2セルC2

<table>
<tr>
<th>見出しA</th>
<th>見出しB</th>
<th>見出しC</th>
</tr>
<tr>
<td rowspan="2">セルA1-A2</td>
<td>セルB1</td>
<td>セルC1</td>
</tr>
<tr>
<td>セルB2</td>
<td>セルC2</td>
</tr>
</table>

【2:行の先頭を結合させる】

見出しA見出しB見出しC
セルA1-B1セルC1
セルA2セルB2セルC2

<table>
<tr>
<th>見出しA</th>
<th>見出しB</th>
<th>見出しC</th>
</tr>
<tr>
<td colspan="2">セルA1-B1</td>
<td>セルC1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
<td>セルC2</td>
</tr>
</table>

【3:行の後半を結合させる】

見出しA見出しB見出しC
セルA1セルB1セルC1
セルA2セルB2-C2

<table>
<tr>
<th>見出しA</th>
<th>見出しB</th>
<th>見出しC</th>
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
<td>セルC1</td>
</tr>
<tr>
<td>セルA2</td>
<td colspan="2">セルB2-C2</td>
</tr>
</table>

シンプルな表を作るだけなら<td>タグを並べていけば作成できますが、セル(枠)どうしを連結させたい例外については、ぜひ解決方法を身につけておきたいところです。

このセルの連結については、参考サイトのHTMLを読んだだけでは理解しづらく、ついついテーブルを使っての表の作成を避けてしまうことになりがちではないでしょうか。

タグを組み合わせてページ内に表を作成

テーブルの作成に使うタグの役割について以上の通りです。

タグの用途が分かれば、あとはコピペでもかまわないので作成する表に合わせてテキストエディタで積み重ねて行けば良いでしょう。

必要なタグを、自分の理解しやすい単語で辞書登録してしまうのも手です。

Webページの制作やブログ記事の作成において、表を組み込むこと自体が例外的な作業だとすればテーブルのテクニックそのものが身に付きにくいものかもしれません。

へたに苦手意識を克服するより、こうした手法でタグの役割を再確認するだけのほうが作業に関する手間は省けるのではないかと思います。

【おすすめコンテンツと広告】