表(テーブル)を作成する - TABLEタグによる表の記述 - HTML
HTMLで表(テーブル)を記述する書式を紹介します。
概要
HTMLで表(テーブル)を表示する場合は、
<TABLE> タグを利用します。
書式
ヘッダ(見出し)のない形式
行を
trタグで記述し、行内の列を
th タグで記述します。
<TABLE>
<tr>
<td>1行目1列目のセルの表示</td>
<td>1行目2列目のセルの表示</td>
<td>1行目3列目のセルの表示</td>
...
<td>1行目n列目のセルの表示</td>
</tr>
<tr>
<td>2行目1列目のセルの表示</td>
<td>2行目2列目のセルの表示</td>
<td>2行目3列目のセルの表示</td>
...
<td>2行目n列目のセルの表示</td>
</tr>
...
<tr>
<td>m行目1列目のセルの表示</td>
<td>m行目2列目のセルの表示</td>
<td>m行目3列目のセルの表示</td>
...
<td>m行目n列目のセルの表示</td>
</tr>
</TABLE>
ヘッダ(見出し)のある形式
ヘッダの行は
theadタグ内に
trタグで行を記述し行内の列は
thタグで記述します。
<TABLE>
<thead>
<tr>
<th>1列目のセルの見出し</td>
<th>2列目のセルの見出し</td>
<th>3列目のセルの見出し</td>
...
<th>n列目のセルの見出し</td>
</tr>
</thead>
<tr>
<td>1行目1列目のセルの表示</td>
<td>1行目2列目のセルの表示</td>
<td>1行目3列目のセルの表示</td>
...
<td>1行目n列目のセルの表示</td>
</tr>
<tr>
<td>2行目1列目のセルの表示</td>
<td>2行目2列目のセルの表示</td>
<td>2行目3列目のセルの表示</td>
...
<td>2行目n列目のセルの表示</td>
</tr>
...
<tr>
<td>m行目1列目のセルの表示</td>
<td>m行目2列目のセルの表示</td>
<td>m行目3列目のセルの表示</td>
...
<td>m行目n列目のセルの表示</td>
</tr>
</TABLE>
表示例 (ヘッダのない場合)
コード
下記のHTMLファイルを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>ペンギンクッキー</td>
<td>\380</td>
<td>250g</td>
</tr>
<tr>
<td>しろくまキャンディー</td>
<td>\150</td>
<td>80g</td>
</tr>
<tr>
<td>くじらポテトチップ</td>
<td>\210</td>
<td>180g</td>
</tr>
</table>
</body>
</html>
解説
3行3列の表を作成します。行を
trタグで列を
tdタグで表現しています。
表示結果
上記のHTMLをWebブラウザで開きます。下図の画面が表示されます。
表示例 (ヘッダのある場合)
見出しがある場合のコードと表示結果を紹介します。
コード
下記のHTMLファイルを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<th>品名</th>
<th>単価</th>
<th>重量</th>
</tr>
</thead>
<tr>
<td>ペンギンクッキー</td>
<td>\380</td>
<td>250g</td>
</tr>
<tr>
<td>しろくまキャンディー</td>
<td>\150</td>
<td>80g</td>
</tr>
<tr>
<td>くじらポテトチップ</td>
<td>\210</td>
<td>180g</td>
</tr>
</table>
</body>
</html>
解説
3行3列の表を作成します。行を
trタグで列を
tdタグで表現しています。
表示結果
上記のHTMLをWebブラウザで開きます。下図の画面が表示されます。ヘッダが太字で表示されることが確認できます。
罫線を表示する (border属性)
TABLEタグの罫線は一般的にはCSSを利用して設定しますが、HTMLでの記述方法として、border属性を利用して指定することもできます。
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>品名</th>
<th>単価</th>
<th>重量</th>
</tr>
</thead>
<tr>
<td>ペンギンクッキー</td>
<td>\380</td>
<td>250g</td>
</tr>
<tr>
<td>しろくまキャンディー</td>
<td>\150</td>
<td>80g</td>
</tr>
<tr>
<td>くじらポテトチップ</td>
<td>\210</td>
<td>180g</td>
</tr>
</table>
</body>
</html>
解説
TABLEタグに border属性を追加しています。属性の値を"1"に設定することで罫線が描画されます。
表示結果
補足
セルの外形の罫線が描画されるため、セルの区切りの表示が二重線で表現されています。区切り線を一重表示する方法についてはHTMLでの記述方法は
こちらの記事、CSSでの記述方法は
こちらの記事を参照して下さい。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
