　☆ Sanctuary ☆　　Smile for you

TABLEタグ（６）

テーブルタグ　<table>　の使い方を覚えよう！！（６）

table タグはページの作成に欠かせないものです。
table タグを使うと写真や文章などを縦横に整理して並べたりすることができます。
それでは table タグの便利な使い方を見てみましょう。。

● 画像を結合するには？

今回は、table タグを利用した画像の連結についてです。
このＨＰにある「ＨＰの由来は？」のページにある画像をまず見てください。

↓こんな感じの。

( ・o・)b これ実は５０Ｋ以上あったのでアップロードできませんでした。
どうしたかというと２つに切ってアップロードしたのです。
img タグを２つ並べればすむのですが、その２つを table タグにはめ込んで見てみましょう！

↓こんな感じになります。

( ・o・)b 画像が２つに切れているのがわかりますね。
それでは、テーブルの枠を消して見ましょう。枠のサイズを０にします。( border="0" )

↓こんな感じになります。

( ・o・)b あれれ！ちゃんとくっついてませんね。どうしてでしょう！
セルとセルの間に隙間ができています。これを取り除きましょう。( cellspacing="0" )

( ・o・)b まだ、駄目です。隙間が消えてません。( ．．)b ん～、どうしましょう！
ここで、セルの中の部分の隙間をなくすもうひとつの cellpadding を指定してみます。( cellpadding="0" )

( ^o^)b これで出来上がりました。２つの画像が連結され１つの画像のように見えますね。
いかがでしたでしょうか？今回は table タグを利用した画像の結合のしかたについて勉強しました。
それでは、みんなもく(￣Д￣)ﾉｶﾞﾝﾊﾞﾛｰｰｰ♪

table tag (6)

ジャンル別一覧

人気のクチコミテーマ

スマートフォン版を閲覧 | PC版を閲覧