がっちゃんのProject-Q

テーブルの属性

プロパティ	値	解説
border	数値	枠線の太さ
bordercolor	カラー 指定	お好きな色を入れてください
bordercolorlight	カラー 指定	枠線の上と左の色を指定します
bordercolordark	カラー 指定	枠線の下と右の色を指定します
bgcolor	カラー 指定	枠内の背景色を指定します
cellpadding	数値	セル内部のテキストと枠の間隔
cellspacing	数値	セル外部のセルとセルとの間隔
background	画像のアドレス	枠内の背景画像を指定します

大魔神塾のタグを全て半角表示にしました！（そのままコピペOK）

テーブルの属性 border 　　　　<table border=" 数値 " >

表の 枠線の太さ を指定できます。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table border="1">

数値「１」の枠線です。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table border="3">

数値「３」の枠線です。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table border="5">

数値「５」の枠線です。

テーブルの属性 bordercolor 　　　　<table bordercolor=" カラー " >

表の 枠線の色 を指定できます。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bordercolor="red">

色の指定を red にしました。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bordercolor="blue">

色の指定を blue にしました。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bordercolor="red" border="3">

色の指定を red 、枠線を「３」にしました。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bordercolor="blue" border="5">

色の指定を blue 、枠線を「５」にしました。

テーブルの属性 bordercolorlight 　　　　<table bordercolorlight=" カラー " >

表の枠線 （上と左）の色 を指定できます。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bordercolorlight="skyblue" border="5">

枠線の上と左の色を skyblue 線を「５」にしました。

テーブルの属性 bordercolordark 　　　　<table bordercolordark=" カラー " >

表の枠線 （下と右）の色 を指定できます。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bordercolordark="blue" border="5">

枠線の下と右の色を blue 、枠線を「５」にしました。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bordercolorlight="skyblue" bordercolordark="blue" border="5">

枠線の上と左の色を skyblue 、下と右の色を blue 、枠線を「５」にしました。

テーブルの属性 bgcolor 　　　　<table bgcolor=" カラー " >

表の枠内の 背景色 を指定できます。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bgcolor="skyblue" border="5">

表の背景色を skyblue 、枠線を「５」にしました。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bgcolor="green" border="5">

表の背景色を lime 、枠線を「５」にしました。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bgcolor="yellow" border="7">

表の背景色を yellow 、枠線を「７」にしました。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ

<table bgcolor="yellow" bordercolorlight="skyblue" bordercolordark="blue" border="7">

表の背景色を yellow 、枠線の上と左を skyblue 、下と右を blue 、枠線を「７」にしました。

テーブルの属性 cellpadding　cellspacing 　　　　<table cellpadding=" 数値 " > <table cellspacing=" 数値 " >

テーブルの属性 background 　　　　<table background=" 画像のアドレス " >

表の枠内の 背景画像 を指定できます。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ
３行目のＡ	３行目のＢ	３行目のＣ
４行目のＡ	４行目のＢ	４行目のＣ
５行目のＡ	５行目のＢ	５行目のＣ

キョンキョンが背景に入りました♪

この様に属性を使うことに依って、「表」（オモテではありません）がカッコ良く出来上がります。
テーブルは面白いでしょ？
他にも属性はあるんだけど、使わないと思うので勝手に省略するのだ。
突然追加するかもしれないけど・・

イカン、大事なことを言い忘れた。
セル（項目）に文字なり画像を入れると、自動でサイズが広がります。
バランスが悪くなる場合もあるので、次の講座も追加しておくのだ。
お次は「セル」の属性をお勉強です。
これを省略すると後悔しますよ～。
セルの属性を覚えると、幅が広がりまっせ！

テーブルの属性 width　height 　　　　<table width=" 数値 " height=" 数値 " background="画像のアドレス">

表の 大きさ を指定できます。

１行目のＡ	１行目のＢ	１行目のＣ
２行目のＡ	２行目のＢ	２行目のＣ
３行目のＡ	３行目のＢ	３行目のＣ
４行目のＡ	４行目のＢ	４行目のＣ
５行目のＡ	５行目のＢ	５行目のＣ

上と何が違うかと言うとね、
表の大きさを指定しないと、画像を背景に入れた場合に画像が収まらないとか
反対に繰り返し表示とかになっちゃうんです。

上はセル内の文字数とかに依って、表のサイズが自動で変化しますが
こちらは表のサイズは変わりません。

判んないって？
んじゃ、セルに文字を入れて見るから見比べて見んしゃい！

小泉今日子さん、こんにちは	最近テレビに出てきませんね？	小泉今日子さん、あなたはオバタリアンにはなりませんよね？
テレホンカード、まだ持ってます。	霧ヶ峰はいいエアコンです。	２行目のＣ
３行目のＡ	３行目のＢ	３行目のＣ
４行目のＡ	４行目のＢ	４行目のＣ
５行目のＡ	５行目のＢ	５行目のＣ

小泉今日子さん、こんにちは	最近テレビに出てきませんね？	小泉今日子さん、あなたはオバタリアンにはなりませんよね？
テレホンカード、まだ持ってます。	霧ヶ峰はいいエアコンです。	２行目のＣ
３行目のＡ	３行目のＢ	３行目のＣ
４行目のＡ	４行目のＢ	４行目のＣ
５行目のＡ	５行目のＢ	５行目のＣ

どうですか？一目瞭然ですね。
この様に表の用途に合わせてサイズを指定したりできます。
テキストを入れるのならあえてサイズを指定しない方がいい場合もありますね。
画像などを入れるのなら、指定した方がいいですね。
実際にやって見てください。


この次はもっと細かく、セルの属性に付いて説明します。
更なるステップへどうぞ～。