HPB18 | HPB19 コンテンツ一覧
ホーム > HPB19 > HTML 表の中をインデントする ( padding )
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML 表の中をインデントする ( padding )


表の中のインデントのやり方



普通、ワープロや表計算ソフトで表を作る際、表題行の項目は、真中表示で、内容行は左寄せにしたりしますが、ホームページで同様に罫線を引いた場合、単純に左寄せすると、項目内容、文字の左端が罫線にくっついてしまって、端の字が読み辛くなります

ホームページビルダーでも、インデント指定はあるのですが、表全体に指定するか、個別のセル、一つ一つに指定していくことになります


表全体にインデント指定した場合、表題行にまでかかってしまうので、真中表示がその分、右にずれてしまい、中央にはきません

といって、個別セルそれぞれに指定していくのは大変手間が掛かる上、セル内の先頭行にしかかかりませんので、HTMLで、各行それぞれに指定していく必要があり、とても実用になりません


そこで、ご紹介するのは、パディングを使用する方法です



パディング 書式


上下左右 20 ピクセル style="padding : 20px;"
上下 10 左右 20 style="padding : 10px 20px;"
10 左右 20 30 style="padding : 10px 20px 30px;"
10 20 30 40 style="padding : 10px 20px 30px 40px;"
20 style="padding-top: 20px;"
20 style="padding-bottom: 20px;"
20 style="padding-left: 20px;"
20 style="padding-right: 20px;"



パディング コーディング例


コーディング例を下記に示します


タイトル行は真ん中、内容はインデント付左寄せの例
記述例 <table border="0" bgcolor="#999999">
  <tbody>
    <tr>
      <td bgcolor="#ffffff"></td>
      <td align="center" bgcolor="#ffffff">項目名A</td>
      <td align="center" bgcolor="#ffffff">項目名B</td>
    </tr>
    <tr>
      <td style="padding : 10px 20px;" bgcolor="#ffffff">項目ABCDEF</td>
      <td style="padding : 10px 20px;" bgcolor="#ffffff">ABCD<br>
      EFGH</td>
      <td style="padding : 10px 20px;" bgcolor="#ffffff">ABCDEFG<br>
      HI</td>
    </tr>
    <tr>
      <td style="padding : 10px 20px;" bgcolor="#ffffff">項目ABC</td>
      <td style="padding : 10px 20px;" bgcolor="#ffffff">ABCD<br>
      EFGHIJK</td>
      <td style="padding : 10px 20px;" bgcolor="#ffffff">ABCD<br>
      EFGHIJK</td>
    </tr>
  </tbody>
</table>
表示例
項目名A 項目名B
項目ABCDEF ABCD
EFGH
ABCDEFG
HI
項目ABC ABCD
EFGHIJK
ABCD
EFGHIJK


「 style="padding : 10px 20px;" 」がパディング指定です
指定値を半角スペースを挟んで2つ並べた場合、それぞれ順に、上下の指定値、左右の指定値になります

上記表の場合、セルの上下それぞれに10ピクセル、左右それぞれに20ピクセル空けなさいという指定になります
上下左右それぞれの指定方法は、このページの冒頭にまとめてあります


似たような指定に、マージンというものがありますが、マージンは、領域間のスペースを空ける指定
パディングは、領域内のスペースを空ける指定になります



参考として、マージン、インデントの指定方法も載せておきます

マージン


上下左右 20 ピクセル style="margin: 20px;"
上下 10 左右 20 style="margin: 10px 20px;"
10 左右 20 30 style="margin: 10px 20px 30px;"
10 20 30 40 style="margin: 10px 20px 30px 40px;"
20 style="margin-top: 20px;"
20 style="margin-bottom: 20px;"
20 style="margin-left: 20px;"
20 style="margin-right: 20px;"


インデント


20 style="text-indent : 20px;"

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML 表の中をインデントする ( padding )
HPB18 | HPB19 コンテンツ一覧
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP