MB-Support

パソコン初心者のサポートページ

表(テーブル)のセル内で文字の位置を指定する方法

 テーブルのセル内に表示されるデータの垂直位置を決定するのが valign です。ノーマル状態での垂直位置は、中央に表示されます。


テーブル(table)の縦幅(height)を 100 px にして、普通に文章を書いた場合、真ん中に文字が表示されます。 以下はノーマル。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" height="100">
  <tr>
   <td>ホームズの思い出</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


セル内の上に文字を配置する  valign="top"

<td> に valign="top" を挿入します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" height="100">
  <tr>
   <td valign="top">ホームズ</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


セル内の下に文字を配置する  valign="bottom"

<td> に valign="bottom" を挿入します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" height="100">
  <tr>
   <td valign="bottom">ホームズ</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


補足

例えば、テーブルを使って 2 つの文章を横2列に表示させる場合、文章の長さが違うとアンバランスになります。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td> 
    <p>2005/03/18</p>
    <p> mailtoとは・<省略></p>
   </td>
   <td> 
    <p>2005/03/16</p>
    <p> ブラウザの・<省略></p>
   </td>
  </tr>
 </table>
</body>
</html>

ブラウザ


こんな時は、2 つの <td> 内に valign="top" を、もしくは、文章の短い方に valign="top" を指定しても良いのですが、<tr> に valign="top" を指定すると、一括して valign="top" を有効にできます。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr valign="top">
   <td> 
    <p>2005/03/18</p>
    <p> mailtoとは・<省略></p>
   </td>
   <td> 
    <p>2005/03/16</p>
    <p> ブラウザの・<省略></p>
   </td>
  </tr>
 </table>
</body>
</html>

ブラウザ


ちなみに、valign="*" を指定しない場合、セルの縦幅の中央に表示されますが、これは、valign="middle" を指定した場合と同じになります。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" height="100">
  <tr>
   <td valign="top">ホームズ</td>
   <td valign="middle">ホームズ</td>
   <td valign="bottom">ホームズ</td>
  </tr>
 </table>
</body>
</html>

ブラウザ




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項