No.3ベストアンサー
- 回答日時:
補足です。
tableは、ブラウザのでファルトは分離ボーダーモデルとセル内に余白を置くのがデフォルトですから、tableで画像を配置するとセル間に隙間が開きます。HTMLでいうとcellspacingです。cellpaddingのいずれも0にして、隙間が開く理由は、改行やタブの影響ではないかと思います。
No.2の回答のtableの属性で、cellpadding="0" cellspace="0"を指定すればスタイルシートで指定しなくても隙間はなくなるはずです。vertical-alignは関係ありません。
また、cellpadding="1" cellspace="1"を指定していても、スタイルシートでの指定が優先されますから、スタイルシートで上書きできます。
⇒カスケード処理の順序(Cascading order) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
この回答へのお礼
お礼日時:2013/03/05 19:08
とても親切にありがとうございます。色々なヒントでおかげでわかりました。
隙間が空いてました。すっきりです。ありがとうございました。
No.2
- 回答日時:
>CELLSPACING="0"CELLPADDING="0"とか入力してもうまくいかず
ひょっとして、TABLEを使用しているのでは?
テキストエディタで練習されていることは、とてもよいことですが、折角基本から学ばれるなら、最低限
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。
スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より
は避けてください。特にtableをデザインのために使用するのは避けるように。
画像の間に隙間が開く理由は
『HTMLでは、次に挙げる文字だけが空白類文字であると定義される。
・ASCIIスペース ( )
・水平タブ (	)
・書式送り ()
・ゼロ幅スペース (​)
行区切り類もまた、空白類文字である。
・・・【中略】・・・
特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 』( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
によるものです。要素と要素(この場合IMG要素や<td>要素)の間に、改行やタブがあるとそれらはひとつの空白として処理されるからです。
これは次のような英文を考えるとわかると思います。
This is
a pen.
という文章を書いてもウィンドウの幅が広いと、[This is a pen.]と表示しなければなりませんよね。isとa の間の改行が空白文字だからです。
画像と画像の間に空白をあけたくなかったとしたら、
<td><img src=""></td>
<td><img ・・・
と、<td></td>間に一切の【空白文字(上記)】をおかずに一列に書くか、<td><img><img><img></td>とするかです。
★しかし、画像(何かのデータだと思いますが)それをテキストの代わりに使用したり
TABLEでデザインするのは、基本的には間違いですが
<table summary="picture Of Kuma" bordeer="0" class="sample1">
<tbody>
<tr>
<td><img src="" width="" height="" alt=""><td>
<td><img src="" width="" height="" alt=""><td>
<td><img src="" width="" height="" alt=""><td>
</tr>
<tbody>
</table>
として、スタイルシートは
table.sample1{
border-collapse:collapse;/* セルの隙間を空けない */
border:1px solid red;/* 外枠の指定 */
}
table.sample1 td{
padding:0; /* セル内のpaddingを0 */
}
とborder-collapse:とpaddingの指定が必須です。
★繰り返しますが、データを画像で表現したりTABLEでデザインすることは???です。
No.1
- 回答日時:
スタイルシートで、img { vertical-align: bottom; } を入れればいいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style type="text/css">
img { vertical-align: bottom; }
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="#" width="100" height="100"></td>
<td><img src="#" width="100" height="100"></td>
<td><img src="#" width="100" height="100"></td>
</tr>
<tr>
<td><img src="#" width="100" height="100"></td>
<td><img src="#" width="100" height="100"></td>
<td><img src="#" width="100" height="100"></td>
</tr>
<tr>
<td><img src="#" width="100" height="100"></td>
<td><img src="#" width="100" height="100"></td>
<td><img src="#" width="100" height="100"></td>
</tr>
</table>
</body>
</html>
この回答へのお礼
お礼日時:2013/03/03 22:57
なるほどですね。スタイルシートを使うとこうなるのですね!
参考になります。スタイルシートを使わないとなると やはり 難しいのでしょうかねぇ~(;;)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLでテーブルを縦に並べたい!
-
tableで横スクロールバーが・・
-
エクセルでサイズに合ったもの...
-
Dreamweaverのテーブル内テキス...
-
パソコンサイズが横30cm縦20cm...
-
Excelの列の幅(ピクセル)につい...
-
<legend>で表示されるタイトル...
-
表の幅が広がる
-
バーコードのサイズは拡大縮小...
-
Excel セルの幅が合わない
-
エクセルの行幅と列幅
-
window.openした時、親ウィンド...
-
スクロールバーの色変更(長文)
-
エクセルでサイズ指定でPOP...
-
オープンオフィス ライターの文...
-
iframeのスクロールバー:縦だ...
-
パソコンでランドルト環の作成...
-
Scriptタグはheadタグとbodyタ...
-
PDFへてのテキストボックスにて...
-
CSSのtransform: translate(-50...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
HTMLでテーブルを縦に並べたい!
-
Excelで可視部分だけをWeb形式...
-
表の中に表
-
テーブルで3セル作った行の下に...
-
CSS line-height が効かない
-
表の中でのフォーム
-
Jimdoで表組のなかの画像をポッ...
-
テーブルとテーブルの間に、隙...
-
一つのhtml内でテーブルを使っ...
-
スタイルシートで出来ますか?
-
cssのfont-sizeがFirefoxで効か...
-
テーブルにスクロールバーを付...
-
カレンダーを生成する、極少コ...
-
innerHTMLを使わずに…
-
1列4行のテーブルを結合できますか
-
ホームページの画像が表示されない
-
<td> 内のテーブルを上寄せにす...
-
こんな感じのwebページできませ...
-
Webの表で画像を並べたい
おすすめ情報