テーブルタグを理解し活用する(サンプル一覧) | 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

エフィシェントアフィリエイト~圧倒的な作業効率と差別化を生み出す!~

EFFICIENTアフィリエイト

テーブルタグを理解し活用する(サンプル一覧)

テーブルタグの基本と活用方法、サンプル一覧ページです^^是非ご参考ください^^

テーブルタグを理解し活用する(サンプル一覧)

まずテーブルタグを構成する3つのタグの意味を理解しましょう!

まずは<table></table>タグこれはわかりますよね^^

テーブルタグの始まりと終わりを指定するタグです^^

次に<tr></tr>
これは表の行を示す要素です。一段を作るタグとお考え下さい^^
その一段の中に<td></td>と言うタグで表のセルを作ります^^
あああ
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>あああ</td>
</tr>
</table>
<tr>がその行の枠で<td>がその中のセル(箱)と
考えるとわかりやすいかもしれませんね^^
<tr>がお弁当箱
<td>がおかずとご飯を分ける仕切り^^;
では上記のテーブルタグに一つ仕切りを付け足します^^
箱ではなく仕切り(セル)なので<td>を追加すると言う事ですよね^^
ご飯 おかず
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>ご飯</td>
<td>おかず</td>
</tr>
</table>

では次に1つのお弁当箱ではなく
ご飯とおかずを分けた2段のお弁当にする場合(笑)

これは仕切りではなく箱自体を追加するので
<td>ではなく<tr>を追加します^^
ご飯
おかず
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>ご飯</td>
</tr>
<tr>
<td>おかず</td>
</tr>
</table>

では上記組み合わせでおかずの箱だけに
仕切りを入れてみます^^

ここで登場するのが「colspan」と言う横のセルを統合させるタグです^^
上段の箱はセルを追加しないので2つ分のセルを統合させる必要があります。

ご飯
お魚 ミートボール
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">ご飯</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
</tr>
</table>
このcolspan="2"の2と言う数字が
2つ分のセルを1つに統合すると言う指示を出しています。
ちなみに2段目の箱を3つにする場合は
当然colspan="3"の様に統合するセルの数を3に変える必要がありますよね^^
ご飯
お魚 ミートボール から揚げ
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="3">ご飯</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
</tr>
</table>

では上段を2つのセル
下段を3つのセルにする場合は・・・

ご飯 佃煮
お魚 ミートボール から揚げ
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">ご飯</td>
<td>佃煮</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
</tr>
</table>

要は、ご飯のセルは下の2つ分のセルの幅を
1つのセルに統合していると言う事です^^

なので下段を4つのセル
上段を2つのセルにする場合

上段の個々のセルの幅を
下段の2つの幅にそれぞれ合わせる場合は
上段の各tdにcolspanで統合するセルの数を指定する必要があります。

ご飯 佃煮
お魚 ミートボール から揚げ ウインナー
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">ご飯</td>
<tdcolspan="2">佃煮</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
<td>ウインナー</td>
</tr>
</table>

では次に縦のセルの統合を行っていきます^^
縦のセルの統合は「rowspan」で指定します^^

ご飯 佃煮
お魚 ミートボール から揚げ ウインナー
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td rowspan="2">ご飯</td>
<td colspan="4">佃煮</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
<td>ウインナー</td>
</tr>
</table>

上記の様に「colspan」と「rowspan」の組み合わせで
色々な形のテーブルを作る事ができます^^

あああ いいい
ううう えええ
おおお かかか ききき
くくく けけけ こここ さささ ししし
すすす せせせ そそそ たたた ちちち つつつ
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">あああ</td>
<td colspan="4">いいい</td>
</tr>
<tr>
<td colspan="2">ううう</td>
<td colspan="4">えええ</td>
</tr>
<tr>
<td colspan="2">おおお</td>
<td colspan="3">かかか</td>
<td rowspan="2">ききき</td>
</tr>
<tr>
<td>くくく</td>
<td>けけけ</td>
<td>こここ</td>
<td>さささ</td>
<td>ししし</td>
</tr>
<tr>
<td>すすす</td>
<td>せせせ</td>
<td>そそそ</td>
<td>たたた</td>
<td>ちちち</td>
<td>つつつ</td>
</tr>
</table>

 

セルの幅を指定する

セルの幅を指定する場合はwidth=""で幅指定します^^
150ピクセル 200ピクセル 250ピクセル
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td width="150">150ピクセル</td>
<td width="200">200ピクセル</td>
<td width="250">250ピクセル</td>
</tr>
</table>

 

セルの高さを指定する

セルの高さを指定する場合はheight=""で幅指定します^^
100ピクセル 同じ行なので高さは統一される 同じ行なので高さは統一される
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td height="100">100ピクセル</td>
<td>同じ行なので高さは統一される</td>
<td>同じ行なので高さは統一される</td>
</tr>
</table>

 

セルの幅と高さを指定する

幅150ピクセル、高さ100ピクセル 幅200ピクセル、同じ行なので高さは統一される 幅250ピクセル、同じ行なので高さは統一される
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td width="150" height="100">幅150ピクセル、高さ100ピクセル</td>
<td width="200">200ピクセル、同じ行なので高さは統一される</td>
<td width="250">250ピクセル、同じ行なので高さは統一される</td>
</tr>
</table>

 

セルに背景色をつける

行単位で背景色をつける場合は
trに bgcolor=""で色を指定します^^
カラーコード#FFFACD
背景色指定なし
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr bgcolor="#FFFACD">
<td>カラーコード#FFFACD</td>
</tr>
<tr>
<td>背景色指定なし</td>
</tr>
</table>
セル単位で背景色を付ける場合は
tdに bgcolor=""で色を指定します^^
背景色指定なし カラーコード#FFFACD 背景色指定なし
<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>背景色指定なし</td>
<td bgcolor="#FFFACD">カラーコード#FFFACD</td>
<td>背景色指定なし</td>
</tr>
</table>
  • Yahoo!ブックマークに登録する
  • はてなブックマークに登録する
  • livedoorクリップに登録する
  • newsingブックマークに登録する
  • del.icio.usブックマークに登録する
  • ニフティクリップに登録する
  • RSSを購読する
  • このページをブックマーク!

次の記事 »
前の記事 »
トップページへ » 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

もっと詳しく知りたい事や
理解できなかった事などございましたらお気軽にご連絡下さい。

お問い合わせはこちらからどうぞ

この記事のコメント

この記事へのコメント

次の記事 »
前の記事 »
トップページへ » 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

お問い合わせはこちらからどうぞ

圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~ TOP » HTMLタグ辞典, テーブルタグの活用 » テーブルタグを理解し活用する(サンプル一覧)