A.T-MOON

contents

パンくずリスト

メッセージエリア



    テーブルのセル内の指定

メッセージエリア


マーク セル内の文字位置指定
<tr align="A" valign="B">〜</tr>
<th align="A" valign="B">〜</th>
<td align="A" valign="B">〜</td>


align属性valign属性を使ってテーブル内のテキストの表示位置を指定します。
align属性は横方向の指定で、valign属性は縦方向の指定です。
ABそれぞれに属性の値を入れましょう

A テキストの表示位置
left(デフォルト) 左に寄せて表示
center 中央に表示
right 右に寄せて表示
B テキストの表示位置
top 上に表示
middle(デフォルト) 中央に表示
bottom 下に表示
baseline 横方向のデータのベースライン基準
各セル内の一行目のベースラインを揃える

※例)
セル1 セル2 セル3
セル4 セル5 セル6
それぞれのセル内の文字位置を指定したテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1">
  <tr align="right" valign="bottom">

   <td width="150" height="80">セル1</td>
   <td width="150">セル2</td>
   <td width="150">セル3</td>
  </tr>
  <tr>
   <td height="80" align="center" valign="bottom">セル4</td>
   <td align="left" valign="middle">セル5</td>
   <td align="right" valign="baseline">セル6</td>

  </tr>
 </table>
 それぞれのセル内の文字位置を指定したテーブルです
 </body>
</html>
<tr>タグに指定すると横一行に反映します。
<td>タグに指定すると、指定したセルのみに反映します。

ページTOP



マーク セル内の改行禁止
<th nowrap>〜</th>
<td nowrap>〜</td>


<th>、<td>タグnowrap属性を使い、セル内で自動改行しないように設定します。
通常、セル内のテキストが長い場合は、ブラウザが自動的に調節し改行されてしまうので
それを防ぐためにnowrap属性を指定します。
例はページのサイズが崩れるので省きます<(_ _)>

<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1">
  <tr>
   <th>nowrapの指定</th>
   <th>解説</th>
  </tr>
  <tr>
   <td>nowrapの指定なし</td>
   <td>このテーブルでは改行を禁止するnowrap≠フ指定をしていないので、セル内の文字はテーブルの幅に合わせて、自動的に改行されて表示されます</td>
  </tr>
 </table>
 上のテーブルはnowrapの指定をしていません
<br>
<br>
 <table border="1">
  <tr>
   <th>nowrapの指定</th>
   <th>解説</th>
  </tr>
  <tr>
   <td nowrap>nowrapの指定あり</td>
   <td nowrap>このテーブルでは改行を禁止するnowrap≠ェ指定されているので、セル内の文字は横に伸び、自動的にスクロールバーが表示されます</td>
  </tr>
 </table>
 上のテーブルはnowrapの指定をしています
 </body>
</html>
上の例をコピペしていただくとわかりますが
nowrapの指定がない場合、テキストの長さによりセルの幅が自動的に調節されてしまいます。
よって、日付の部分のセルが狭くなり、テキストが改行して表示されてしまう、ということになります。

ページTOP



マーク セルの連結(縦方向)
<th rowspan="A">〜</th>
<td rowspan="A">〜</td>


rowspan属性を使って、そのセルから指定された数の下方向のセルを連結して、ひとつのセルにするよう指定します。
Aには連結させたいセルの数を数値で指定します。

※例)
セル1 セル2 セル3
セル4 セル5
セル6 セル7
セル3の部分にrowspan="3"が指定されています
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1">
  <tr>
   <td>セル1</td>
   <td>セル2</td>
   <td rowspan="3">セル3</td>
  </tr>
  <tr>
   <td>セル4</td>
   <td>セル5</td>
  </tr>
  <tr>
   <td>セル6</td>
   <td>セル7</td>
  </tr>
 </table>
 セル3の部分にrowspan="3"が指定されています
 </body>
</html>

ページTOP



マーク セルの連結(横方向)
<th colspan="A">〜</th>
<td colspan="A">〜</td>


colspan属性を使って、そのセルから指定された数の右方向のセルを連結して、ひとつのセルにするよう指定します。
Aには連結させたいセルの数を数値で指定します。

