HTMLタグ講座

© 2000–2011 Atelier TM. All rights reserved.

Google
第10章 表を飾ってみる。

見栄えのいい表にしてみよう。

表全体の表示位置を決め、背景色を設定します。

<TABLE ALIGN="LEFT/RIGHT">〜</TABLE>
LEFTはウィンドウの左端、RIGHTは右端です。
</TABLE>タグのあとのテキストは表の横に回り込んで表示されます。
指定しない場合は、表は左寄せでテキストは表の下に配置されます。

<TABLE WIDTH="ピクセル数" HEIGHT="ピクセル数">〜</TABLE>
表全体の横幅(WIDTH)と縦幅(HEIGHT)を指定します。
1ピクセル0.35ミリ。

<TABLE CELLPADDING="ピクセル数"> 〜</TABLE>
枠線とセル内のデータとの間隔を指定します。

<TABLE BACKGROUND="ファイル名">〜</TABLE>
表全体の背景に壁紙をはります。
ファイルの場所を確認し、拡張子まで忘れず書いてください。

<TABLE BGCOLOR="カラーコード"> 〜</TABLE>
表全体の背景色を指定します。カラーコードはここ を参考にしてください。

表の枠に関するタグ

<TABLE BORDER="ピクセル数"> 〜</TABLE>
表の外枠の太さをかえます。太くなるほど立体的に見える効果があります。
<TABLE BORDER CELLSPACING="ピクセル数">〜</TABLE>
表の内枠(項目同士を区切ってる線)の太さをかえます。
IEしか使えないからね。

<TABLE BORDER BORDERCOLOR="カラーコード"> 〜</TABLE>
外枠全体の色をかえます。カラーコードはここ を参考にしてください。

<TABLE BORDER BORDERCOLORLIGHT="カラーコード"
BORDERCOLORDARK="カラーコード">〜</TABLE>
BORDERCOLORRIGHTは外枠の上左、BORDERCOLORDARKの下右の色をかえます

タイトルに関するタグ

<CAPTION ALIGN="TOP/BOTTOM">タイトル</CAPTION>
上のタグを使うと、表のタイトルをつけることが出来ます。
TOPは表の上、BOTTOMは表の下に表示されます。

<CAPTION ALIGN="LEFT/CENTER/RIGHT"
VALIGN="TOP/BOTTOM">タイトル</CAPTION>

(IE)ALIGN="LEFT(左寄せ)/CENTER(センタリング)/RIGHT(右寄せ)"

でタイトルの行揃えを指定。

VALIGN="TOP(表の上)/BOTTOM(表の下)"でタイトルの表示位置を指定します。

セルの大きさや色に関するタグ

<TD WIDTH="ピクセル数"HEIGHT="ピクセル数"> 〜</TD>
<TH>タグでも使用可。セルの幅(WIDTH)と高さ(HEIGHT)を指定します。
指定しない場合は1番長い文章に合わせて表示されます。

<TD BACKGROUND="ファイル名"> 〜</TD>
<TH>タグでも使用可。セルの背景に壁紙をはりつけます。
ファイルの場所を確認し、拡張子(html.gif.jpg.等)まで忘れずに書いてください。

<TD BGCOLOR="カラーコード"> 〜</TD>
<TH>タグでも使用可。セルの背景色を指定します。
カラーコードはここを参考にして下さい。

セル内のデータに関するタグ

<TD ALIGN="LEFT/CENTER/RIGHT">〜</TD>

<TH>タグでも使用可。セル内のテキストの行揃えを指定します。

LEFTは左揃え、CENTERはセンタリング、RIGHTは右揃えです。

指定しない場合は左揃えです。

<TR ALIGN="LEFT/CENTER/RIGHT">〜</TR>
横1行すべてのセル内のテキストの行揃えを指定します。

<TD VALIGN="TOP/MIDDLE/BOTTOM">〜</TD>

<TH>タグでも使用可。セル内のテキストの上下方向の揃えを指定します。

TOPは上揃え、MIDDLEは中央揃え、BOTTOMは下揃えです。

指定しない場合は中央揃えになります。

<TR VALIGN="TOP/MIDDLE/BOTTOM"> 〜</TR>

横1行すべてのセル内のテキストの上下方向の行揃えを指定します。

<TD NOWRAP> 〜</TD>

<TH>
タグでも使用可。

セル内のテキストの自動改行を禁止します。

指定しない場合はセルの大きさに応じて、テキストが自動改行します。

表に影を付ける

このタグを使用します。 <span style="width:100%; filter:dropshadow(color=#dadada,offX=10,offY=10,positive=1);"> <table border="0" bgcolor="#d8e2f1" width="300" height="300"> <tr> <td> この間に、文章を書きます。 </td> </tr> </table> <br> <br> </span> 上のテーブルのタグをそのまま、テキストエリアに入れてます。 <span style="**** から </span> までです。 <span style="**** のfilter は、半透明とかの意味で、dropshadow は、 影を付けるという感じです。 color=#dadada は、影の色です。 offX=10 は、横に出る影の長さの数値です。 offY=10 は、縦の影の長さ。 positive=1 は、1 で影を指定。 0 だと、影が透明になり、おかしいです。 テーブルに影をつけた場合、</table> の後に、改行タグの <br>を 入れます。この改行がないと、下の影の部分が表示されません。 <br> の代わりに、<p> でも OK です。使用例は下記参照

この間に、文章を書きます。




画像を使わずスタイルシートで角丸テーブルを作る

<div id="kakumaru"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <p>ココに文章やんぞを書く <b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div> スタイルシート(CSS)は .rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px} <head></head>内に記述します例 <style type="text/css"> <!-- .kakumaru{ width:250px; background-color:#CCCCEB; margin:5px 30px 20px; } .kakumaru p{ margin:0px; padding:0.5em 1em; background-color:#CCCCEB; } .rtop, .rbottom{ background:#FFFFFF; } .rtop span, .rbottom span{ display:block; height:1px; overflow:hidden; background-color:#CCCCEB; } .r1{margin: 0px 5px;} .r2{margin: 0px 3px;} .r3{margin: 0px 2px;} .r4{margin: 0px 1px; height: 2px;} --> 続いて<body>内の記述の例 <div class="kakumaru"> <div class="rtop"> <span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span> </div> <p> ココに文書なんぞを書く </p> <div class="rbottom"> <span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span> </div> </div>

上記タグを使用した場合の表示

ココに文書なんぞを書く

▲TOP

Contents

Software

Dectionary

素材・CGI