プロフィール

ナナ☆

Author:ナナ☆
REDSTONE緑鯖で活動中のナナ☆です。微運テイマです。若干健康も振ってます。あわてものです…。

目次みたいな。
最近の記事+コメント
カレンダー
06 | 2017/07 | 08
- - - - - - 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 - - - - -
月別アーカイブ
ブロとも申請フォーム
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】
Trackback(-) | Comments(-)
テーブルを作ろう!初級編
はいどうもナナ☆です。
今日はブログでも使いやすい「テーブル」について
ご説明しようかなと思いますです。
テーブルといっても要は「表」です。
構造さえ理解できればいろんな形でブログやHPを飾れます。

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


1、テーブル初級編

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

<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と違って、決まったサイズ内で作業しないといけないからね。
冒頭にも書きましたが横幅をきっちりしておかないと
ブログ全体が崩れてしまい、すごくみっともない感じになりますのでご注意。

ちなみに…

楽天ブログのトップ自由欄で私が使っていたテーブルの横幅は
550px、現在のFC2ブログでのトップ自由欄の横幅は480pxです。

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

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

banner_01.gif
↑1日一回よろちくちく!
スポンサーサイト
ブログ小技集。 | 【2006-09-01(Fri) 22:49:48】
Trackback:(0) | Comments:(7)
コメント
このコメントは管理人のみ閲覧できます
2006-09-02 土 00:43:31 | | # [ 編集]
ちょと説明がわかりづらかったですな…
なのでざっくりした説明にかえました(ノ∀`)
行は横、列は縦っていう私の中での決まりごとが
わかりづらくしてしまったようです(´・ω・`)
ご指摘ありがとうございました!
2006-09-02 土 03:34:49 | URL | ナナ☆ #- [ 編集]

勉強になります・・・

このページに直でお気に入り追加しました^^
2006-09-02 土 16:38:21 | URL | melem #- [ 編集]
ほぉ~。ここまで枠で出せるとは・・・・・

さっそくメモメモしますw
2006-09-03 日 19:36:58 | URL | サカキ #- [ 編集]
非常に勉強になります!

自分のブログも少しイジってみたんですけど、

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


ちょくちょく見て、参考にさせていただきます><
2006-09-04 月 11:54:14 | URL | 恩師 #- [ 編集]

φ(・ω・*)フムフムφ(。_。*)メモメモ


なるほろww

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


これからもRS、ブログ更新o(・ω・´o)(o`・ω・)oガンバ
2006-09-04 月 18:18:14 | URL | LINE #- [ 編集]
>melemさん
これから徐々に、もうちょっと凝ったものを
紹介していこうと思いますので
多少でも参考になれば幸いですb

>恩師さん
アリャマ!
楽天はフリーページがついてるからいいですよね~。
FC2は記事に直接書き込むしかないので
ごちゃごちゃになりそうで悲しい(´・ω・`)

>LINEさん
自分のための勉強にもなるので
結構こういうの作るの楽しいのですよ~。
ぼちぼちがんばりますb
2006-09-04 月 20:36:06 | URL | ナナ☆ #- [ 編集]
コメントの投稿
管理者にだけ表示を許可する

ブログ内検索
いらっしゃいまし!
あなたは
人目のお客さんです!
フリーページ
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。