テーブルセル内の行揃え

テーブルは使いこなせるようになりましたか?続いてセルの中のテキストの整列方法です。以下のような表の書き方です。

1行1列目 1行2列目 1行3列目
2行1列目 2行2列目 2行3列目
3行1列目 3行2列目 3行3列目

このようにセルの中でもテキストの配置を指定してやることが出来ます。HTMLソースを見てみましょう。

<table width=”350″ height=”350″ border=”1″ align=”center” cellpadding=”5″ cellspacing=”0″>
<tr>
<td align=”left”>1行1列目</td>
<td valign=”top”>1行2列目</td>
<td align=”center” valign=”top”>1行3列目</td>
</tr>
<tr>
<td align=”center”>2行1列目</td>
<td valign=”middle”>2行2列目</td>
<td align=”right” valign=”bottom”>2行3列目</td>
</tr>
<tr>
<td align=”right”>3行1列目</td>
<td valign=”bottom”>3行2列目</td>
<td align=”left” valign=”top”>3行3列目</td>
</tr>
</table>

テーブルセルの中での整列法

ご覧になるとわかると思いますが、セルの中の横の整列は、
align=”leftまたはcenterまたはright”
そして、縦の整列は
valign=”topまたはmiddleまたはbottom”を の中で指定します。

さて、これで一通りテキストを入力する方法がわかりましたね。もちろんまだまだ他にもありますが、基本的なことはこれくらいでしょう。

それでは次に写真を貼り付けてみましょう。やはりホームページを華やかに見せるにはある程度画像ファイルを使うことが必要ですね。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録