こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

テーブルとDIVとCSSについて質問です。

テーブルとDIVとCSSについて質問です。
テーブルタグのtdにdivで、写真を入れたい(写真の周りにdivで枠の飾りみたいのをつけたいから)です。
その下に、CSSで定義した文字を入れたいのですが、
tdが横に2つ(=つまり、写真が2つ並ぶ)と、左の写真の下の文字を3行にし、
右の写真を下の文字を2行にすると、縦の中央になってしまい、
右が少し下にきてしまいます。
どう、定義したらいいでしょうか?
また、その文字らを、text-align="center"でCSSで定義しても、
デザインですとセンターに見えても、ブラウザでみると、左揃えによってしまいます。
どう書いたらいいか、あわせて教えてください。
また、tableにdivを入れたらダメの場合は、どうやったら、いいか教えて下さい。

よろしくお願いします。

投稿日時 - 2010-10-22 21:28:43

QNo.6268544

困ってます

質問者が選んだベストアンサー

また記述ミスが・・・ずびばぜん
自分で言いながらpのフォントサイズと領域がずれてました。
あとpタグ閉じてなかったり。
これにwidth=300 height=200の写真差し込んだらIEでもfirefoxでも
反映されました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}

img{
vertical-align:bottom;
}




table{
width:auto;
height:auto;
border:5px double #000;
border-collapse:collapse;
}
table p{
color:#000;
background-color:#999;
font-size:14px;
height:60px;
text-align:center;

}

h2{
border:3px dotted red;
text-align:center;

}

td{
width:auto;
border:1px solid blue;
}

-->
</style>
<title>無題</title>
</head>
<body>

<table>
<tr><td><h2><img src="test.jpg" width="300" height="200" alt="写真左"></h2><p>あいうえお<br>かきくけこ<br>さしすせそ</p></td>
<td><h2><img src="test.jpg" width="300" height="200" alt="写真右"></h2><p>あいうえお<br>かきくけこ</p></td></tr>

</table>


</body>
</html>

投稿日時 - 2010-10-29 05:52:17

お礼

何回も丁寧に、ありがとうございました。
色々工夫した結果、まぁまぁできました。

けど、ブラウザ変えたらわからないし、正しいかわからないので、
参考に再度やってみたいと思います。

ありがとうございました。

投稿日時 - 2010-10-29 13:13:56

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

すみません。

記述6行目の<link rel="stylesheet" type="text/css" href="css/style.css">は
抜いといてください。

自分のタグから適当にひっぱってきたので、外部CSSへのhrefが無駄に入ってました。

投稿日時 - 2010-10-29 05:11:07

ANo.3

テーブルで横に並べた写真の位置が、各写真の下にある文字列数によって
ずれるということですよね?(理解力なくてすみません)
自分もテーブル苦手なので、専門の方が見たらダメ出しされると思いますが
何となく書いて見ました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}

img{
vertical-align:bottom;
}



table{
width:auto;
height:auto;
border:5px double #000;
border-collapse:collapse;
}
table p{
color:#000;
background-color:#999;
font-size:14px;
height:40px;
text-align:center;

}

h2{
border:3px dotted red;
text-align:center;

}

td{
width:auto;
border:1px solid blue;
}

-->
</style>
<title>無題</title>
</head>
<body>

<table>
<tr><td><h2><img src="#" width="300" height="200" alt="写真左"></h2><p>あいうえお<br>かきくけこ<br>さしすせそ<p></td>
<td><h2><img src="#" width="300" height="200" alt="写真右"></h2><p>あいうえお<br>かきくけこ<p></td></tr>

</table>


</body>
</html>
宣言文など(この場合html4.01を使用してます)を
しっかり書いてからアスタリスクの全称セレクターで外余白中余白を0にして
imgのvertcal-alignで写真挿入時隙間が入らないようにし
tableのborderをcollapseで隙間を無くして
今回はテーブルの幅とかオートで自由にしてます

画像の高さと幅をhtmlで指定して挿入し、その下に文字を挿入

そこで、「二行と三行で起こる画像の位置ずれ」について
文字は<p>タグで書いてますので<p>タグの高さをCSSで決めてあげました。
これで、左のtdも右のtdも領域の条件が全く同じになるんじゃないかなーと思います。
※<p>の文字サイズが大きくなるなら<p>のheightも収まる高さにしないと崩れます

そして<p>自体にtext-align:center;をCSSで記述しました。

で、画像はh2で入れてるのでcssを使いh2の枠を装飾しました。

写真を一回り小さくtdの中に入れたい場合は、
写真の下にくる文字領域を計算した上で

例えば
tdのwidth:300px; height:500px;
その中に入る
h2のwidth:300px; height:300px;
pのwidth:300px; height:200px;で

htmlでh2の画像width=250 height=250など入れると

画像のh2にもtext-align:center;かければ写真も中央にくるはずです。
高さの中央揃えもheight:auto;かmargin:25px 0;で合うんじゃないかと。

その際、borderなどを入れる時はそれも踏まえた計算をしてください

(でもtableは高さとかガチガチに指定したり
装飾アイテムとして考えないほうが良いらしいです。)


当方も勉強中なので、的外れだったらすみません。

投稿日時 - 2010-10-29 05:07:33

ANo.2

#1です

>><img scr="img/photo.jpg" align="middle">でできないのです

左右をそろえる場合はalign=centerです。

投稿日時 - 2010-10-23 09:31:35

お礼

centerでも、できなかったのですが、
テーブルの中だからいけないのかもしれません。
もう少し研究してみます。
何度もありがとうございました。

投稿日時 - 2010-10-23 23:19:16

ANo.1

いまいち状況がつかめてないのですが、cssでtdに対して
横幅を指定したらどうでしょうか?

ちなみに
「text-align="center"」というcssはありません。
正しくは「text-align:center」です。
さらにいうと、<div>などのブロック要素は、ブラウザによっては
「text-align:center」でセンタリングできない場合があります。

投稿日時 - 2010-10-22 22:13:46

補足

>text-align:center」
はい、間違えました。
>cssでtdに対して
横幅を指定したらどうでしょうか?
なるほど、ちょっと状況が違うのですが、それをヒントに、
cssでdivをtdの常に上に固定させればいいと思いました。
その場合は、どう指定したらいいか、教えてもらえると助かります。

ついでに、tableの中の画像を左右の中央にしたいのですが、
<img scr="img/photo.jpg" align="middle">でできないのですが、
正しい方法を教えてくれるとありがたいです。

お手数ですがよろしくお願いします。

投稿日時 - 2010-10-22 23:17:23

お礼

ありがとうございました。
説明がわかりずらくてすみませんでした。

できれば補足のほうも、お願いできませんか?

投稿日時 - 2010-10-22 23:18:44

あなたにオススメの質問