コツコツ*ワンダーコトン!
ちょこっと かわいいもの
みょうなもの 発見するの、すきであります!
<< 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.2 「赤ねむちゃん」 | main | おさなごの、コトコト。 >>
スポンサーサイト

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

- | URL | -
HTML+CSS vol.4 tableタグ編2!

table講座   「幅・高さの指定」 です。

幅・高さ
 幅 → width="" 高さ → height=""
 指定できる タグは、table と td に対して。
 "" に入るのは、数値(px)、% など。
 tdに % 指定すると、tableの幅に 対する割合と なります。
 widthは table指定、heightは td指定が、優先されます。


■ 例1 px 指定
 表全体に、幅 300px、高さ 50pxを 指定。
 +左端セルの幅 150px。

 残り2つのセルは、残った150pxで 等分されていますね。
 (但し、入れる内容で、可変します。)
 今回も、わかりやすくするため、枠線入りです。
 <table border="1">

トコトコテクテクハラハラ

<table border="1" width="300" height="50">
 <tr>
  <td width="150">トコトコ</td>
  <td>テクテク</td>
  <td>ハラハラ</td>
 </tr>
</table>

■ 例2 %指定 + 優先順位
 次に、上と同じ表を %指定 します。左端のセルの幅を 70%
 全体に対して、左端のセルが 7割になってるかな。

 +さらに、左端セルの 高さ 70px に指定。
 tableに 高さ50px 入れていますが、tdの高さ 70pxになりました。
 幅 widthは table指定、高さ heightは td指定が 優先です。

トコトコテクテクハラハラ

<table border="1" width="300" height="50">
 <tr>
  <td width="70%" height="70">トコトコ</td>
  <td>テクテク</td>
  <td>ハラハラ</td>
 </tr>
</table>

次回 table講座 vol.3は、背景色・背景画像について です。
* 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
日本語版発売中!!