微運テイマナナ☆のノーリアルラック!!

はいどうもナナ☆です。
今日はブログでも使いやすい「テーブル」について
ご説明しようかなと思いますです。
テーブルといっても要は「表」です。
構造さえ理解できればいろんな形でブログやＨＰを飾れます。

では早速簡単なところから説明していきます。

---

１、テーブル初級編

まずは基本構成からお話しします。
とっても簡単。

<table border="1">
<tr>
<td>
ここに文字とか画像とか
</td>
</tr>
</table>

これだけでオッケー。 このタグを入れるだけで…

ここに文字とか画像とか

ほら囲みが出来ました。
んではここで各タグの説明。

<table></table> これはテーブル全体を構成するもの。 <td></td> これはテーブルの中の横のマスを構成する記号。 <tr></tr> これはテーブルの中の縦のマスを構成する記号。

つまりこれを…

<table border="1">
<tr>
<td>1列目1行目</td>
<td>2列目1行目</td>
</tr>
<tr>
<td>1列目2行目</td>
<td>2列目2行目</td>
</tr>
</table>

こんなふうに組み合わせることで…

1列目1行目	2列目1行目
1列目2行目	2列目2行目

こんな感じでテーブルを作れるわけです。

☆よくやりがちな失敗(私もよくやる)
それはタグの閉じ忘れです。
テーブル内で<tr>を使ったなら必ず</tr>を 最後につけないといかんのです。
そして構成を見てもらってもわかるように
<td>を使う場所は<tr>の中に限ります。
この基本さえ理解できればテーブルの原理は簡単になりますよ〜。
次に先ほど説明したテーブルタグにいろんな要素を付け加えましょう。

●テーブルの大きさを決める
これ結構重要なことです。
なぜかというと、これちゃんと決めておかないとブログ全体が崩れてしまうからです。
例えば

1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目	2列目1行目
1列目2行目	2列目2行目

ほらこんな感じで。 ちゃんと横幅を指定しないと文字の数によって
テーブルのマスはどんどん伸びてしまいます。
これじゃかなり不恰好なので、ちゃんと指定しておきましょう。
指定すれば文字は勝手に改行されます。
画像は指定したサイズに収まるものを使いましょう。
んでは指定の方法。

<table border="1" width="400">
<tr>
<td>1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目</td>
<td>2列目1行目</td>
</tr>
<tr>
<t>1列目2行目</td>
<td>2列目2行目</td>
</tr>
</table>

これで

1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目	2列目1行目
1列目2行目	2列目2行目

←――――――――ここからここまでが400px――――――――→

こんな感じで幅を指定すれば小さくなります。
ただこれでもまだ不恰好。
右と左のセルの幅も指定したいですね。
というわけで指定しましょ。

<table border="1" width="400">
<tr>
<td width="200">1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目</td>
<td>2列目1行目</td>
</tr>
<tr>
<td>1列目2行目</td>
<td>2列目2行目</td>
</tr>
</table>

このように指定すれば

1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目	2列目1行目
1列目2行目	2列目2行目

ほらこんな感じでキレイに2等分されました。
400から200が引かれた数字が自動的に右側のサイズとなります。
<td>で指定する場合は<table>で指定した数字より小さいものしか使えません。
ま当然だけどね…つまり、左のマスを100pxと指定すれば

1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目1列目1行目	2列目1行目
1列目2行目	2列目2行目

こんな感じのマスもできます。

高さを指定する場合は次回説明します。
なぜならあんま重要じゃないからです。
というのも、ブログの場合、一番大事なのは横幅です。
HPと違って、決まったサイズ内で作業しないといけないからね。
冒頭にも書きましたが横幅をきっちりしておかないと
ブログ全体が崩れてしまい、すごくみっともない感じになりますのでご注意。

ちなみに…

楽天ブログのトップ自由欄で私が使っていたテーブルの横幅は
５５０px、現在のＦＣ２ブログでのトップ自由欄の横幅は４８０pxです。

ブログによってこの限界サイズは違うので、ちょこちょこ調整しつつ決めるといいですよ〜。

みんなもブログを作ろうぜ！


↑１日一回よろちくちく！

このコメントは管理人のみ閲覧できます

ちょと説明がわかりづらかったですな…
なのでざっくりした説明にかえました(ノ∀｀)
行は横、列は縦っていう私の中での決まりごとが
わかりづらくしてしまったようです(´･ω･｀)
ご指摘ありがとうございました！

勉強になります・・・

このページに直でお気に入り追加しました＾＾

ほぉ〜。ここまで枠で出せるとは・・・・・

さっそくﾒﾓﾒﾓしますｗ

非常に勉強になります！

自分のﾌﾞﾛｸﾞも少しｲｼﾞってみたんですけど、

なかなかうまい具合に出来ませんでした(´･ω･`)


ちょくちょく見て、参考にさせていただきます＞＜

φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ


なるほろｗｗ

ナナさんがんばってるねｗｗｗｗ


これからもＲＳ、ブログ更新o(・ω・´o)(o｀・ω・）oガンバ

＞melemさん
これから徐々に、もうちょっと凝ったものを
紹介していこうと思いますので
多少でも参考になれば幸いですｂ

＞恩師さん
アリャマ！
楽天はフリーページがついてるからいいですよね〜。
ＦＣ２は記事に直接書き込むしかないので
ごちゃごちゃになりそうで悲しい(´･ω･｀)

＞LINEさん
自分のための勉強にもなるので
結構こういうの作るの楽しいのですよ〜。
ぼちぼちがんばりますｂ