コツコツ*ワンダーコトン!
ちょこっと かわいいもの
みょうなもの 発見するの、すきであります!
<< May 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< メロドラマ vol.5 「こちょこちょ。」 | main | 土用の丑 ウッシッシ♪ >>
スポンサーサイト

一定期間更新がないため広告を表示しています

- | URL | -
HTML+CSS vol.5 tableタグ編3

table講座    「背景色・背景画像」 です。

背景色 ・ 背景画像
 背 景 色 → bgcolor="色コード"
 背景画像 → background="画像url"
 table tr td 指定。但し、backgroundは tr は 不可。

まずは、背景色!

■ 例1 table (全体) に指定

ワンツースリ
ワワンツツースリー

<table bgcolor="lightyellow" border="1">
 <tr>
  <td>ワン</td>
  <td>ツー</td>
  <td>スリ</td></tr>
 <tr>
  <td>ワワン</td>
  <td>ツツー</td>
  <td>スリー</td></tr>
</table>

■ 例2 tr (行) に指定

ワンツースリ
ワワンツツースリー

<table border="1">
 <tr bgcolor="lightyellow">
  <td>ワン</td>
  <td>ツー</td>
  <td>スリ</td></tr>
 <tr>
  <td>ワワン</td>
  <td>ツツー</td>
  <td>スリー</td></tr>
</table>

■ 例3 td (セル)に指定

ワンツースリ
ワワンツツースリー

<table border="1">
 <tr>
  <td bgcolor="lightyellow">ワン</td>
  <td>ツー</td>
  <td>スリ</td></tr>
 <tr>
  <td>ワワン</td>
  <td bgcolor="lightyellow">ツツー</td>
  <td>スリー</td></tr>
</table>

つぎに、背景画像!

■ 例1 td (セル) に指定 + サイズ指定

ツースリ

<table border="1">
 <tr>
  <td background=".gif (.jpg) " width="88" height="31"></td>
  <td>ツー</td>
  <td>スリ</td>
 </tr>
</table>

■ 例2 table (全体) に 指定
タイリングしてしまうので、画像の大きさは テーブルと同じがいいかな。


<table background=".gif (.jpg) " width="300" height="70" border="1">
 <tr>
  <td></td>
 </tr>
</table>

■ 例3 +画像の 繰り返し指定
CSS指定することで、上の例を
画像を 繰り返さない指定 (no-repeat) や
横方向 (repeat-x) 、縦方向 (repeat-y) の指定も できます。


<table style="background-repeat: repeat-x" width="300" height="70"
background=".gif (.jpg) " border="1">
 <tr>
  <td></td>
 </tr>
</table>

次回 table講座 vol.4は、
表示位置・文章の回り込みについて の予定。
* Windows IE 及び JUGEMで 検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
ブログ編集 HTML+CSS | URL | comments(0)
スポンサーサイト
- | URL | -
コメント、ありがとうございます!
現在、コメント承認制を 取り入れています。
発見次第 すぐ公開にしますので、少々お待ち下さいませ。
宣伝や 不適切なコメントは ご遠慮下さい。
サックリ 削除しちゃいます。









Next | ↑PAGE TOP | Pre


【NDS】ニュー・スーパーマリオブラザーズ5月25日発売予定!
【NDS】ニュー・
スーパーマリオブラザーズ
5月25日発売予定!

Nintendo DS Lite
最安値は?
 →
   - Hit Ranking -
  アフィリエイト部門
 No.1 LinkShare
 No.2 アドリンク
 No.3 楽天アフィリエイト

   アンケート部門
 No.1 マクロミル
 No.2 mpack
 No.3 iMiネット

  メールポイント部門
 No.1 ECナビ
 No.2 ネットマイル
 No.3 だぶるくりっく


DVD&CDレンタル
月1980円 借り放題。
モバイルからも 予約できる DMM
1ヶ月無料キャンペーン中。




アフィリエイト系ブログ

お気に入りブログ

世界標準のブログソフトウェア「Movable Type」発売中
Movable Type 3.2
日本語版発売中!!