|
テーブルに キャプション（タイトル）をつけてみましょう。
<caption> 〜 </caption> で囲まれた部分は そこがテーブルのタイトルになります。
mamohoの家族
| mamoho |
おとうさん |
| 大輔くん |
おにいちゃん |
| 奈美ちゃん |
いもうと |
HTMLソースは こんな感じです。
<table width="300" border="1">
<caption>mamohoの家族</caption>
<tr>
<td width="100">mamoho</td>
<td width="200">おとうさん</td>
</tr>
<tr>
<td>大輔くん</td>
<td>おにいちゃん</td>
</tr>
<tr>
<td>奈美ちゃん</td>
<td>いもうと</td>
</tr>
</table> |
align の属性を使うと キャプションの位置を変えることができます。
align="top" で テーブルの上部に タイトルが、
align="bottom" で テーブルの下部に それぞれセンタリングされて
表示されます。
align="top" の場合
mamohoの家族
| mamoho |
おとうさん |
| 大輔くん |
おにいちゃん |
| 奈美ちゃん |
いもうと |
<table width="300" border="1">
<caption align="top">mamohoの家族</caption>
<tr>
<td width="100">mamoho</td>
<td width="200">おとうさん</td>
</tr>
<tr>
<td>大輔くん</td>
<td>おにいちゃん</td>
</tr>
<tr>
<td>奈美ちゃん</td>
<td>いもうと</td>
</tr>
</table> |
align="bottom" の場合
mamohoの家族
| mamoho |
おとうさん |
| 大輔くん |
おにいちゃん |
| 奈美ちゃん |
いもうと |
<table width="300" border="1">
<caption align="bottom">mamohoの家族</caption>
<tr>
<td width="100">mamoho</td>
<td width="200">おとうさん</td>
</tr>
<tr>
<td>大輔くん</td>
<td>おにいちゃん</td>
</tr>
<tr>
<td>奈美ちゃん</td>
<td>いもうと</td>
</tr>
</table> |
|
