解決済
表の中に画像と文字を入れたいのですがはみ出ます
ブログ初心者です。HTML辞典みて、以下の表作ったのですがはみ出ます。コラム数はたしか2カラムです。
修正の方法ご示教ください。
<table border cellspacing="5" width="20%" height="20％">
<tr><td><img src="画像"></td><td><img src="画像"</td><td><p><img src="画像"</td></tr>
<tr><td>文字コメント</td><td>文字コメント</td><td>文字コメント</td></tr>
<tr><td>文字コメント</td><td>文字コメント</td><td>文字コメント</td></tr>
</table>
高さ、幅を％で変えても、数字で変えても画像ははみ出ます。
できればHTMLでご示教いただけたとてもありがたいですm(__)m
回答(3)
3.
回答で既に指摘した[以外]に
・タグ中の区切りとしてのスペースに全角スペースを用いてはいけません。
・改行を＜ｂｒ＞に変換する設定にしておくと書いてはいけないところに＜ｂｒ＞ができます。
改行を変換しない設定にしておくか＜／ｔａｂｌｅ＞まで改行しないで書きます。
・基本予期しない範囲までｔａｂｌｅが大きくなるのはtableの内容(中身)が大きいからです。ｔａｂｌｅの幅を指定しても内容の縮小はしてくれません。（内容物の幅になります）
なので画像の方でサイズを縮小する必要があります。
例えば、
<img src="http://*.livedoor.com/・・・/ca49b37280127414cf26-M.jpg" width="50%"/>のように指定すると縮小して表示されます。
このような場合の％は全角文字を使ってはいけません。
また、この場合、ブログの記事部分とプラグイン部分の配置やサイズが指定されているので、ヘタにtable のサイズ指定などしない方がいいかと思います。
あと、配置についてはもう一度見直されるのがよろしいと思います。
BLUEPIXYさん
ありがとうございました。
一時はできないのかなと思ったりしたのですが、本当に助かりました。深謝です。
1.
2.
この場合のwidth の％指定はブラウザのウインドウに対する割合のことです。
後、＜ｐ＞は必要ないか、明示的に＜／ｐ＞で閉じるようにしましょう。
画像の大きさを指定したいということであれば、
img タグで指定しましょう。
１．で言われるようにimg タグの閉じ＞がありません。
コメント(6)
Bluepixyさん
アドバスimgの閉じをつけましたがやはりはみ出ます。
IMGタグの指定の仕方を教えてくださいm(__)m
どっからどうはみ出るんでしょうか？
画面より画像の方が大きいとかそういうことですか？
>>#1 IMGタグの指定の仕方
おそらくHTML辞典にあると思いますけど、
http://bakera.jp/html/reference/inline.html#img
で解説されているように、
width やheight 属性で画像の表示される大きさを指定できます。
#2さん
今日仕事で移動中で解説見ましたが、基礎知識無いので理解できませんした。
結論としては以下の通りはみ出ています。
属性もトライしましたが何の変化もありませんでした。
以下で何がいけないのか分かりますでしょか？
http://blog.livedoor.jp/splash1801/archives/507377...
Bluepixさん
ご多用のところ恐縮です.
ご指示の以下の通りなおしました。
http://blog.livedoor.jp/splash1801/archives/507377...
しかし相も変わらず画像がはみでます。
もし私のHTMLもなおし方の不足、不備等お気づき
でしたら再度のコメントお願いしします。
ちなみに私HTMLの読み方分りませんので直に教えていただけますとさらに恐縮ですm(__)m
>>#4
指示した通りにはなってないようですが
width="50%" はあまりうまくないようです。
＜ｔａｂｌｅ＞～＜／ｔａｂｌｅ＞を以下のもので置き換えてみて下さい。
<table border cellspacing="5"><tr><td><img src="http://img05.pics.livedoor.com/005/c/a/ca49b37280127414cf26-M.jpg" width="98px" height="128px"></td><td><img src="http://img05.pics.livedoor.com/005/c/a/ca49b37280127414cf26-M.jpg" width="98px" height="128px"></td><td><img src="http://img05.pics.livedoor.com/005/c/a/ca49b37280127414cf26-M.jpg" width="98px" height="128px"></td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>
もしFirefox をお使いなら
ツールメニューからJavascriptコンソールを確認されてみることをお薦めします。
色々と、CSS の指定がおかしいようです
