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

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

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

そんな望みを実現したくて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
セルA1-A2	セル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を読んだだけでは理解しづらく、ついついテーブルを使っての表の作成を避けてしまうことになりがちではないでしょうか。