テーブル（ｔａｂｌｅ）タグを使おう＠自力で
2005年04月15日13:59
商品紹介やサイトのレイアウトに、こんなに使っていいのか？と不安になるくらい<table>タグを使っています。意外と便利なので、使い方をご紹介いたします。



まず、テーブルタグ（<table>タグ）って、何かいな？と言いますと、簡単に言いますと、

表を作るぞ、ということです。


HTMLタグのひとつで、ブログの本文などで使うと簡単に表が出来ちゃいます。
ただの表と侮ること無かれ、これでバナーや画像をきれいに並べたりとかが出来ちゃうのです。


しかしここで注意。
改行を<br/>タグに変換しない設定にしないといけません。



つまり本文にテーブルタグを入れると、
改行には鬼のように<br/>（改行）タグを使わないといけません。

記事が出来たら最後に<br/>（改行）タグをコピペしまくる、という地道な活動をしながら、テーブルタグを使った記事を書いているというわけです（笑）。



それはさておき、ぶっちゃけテーブルタグ（<table>タグ）の基本はこれだけです。


<table>
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>


このタグの表示例↓

セル１セル２
セル３セル４

各タグの意味
<table>→表を作ります。ここからはじめます。
</table>→表の終わりです。

<tr>→行の始まりです。
</tr>→行の終わりです。

<td>→セルの始まりです。
</td>→セルの終わりです。


そういうわけで、セルの中にバナーとか画像のURLを入れれば並べることが出来るわけです。

<table>
<tr><td>バナー１</td><td>バナー２</td><td>バナー３</td><td>バナー４</td></tr>
<tr><td>バナー５</td><td>バナー６</td><td>バナー７</td><td>バナー８</td></tr>
</table>
表示例↓
バナー１バナー２バナー３バナー４
バナー５バナー６バナー７バナー８


バナーの代わりにテキストリンクや画像などでもいけます。


このままでは使えないかもしれないので、ここで、<table>タグのＱ＆Ａを行いたいと思います。


Ｑ１．枠がうっとうしい。枠が。

Ａ１．「大人はすぐ枠にはめたがる」という事ですね。わかります、その気持ち。
<table>の中に、border="0"を加えます。
こんな感じです。<table border="0">
逆に枠をつけたい時は、<table border="1">とします。

<table border="0">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>

表示例↓
セル１セル２
セル３セル４

Ｑ２．表の横幅や、縦幅を決めたいっちゅーに。

Ａ２．このままではセルの中身によってテーブルの大きさが決まっちゃいます。
自分で決めたい、わかります、その気持ち。
<table>の中に、width="200"、height="300"などを加えます。
ピクセルしての他、表を置くスペースに対する、「%」指定などもできます。
width="200"→横幅です。
height="300"→縦幅です。
セルの幅も同様です。<td>の中にwidth="100"、width="50%"などを入れ、指定してみて下さい。

<table width="200" height="200">
<tr><td width="40%">セル１</td><td width="60%">セル２</td></tr>
<tr><td width="40%">セル３</td><td width="60%">セル４</td></tr>
</table>

表示例↓
セル１セル２
セル３セル４


Ｑ３．画像がぎゅうぎゅう詰めになります。

Ａ３．窮屈ですね。人生にはゆとりも必要です。
セルとセルの間をあけるには、cellspacing="5"を入れます。
画像などと、セルの間にゆとりを持たせたい時はcellpadding="10"を入れます。
数値はピクセル単位で指定できます。御自由にかえてみて下さい。

<table cellspacing="2" cellpadding="20">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>

表示例↓
セル１セル２
セル３セル４


Ｑ４．背景がみすぼらしいのですが・・・

Ａ４．確かに。味気ないですね。
bgcolor="#FFCCCC"で指定します。
WEBカラーで指定してもいいですし、色名で指定してもいいです。red、blueとかですね。

<table cellspacing="2" cellpadding="20">
<tr><td bgcolor="#FFCCCC">セル１</td><td bgcolor="red">セル２</td></tr>
<tr><td bgcolor="orange">セル３</td><td bgcolor="yellow">セル４</td></tr>
</table>

表示例↓
セル１セル２
セル３セル４


Ｑ５．セルをくっつけたいのですが。

Ａ５．くっつけちゃいたいですね。わかります、その気持ち。
横のセル連結するのはcolspan="2"、縦のセルを連結するのはrowspan="2"を使います。
数値は連結するセルの数です。

<table>
<tr>
<td colspan="2">説明１</td>
</tr>
<tr>
<td>図１</td>
<td>図２</td>
</tr>
</table>

表示例↓
説明１
図１ 図２



