A.T-MOON

contents

パンくずリスト

メッセージエリア



    テーブルの装飾

メッセージエリア


マーク テーブル枠に色をつける@ <table border="A" bordercolor="B">〜</table>

<table>タグborder属性でテーブルの外枠の太さを指定します。
Aには1以上の数値をピクセルで指定します。
さらにbordercolor属性でテーブルの枠線の色を指定します。
Bにはカラーコードかカラーネームを入れましょう。


※例)
table border="1" bordercolor="#9999ff"
にしました
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" bordercolor="#9999ff">
  <tr>
   <td>
   table border="1" bordercolor="#9999ff"<br>
   にしました
   </td>
  </tr>
 </table>
 </body>
</html>

ページTOP



マーク テーブル枠に色をつけるA
       <table border="A" bordercolorlight="B" bordercolordark="C">〜</table>


<table>タグborder属性でテーブルの外枠の太さを指定します。
Aには1以上の数値をピクセルで指定します。
さらにbordercolorlight属性bordercolordark属性でテーブルの枠線の色を指定します。
B,Cにはそれぞれカラーコードかカラーネームを入れましょう。


※例)
table border="10"
bordercolorlight="silver" bordercolordark="gold"
にしました
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="10" bordercolorlight="silver" bordercolordark="gold">
  <tr>
   <td>
   table border="1"<br>
   bordercolorlight="silver" bordercolordark="gold"<br>
   にしました
   </td>
  </tr>
 </table>
 </body>
</html>

ページTOP



マーク テーブルの背景色の指定 <table border="A" bgcolor="B">〜</table>

<table>タグborder属性でテーブルの外枠の太さを指定します。
Aには数値をピクセルで指定します。"0"にすると枠線は表示されません。
さらにbgcolor属性でテーブルの背景色を指定します。
Bにはカラーコードかカラーネームを入れましょう。


※例)
table border="1" bgcolor="#9999ff"
にしました
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" bgcolor="#9999ff">
  <tr>
   <td>
   table border="1" bgcolor="#9999ff"<br>
   にしました
   </td>
  </tr>
 </table>
 </body>
</html>

ページTOP

マーク セルに色をつける <table border="A"><td bgcolor="B">〜</td></table>

<table>タグborder属性でテーブルの外枠の太さを指定します。
Aには1以上の数値をピクセルで指定します。
さらにbgcolor属性でテーブルの背景色を指定します。
Bにはカラーコードかカラーネームを入れましょう。


※例)
table border="1"
td bgcolor="#9999ff"
にしました
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1">
  <tr>
   <td bgcolor="#9999ff">
   table border="1" <br>
   td bgcolor="#9999ff"<br>
   にしました
   </td>
  </tr>
 </table>
 </body>
</html>
border="0"にすると枠線は表示されませんので
見た目は【テーブルに色をつける】のborder="0"の場合と同じになります。

ページTOP


マーク テーブルに背景画像
   <table background="A" style="background-position:B C; background-repeat: D;">〜</table>


<table>タグbackground属性でテーブルの背景に画像を指定します。
Aには画像のファイル名を指定します。

テーブルの幅や高さと画像ファイルのサイズが違う場合
テーブルのサイズに合わせて、背景に並ぶだけの数の画像が繰り返し表示されてしまいます。
それを防ぐためには、スタイルシートを使って画像の表示の設定をします。

Bにはテーブルの左からの画像の位置Cにはテーブルの上からの画像の位置leftcenter%(パーセント)で記述します。

B C 表示位置
left 左端
center 中央
right 右端
% パーセント
px ピクセル指定
pt ポイント指定

Dには画像の表示形式を記述します。

D 表示形式
repeat-x 横に並べる
repeat-y 縦に並べる
no-repeat 一枚のみ

※例)
幅330px、高さ200pxのテーブルに
背景に画像を一枚だけ指定しました
表示位置は中央です
文字のサイズは12pxに指定しています
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table width="330" height="200" background="画像のURL" style="border:solid 1px #000000; font-size:文字の大きさ; background-position:左からの位置 上からの位置; background-repeat: no-repeat;">
  <tr>
   <td>
   テーブルの背景に画像を指定しました<br>
   表示サイズは画像サイズに合わせ<br>
   文字のサイズは12pxに指定しています
   </td>
  </tr>
 </table>
 </body>
</html>

ページTOP

テーブルのセル内の指定 テーブルのその他の指定