2005年04月14日(木)

テーブルの基本作成

テーマ:⇒練習

テーブルの基本作成


テーブルの最初と最後にあるタグで、表の始まりと終わりを意味するものです。表の幅やラインの色などの属性も記述できます。

列:<tr>~ </tr>

セル:<td>~</td>

テーブルの基本構文 表の中に列、列の中にセルを作る、と覚えます。

タグでいうと、

table タグの中に tr タグ、tr タグの中に td タグを入れます。

<table>

<tr><td>

</td></tr>

</table>

表をつくる構文はこれが基本になります。

⇒大きさや色を変えてみる

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005年03月14日(月)

大きさや色を変えてみる

テーマ:⇒練習

大きさや色を変えてみる

テーブルの横幅を指定します パーセント指定とピクセル指定により横幅を width で指定できます。 ○○○には数値が入ります。

<table width="○○%" > ~ </table>

横幅を○○%の幅に指定します。

<table width="○○○" > ~ </table>

横幅を○○○ピクセル(幅)に指定します。

* ピクセル(px)は、モニターの1つのダットを1ピクセルとした長さの値です。

テーブルの縦幅を指定します

パーセント指定とピクセル指定により縦幅を height で指定できます。

 ○○○には数値が入ります。

<table height="○○%" > ~ </table> 

縦幅を%値で指定しています。

<table height="○○○" > ~ </table>

縦幅をピクセル値で指定しています。

セルとセルの間隔を指定します ピクセルで間隔を指定します。cellspacing はテーブルの外枠とセル、およびセルとセルの間隔を指定した値で空けてくれます。

<table cellspacing="○○○" > ~ </table>>

セル内のテキスト(画像)の位置を指定する

<td align="○○○" > ~ </td> 

align は横方向のデータの位置を指定します。

○○○は以下から指定できます。

・left 左寄せ

・center 中央寄せ

・right 右寄せ

<td valign="○○○" > ~ </td> valign は縦方向のデータの位置を指定します。○○○は以下から指定できます。

・top 
上寄せ

・middle 中央寄せ

・bottom 下寄せ

  ⇒ 枠の色や背景色を変えてみる

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005年03月12日(土)

枠の色や背景色を変えてみる

テーマ:⇒練習


枠の色や背景色を変えてみる

枠線に色を付ける テーブルの枠線に色を付けるには、

2通りの書き方があります。

以下のようなテーブルを2通りの方法で書いてみます。

みるくとエンジェル 


【1つ目の書き方】

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF6898">

<tr>

<td bgcolor="#FFFFCC">みるくとエンジェル 

</td>

</tr>

</table>

まず、tableタグを見ましょう。

テーブルとセルの間に1ピクセルの間隔ができますね。

内側のセル内はセルの背景色が表示されますので、テーブルの背景色が1ピクセルだけ外枠のように表示されるのです。 * nbsp; は、セルの中に何もない場合に入れておきます。

スペースひとつ分の意味でこれを入れておくことでテーブルがつぶれません。

ブラウザ上では表示されません。

【2つ目の書き方】

<table width="100%" cellpadding="0" cellspacing="0" style="border-color:#ff6898; border-width:1px; border-style:solid;">

<tr>

<td bgcolor="#EEEEFF"> 

 

 </td>

</tr>

</table>

tableタグを見ましょう。

 cellspacingが0ピクセルで間隔がありません。

しかしながらstyleで境界線を1ピクセル指定しています。

このようにスタイルで境界線の幅や色を書き出すこともできます。

セルの背景に色を付ける

ひとつひとつのセル td タグの中に bgcolor="#○○○○○○" と背景色を指定できます。

下のテーブルでは(2列の)2つのセルでそれぞれの色を指定しています。


 みるくとエンジェル


実際に使ってみましょう。

やってみればすぐわかると思う。

<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#ff6898">

<td align="center" bgcolor="pink">

<b>

<font color="#FFFFFF">みるくとエンジェル

</font>

</b></td></tr>

 <tr>

<td bgcolor="#ffffcc">

<font size="2">育児の日記を中心に今の話題とかいろいろブログに残して生きたいと思います

</font></td></tr></table>

みるくとエンジェル
育児の日記を中心に今の話題とかいろいろブログに残して生きたいと思います



  
  

 

<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#CC0000">

<tr><td bgcolor="#FECDD5">

 </td>  </td>

<td bgcolor="#FECDD5">

 </td><td bgcolor="#FECDD5">

 </td></tr></table>

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005年03月12日(土)

最後の挑戦!

テーマ:⇒練習
これで最後にしますので最後に1回だけトラバさせてください。
この数日間ノイローゼ気味になりましたがようやく理解できた気がします。
自分ではこれで完璧だと思いますが、これで間違ってたらしばらくはトラバはあきらめようと思ってます。
因みにyahooのトラバは特殊なんですよね?きっと?
yahooのブログ内で行ってるトラバが正解なのかと思って、
yahoo以外のブログ沢山みて回りましたがyahooで行ってるようなトラバはお目にかかれなかったから、
いまここでやってるのが一応トラバの成功になるんですよね?
ながながスイマセンでした。
いいね!した人  |  コメント(2)  |  リブログ(0)
2005年03月09日(水)

トラックバック

テーマ:⇒練習
この記事へトラックバックする場合は、このトラックバック用URLを、あなたのウェブログ等の投稿ページの「トラックバック先のURL」欄に入れて更新してください。
いいね!した人  |  コメント(0)  |  リブログ(0)
2005年03月09日(水)

何回もすいません。

テーマ:⇒練習
何回もスイマセンまたトラバの練習させてください。
どうなったら出来てるのか間違ってるのかどうしても納得が出来ないんです。
よろしくお願いします。
いいね!した人  |  コメント(0)  |  リブログ(0)
2005年03月09日(水)

今から少し練習

テーマ:⇒練習
今から少しトラバとお気に入り等の練習に他のブログに出かけて見ます。
もしご迷惑をかけてたらこの場を借りてゴメンね!
考えてても分からないから実際にやってみよう。
それでは早速行ってきます。
いいね!した人  |  コメント(4)  |  リブログ(0)
2005年03月07日(月)

いろいろ悩んだけど決断!

テーマ:⇒練習
いろいろ悩んでなかなか書き込みが出来なかったけど
やっと決断が出来たので少しずつでも記録につけてこうと思ってます。
いいね!した人  |  コメント(0)  |  リブログ(0)
2005年03月06日(日)

pingの確認

テーマ:⇒練習
1日に何回でも投稿できるらしい。
今度はpingの確認をしてみよう。
この投稿が上手く確認できるかなぁ?
いいね!した人  |  コメント(1)  |  リブログ(0)
2005年03月06日(日)

上手く出来た!

テーマ:⇒練習
少しずつ理解できてきた。
このブログはほとんどカスタマイズ出来ないんだ。
ほんとにシンプルで使いやすいといえば非常に使いやすい。
軽いと言えば非常に軽い気がする。
いいね!した人  |  コメント(0)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。