<table>
<tr>
<td width="50%">図１</td>
<td width="50%" rowspan="2">説明１</td>
</tr>
<tr>
<td>図２</td>
</tr>
</table>

表示例↓
図１ 説明１
図２


という感じです。

テーブルの大きさを決めてなかったりすると、予想外にブログの表示が崩れたりする可能性もあります。（私の場合は、ブログの本文のスペースの横幅をＣＳＳでピクセル指定しているのでたぶん大丈夫ではないか？と思って、ガンガン使っていますが。）

出来ればいろんなブラウザ、解像度でのご確認をされた方がよろしいかもしれません。

という私はほとんど確認していませんが（笑）。


よかったら、いろいろアレンジして、使われてみて下さい〜




│clip! │ブログカスタマイズ 
このBlogのトップへ │前の記事 │次の記事

この記事へのコメント
yellow
2005年04月15日 14:27
う〜ん。ECサイトならtableタグは確かに有効だとは思うが、エクセルで作表すればいいだけのような気もする。。

同じ労力を使うなら同じ商品名を連呼した方が良い気がするな〜。

ぜんぜん関係ない話ですが、SEOツールうれますた。
やっぱり、ちょ〜二万円の売り上げは嬉しいでつ。

Yellow
2005年04月15日 14:30
あと、思ったのが、ブログでの売り込みは商品の紹介が記事
の中に溶け込むことが必要で、その意味でもビジュアル的な
アピールはよほど戦略的に考えないと駄目だろうということですね。

ギフタツ
ギフタツ
2005年04月15日 14:35
なぜテーブルタグで表を作成したら記事に異様な空間ができるのか、
今回の記事を読んで謎がやっと解明しました♪

「改行を<br/>タグに変換」に設定されてたからなんですね。
HTMLに関する参考書を見てもよくわからなかったんですが、
これですっきりしました(*^_^*)

コピペは確かにめんどくさいし、モレが絶対出てきそうなので、<br>をユーザー辞書に登録して記事を書きながらその都度挿入
してみようかなって思っています。

ａｆｉｌｉａｔｅ
2005年04月15日 14:43
どおも〜ＹＥＬＬＯＷさま。コメントありがとうございます。

こんな超長い記事を書いていて言うのも何なんですが、私もテーブルタグめんどくさいのです（笑）。

エクセルやホームページ作成ソフトで、簡単にきれいな商品配置が出来ないものかと試行錯誤しましたが、自分でテーブルタグを打つのが今は一番簡単なんですよね。

なんか簡単な方法あったら教えてください〜。

おお、ＳＥＯツール２万円也、買う人いるんですね。売り上げおめでとうございます〜。

ａｆｉｌｉａｔｅ
2005年04月15日 14:46
ども〜ＹＥＬＬＯＷさま。

＞ビジュアル的なアピールはよほど戦略的に考えないと駄目だろうということですね。

これはそう思います。
サイトコンセプト自体から、サイトデザイン、記事のデザイン、ビジュアル的な融合がたぶん売り上げに結構関与するのではないかと思います。

そういった意味ではこのブログなどはかなりきついんですよね。コンセプトからして。

別のサイトでこれらの経験を生かしたいと思います〜

ａｆｉｌｉａｔｅ
2005年04月15日 14:50
どおも〜ギフタツさま。

＞なぜテーブルタグで表を作成したら記事に異様な空間ができるのか、
＞今回の記事を読んで謎がやっと解明しました♪

これは私も、３ヶ月くらいハマっていました（笑）。
聞いたら、な〜んだ、ということなんですけどね。
でもどこにも書いて無いんですよね。

私も辞書に改行タグ登録しとこおっと（笑）。

赤いpost
2005年04月16日 00:20
いつも勉強になります。
ありがたいリンクシェアの記事を読ませていただき、
とりあえず１ページでも作ろうと。
デザインをcssが難しく、慣れたテーブルで作成。
慣れたと思っていたのですが…。
firefoxで崩れてる（泣。。。
macではieも崩れ、safariで見れるぐらい（泣
cssのテンプレ使っときゃよかった。
修正は明日に…。
前日からgoogleで100位圏外になるし、なんかお先真っ暗。

afiliate
2005年04月17日 10:27
どおも〜赤いｐｏｓｔさま。

あらら、ＦｉｒｅＦｏｘで表示が崩れてます？
私の場合、テーブルタグでは表示崩れないんですけどねえ。ひょっとしたら、ＣＳＳで、ｂｌｏｇ本文の幅を決めちゃったほうがいいかもしれません。

お役いに立つかわかりませんが、ご参考にどおぞ。
http://afiliate.livedoor.biz/archives/14773385.html

グーグルも気まぐれですので、気長に頑張りましょう（＾O＾）/