超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ セルの属性(2)

◆テキストの位置を指定する

align 属性でセルの中のテキストの横位置、 valign 属性でテキストの縦位置を、セルひとつひとつについて指定します。

<table border width="500" height="200">
<tr>
<td align="left" valign="top">左/上</td>
<td align="center" valign="top">中央/上</td>
<td align="right" valign="top">右/上</td>
</tr>
<tr>
<td align="left" valign="middle">左/中央</td>
<td align="center" valign="middle">中央/中央</td>
<td align="right" valign="middle">右/中央</td>
</tr>
<tr>
<td align="left" valign="bottom">左/下</td>
<td align="center" valign="bottom">中央/下</td>
<td align="right" valign="bottom">右/下</td>
</tr>
</table>

左/上 中央/上 右/上
左/中央 中央/中央 右/中央
左/下 中央/下 右/下


◆セルを縦に連結する

rowspan 属性を使って、複数のセルを縦に連結します。値は、連結したいセルの数を指定します。値を間違えるとおかしな表になってしまうので注意して下さい。

1列目を縦に連結します。

<table border>
<tr>
<td rowspan="3">3つのセルを縦連結</td>
<td>LOVE 〜Destiny〜</td>
</tr>
<tr>
<td>TO BE</td>
</tr>
<tr>
<td>Boys & Girls</td>
</tr>
</table>

3つのセルを縦連結 LOVE 〜Destiny〜
TO BE
Boys & Girls

valign 属性のデフォルトが center なので、連結した部分のテキストの縦位置が中央になっています。valign="top" にすれば、テキストを上に配置することができます。

<table border>
<tr>
<td rowspan="3" valign="top">3つのセルを縦連結</td>
<td>LOVE 〜Destiny〜</td>
</tr>
<tr>
<td>TO BE</td>
</tr>
<tr>
<td>Boys & Girls</td>
</tr>
</table>

3つのセルを縦連結 LOVE 〜Destiny〜
TO BE
Boys & Girls


◆セルを横に連結する

colspan 属性を使って、複数のセルを縦に連結します。値は、連結したいセルの数を指定します。

<table border>
<tr>
<td colspan="3">3つのセルを横連結</td>
</tr>
<tr>
<td>LOVE 〜Destiny〜</td>
<td>TO BE</td>
<td>Boys & Girls</td>
</tr>
</table>

   
3つのセルを横連結
LOVE 〜Destiny〜 TO BE Boys & Girls

もちろん、align 属性を使えば、連結した部分のテキストを中央に配置することができます。

<table border>
<tr>
<td colspan="3" align="center">3つのセルを横連結
</td>
</tr>
<tr>
<td>LOVE 〜Destiny〜</td>
<td>TO BE</td>
<td>Boys & Girls</td>
</tr>
</table>

   
3つのセルを横連結
LOVE 〜Destiny〜 TO BE Boys & Girls