表を作成する

表の構成

1. 「セル」
…表のひとつひとつのマス目。


2. 「行」
…横方向に並んでいるセルの集まり。


3. 「列」
…縦方向に並んでいるセルの集まり。



セル	セル	行	セル
セル	セル	行	セル
列	列	行／列	列
セル	セル	行	セル

表の要素

• 「table要素」
…<tabe>〜</table>表であることを表します。


• 「tbody要素」
…<tbody>〜</tbody>表の本体を表します。


• 「tr要素」
…<tr>〜</tr>行を表します。


• 「td要素」
…<td>〜</td>セルを表します。 表は、連続した「セル」で構成された「行」が“積み重なったもの”と考えると良いでしょう！

<table>
<tbody>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
</tbody>
</table>

表のカスタマイズ

• 「border属性」
…<table border="数値">〜</table>で枠線の太さを指定します。
（例：border="5"）

セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル



• 「cellspacing属性」
…<table cellspacing="数値">〜</table>でセル間の余白を指定します。数値はピクセル数または％。
（例：cellspacing="10" ※10ピクセル）

セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル



• 「cellpadding属性」
…<table cellpadding="数値">〜</table>でセル内の余白を指定します。数値はピクセル数または％。
（例：cellpadding="10" ※10ピクセル）

セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル



• 「width属性」
…<table width="数値">〜</table>で表全体の幅を指定します。数値はピクセル数または％。
（例：width="800" ※800ピクセル）

セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル



• 「align属性」
…<td align="位置">セル</td>でセル内容の水平方向位置を指定します。
（left=左、center=中央、right=右）

セル	セル	セル
セル	セル	セル
セル	セル	セル
セル	セル	セル



• 「valign属性」
…<td valign="位置">セル</td>でセル内容の垂直方向位置を指定します。
（例：1列目を上、3列目を下に指定。top=上、middle=中央、bottom=下）

カジキの和名	特徴	カジキの英名
マカジキ	ストライプ・マーリン。体長4m 。青い縞模様が特徴。古来より日本の食文化になじみ深く、カジキの中で最も美味とされている。旬は冬。 カジキ類は水中における最速のスプリンターである。種によっては時速100km 以上に達すると考えられている。トップスピードなら、25m プールを1 秒以内で駆け抜ける速さに相当する。マカジキ科では円錐形の槍型の「吻」（ふん）を形成。	Striped Marlin
メカジキ	ソード・フィッシュ 。体長4m 。全世界の海洋に分布。気性が荒く、自分より大きいクジラや船を攻撃することもある。他のカジキと異なり、腹鰭が無い、第一背鰭が短い、尾柄の水平隆起線が 1 対しかない、吻が扁平などの特徴がある。1種のみで1科1属を構成する。 メカジキ科では上下にやや扁平な剣型の「吻」（ふん）を形成。	Sword fish

表の項目名・タイトル

• 「th要素」
…<th>〜</th>表の項目名のセルを表します。一般的なブラウザでは太字・中央揃えで表示されます。
<table>
<tbody>
<tr><th>項目1</th><th>項目2</th><th>項目3</th><th>項目4</th></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
</tbody>
</table>

項目1	項目2	項目3	項目4
セル	セル	セル	セル
セル	セル	セル	セル


<table>
<tbody>
<tr><th>項目1</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><th>項目2</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><th>項目3</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
</tbody>
</table>

項目1	セル	セル	セル	セル
項目2	セル	セル	セル	セル
項目3	セル	セル	セル	セル



• 「caption要素」
…<caption>〜</caption>表のタイトルを表します。
<table>
<caption>表のタイトル</caption>
<tbody>



表のタイトル

項目1	項目2	項目3	項目4
セル	セル	セル	セル
セル	セル	セル	セル

セルの結合

料金表

男女/子供	男性	女性	子供
平日	1,300円	1,200円	1,000円
休日	1,600円	1,400円
前売り	1,000円




• 「rowspan属性」
…<rowspan="結合するセル数">下方向へセルを結合します。

• 「colspan属性」
…<colspan="結合するセル数">右方向へセルを結合します。



料金表

男女/子供	男性	女性	子供
平日	1,300円	1,200円	1,000円
休日	1,600円	1,400円
前売り	1,000円

戻る