【 産まれる瞬間第1話 】 ♡みるくとエンジェル ♡

テーブルの基本作成


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

列：＜tr＞～ ＜/tr＞

セル：＜td＞～＜/td＞

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

タグでいうと、

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

＜table＞

＜tr＞＜td＞

＜/td＞＜/tr＞

＜/table＞

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

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

• 
• 
• ツイート

大きさや色を変えてみる

テーブルの横幅を指定します パーセント指定とピクセル指定により横幅を 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　下寄せ

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

• 
• 
• ツイート

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

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

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＞

• 
• 
• ツイート

これで最後にしますので最後に１回だけトラバさせてください。
この数日間ノイローゼ気味になりましたがようやく理解できた気がします。
自分ではこれで完璧だと思いますが、これで間違ってたらしばらくはトラバはあきらめようと思ってます。
因みにyahooのトラバは特殊なんですよね？きっと？
yahooのブログ内で行ってるトラバが正解なのかと思って、
yahoo以外のブログ沢山みて回りましたがyahooで行ってるようなトラバはお目にかかれなかったから、
いまここでやってるのが一応トラバの成功になるんですよね？
ながながスイマセンでした。

• 
• 
• ツイート

この記事へトラックバックする場合は、このトラックバック用URLを、あなたのウェブログ等の投稿ページの「トラックバック先のURL」欄に入れて更新してください。

• 
• 
• ツイート

何回もスイマセンまたトラバの練習させてください。
どうなったら出来てるのか間違ってるのかどうしても納得が出来ないんです。
よろしくお願いします。

• 
• 
• ツイート

今から少しトラバとお気に入り等の練習に他のブログに出かけて見ます。
もしご迷惑をかけてたらこの場を借りてゴメンね！
考えてても分からないから実際にやってみよう。
それでは早速行ってきます。

• 
• 
• ツイート

いろいろ悩んでなかなか書き込みが出来なかったけど
やっと決断が出来たので少しずつでも記録につけてこうと思ってます。

• 
• 
• ツイート

１日に何回でも投稿できるらしい。
今度はpingの確認をしてみよう。
この投稿が上手く確認できるかなぁ？

• 
• 
• ツイート

少しずつ理解できてきた。
このブログはほとんどカスタマイズ出来ないんだ。
ほんとにシンプルで使いやすいといえば非常に使いやすい。
軽いと言えば非常に軽い気がする。

• 
• 
• ツイート