テーブル（表）

テーブル（表）の飾り記述方法を説明します。

　　

ソースファイルを開きます。

　　

飾りタグを記述します。

１．表に着色する

　　　　

<table bgcolor="pink">　～　</table>　　…　表の全体を　ｐｉｎｋ　にする。
　　　　

<tr bgcolor="pink">　～　</tr>　　　　…　表の行全体を　ｐｉｎｋ　にする。
　　　　

<td bgcolor="pink">　～　</td>　　　　…　表のセルを　ｐｉｎｋ　にする。

ブラウザでの表示

ソースファイル

表全体に色を指定した表示例

項目１の内容	項目２の内容	項目３の内容
項目４の内容	項目５の内容	項目６の内容

表全体に色を指定した表示例<br>
<table border="1" bgcolor="pink">
<tr>
<td>項目１の内容</td>
<td>項目２の内容</td>
<td>項目３の内容</td>
</tr>
<tr>
<td>項目４の内容</td>
<td>項目５の内容</td>
<td>項目６の内容</td>
</tr>
</table>

タイトル行に色を指定した表示例

項目１の内容	項目２の内容	項目３の内容
項目４の内容	項目５の内容	項目６の内容

タイトル行に色を指定した表示例<br>
<table border="1">
<tr bgcolor="pink">
<td>項目１の内容</td>
<td>項目２の内容</td>
<td>項目３の内容</td>
</tr>
<tr>
<td>項目４の内容</td>
<td>項目５の内容</td>
<td>項目６の内容</td>
</tr>
</table>

セル１個に色を指定した表示例

項目１の内容	項目２の内容	項目３の内容
項目４の内容	項目５の内容	項目６の内容

セル１個に色を指定した表示例<br>
<table border="1">
<tr>
<td bgcolor="pink">項目１の内容</td>
<td>項目２の内容</td>
<td>項目３の内容</td>
</tr>
<tr>
<td>項目４の内容</td>
<td>項目５の内容</td>
<td>項目６の内容</td>
</tr>
</table>

３．タイトルを記述する

　　　　

<caption>　～　</caption>　　…　表のタイトルを表示する。

　　　　

<caption align="left">　～　</caption>　　…　表のタイトルを左上に表示する。
　　　　

<caption align="right">　～　</caption>　　…　表のタイトルを右上に表示する。
　　　　

<caption align="bottom">　～　</caption>　　…　表のタイトルを下中央に表示する。

ブラウザでの表示

ソースファイル

タイトルを指定した表示例

タイトル
項目１の内容

タイトルを指定した表示例<br>
<table border="1" width="200" height="100">
<caption>タイトル</caption>
<td align="center">項目１の内容</td>
</table>

タイトルを右上に指定した表示例

タイトル
項目１の内容

タイトルを右上に指定した表示例<br>
<table border="1" width="200" height="100">
<caption align="right">タイトル</caption>
<td align="center">項目１の内容</td>
</table>

タイトルを下中央に指定した表示例

タイトル
項目１の内容

タイトルを下中央に指定した表示例<br>
<table border="1" width="200" height="100">
<caption align="bottom">タイトル</caption>
<td align="center">項目１の内容</td>
</table>

ソースファイルを上書き保存します。

　　

ブラウザで更新し、確認する。