※例)
セル1 セル2 セル3
セル4 セル5 セル6
セル7 セル8
セル8の部分にcolspan="2"が指定されています
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1">
  <tr>
   <td>セル1</td>
   <td>セル2</td>
   <td>セル3</td>
  </tr>
  <tr>
   <td>セル4</td>
   <td>セル5</td>
   <td>セル6</td>
  </tr>
  <tr>
   <td>セル7</td>
   <td colspan="2">セル8</td>
  </tr>
 </table>
 セル8の部分にcolspan="2"が指定されています
 </body>
</html>

ページTOP



マーク テーブルの余白指定 <table cellspacing="A" cellpadding"B">〜</table>

<table>タグcellspacing属性cellpadding属性で、テーブルのマージンを指定します。
cellspacingではテーブルの外枠とセル、及びセルとセルの間隔を指定します。
Aには属性の値をピクセルで指定しましょう。
cellpaddingではセルの枠とセルの中身との間隔を指定します。
Bには属性の値をピクセルで指定しましょう。

※例)
セル1 セル2 セル3
セル4 セル5 セル6
cellspacing="10" cellpadding="20"を指定したテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" cellspacing="10" cellpadding="20">
  <tr>
   <td>セル1</td>
   <td>セル2</td>
   <td>セル3</td>
  </tr>
  <tr>
   <td>セル4</td>
   <td>セル5</td>
   <td>セル6</td>
  </tr>
 </table>
 cellspacing="10" cellpadding="20"を指定したテーブルです
 </body>
</html>

テーブルの内枠の太さ指定cellspacingは出てきましたね。
ココではテーブルの外枠とセル、及びセルとセルの間隔が指定できる、と書いていますが
見た目にはセルの周りの各線の太さが変わるということです。
これに対しtcellpaddingは、セルの中にある物と枠までの距離を指定します。
上の例で見るとセル○≠ニいう文字の周りに空間ができていますね。それがcellpaddingです。
cellspacingcellpaddingも、テーブルやセルのサイズを指定した場合、その値を含める事になります。(borderも)

例えばセルのサイズを指定するとします。
※例)
セル1 セル2
セル3 セル4
border="1"、tdがwidth="50"
cellspacing="10" cellpadding="20"を指定したテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" cellspacing="10" cellpadding="20">
  <tr>
   <td width="50">セル1</td>
   <td width="50">セル2</td>

  </tr>
  <tr>
   <td>セル3</td>
   <td>セル4</td>
  </tr>
 </table>
 border="1"、tdがwidth="50"<br>
 cellspacing="10" cellpadding="20"を指定したテーブルです
 </body>
</html>
この例の場合ですとセルの幅が50pxなので、単純に考えると50px×2(セルの数)で
幅が100pxのテーブル…と思ってしまいそうなのですが、実際は
border="1"の1px、cellspacing="10"の10px、cellpadding="20"の20px、td width="50"の50px
そしてセルの内側にできている影の部分が1px。
これらが影響していますので実際のテーブルの幅は
1(border)+10(cellspacing)+1(内側の影)+20(cellpadding)+50(td width)+20(cellpadding))+1(内側の影)+10(cellspacing)+1(内側の影)+20(cellpadding)+50(td width)+20(cellpadding)+1(内側の影)+10(cellspacing)+1(border)
ということで216pxの幅のテーブルという事になるわけです。

なので、テーブルタグwidthを216pxで指定するだけで同じものができるということです。
※例)
セル1 セル2
セル3 セル4
tableの幅がwidth="216"、border="1"
cellspacing="10" cellpadding="20"を指定したテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" width="216" cellspacing="10" cellpadding="20">
  <tr>
   <td>セル1</td>
   <td>セル2</td>

  </tr>
  <tr>
   <td>セル3</td>
   <td>セル4</td>
  </tr>
 </table>
 tableの幅がwidth="216"、border="1"<br>
 cellspacing="10" cellpadding="20"を指定したテーブルです
 </body>
</html>
ややこしいですね^^;

ページTOP

テーブルの枠の指定 テーブルの装飾(色をつける)