テーブルの作り方
-
0 名前： ００８ ： 2005/07/23 23:47 ［URL］
- ００８です。今回初めて自分でテーブルを作っています。
そこで躓いてしまったのでまた皆さんのご指導を受けたく思い
書き込みさせていただきました。よろしくお願いいたします。
参照先のページがそうなんですが、商品案内用として作っています。
TAG indexさんのテーブルのページを読んでがんばったのですが
解決できない問題が出来てしまいました。
二点あります。まず一つ目はテーブルの「ああああああ・・」と
テキストを書いている欄の右側のバーがなぜか太くなっています。
二つ目は画像を配置している欄の幅が今はページの横幅によって
大きくなったりしますが、これを１０５×１０５の固定した大きさ
にしたいのですが、大きさを設定しても動いてしまいます。
簡潔に言うとテーブルの枠の太さをすべて一緒にして画像表示の欄の
サイズを固定化したいんです。
またタグ自体の構成も間違っているかもしれません。自信が無いです。
みなさんのお力をどうぞお貸しください、よろしくお願いいたします。
-
1 名前： phpinfo() ： 2005/07/23 23:47
- ＞テーブルの「ああああああ・・」と
テキストを書いている欄の右側のバーがなぜか太くなっています。
UAの仕様かと思われます。
＃Operaで見ましたが、枠が表示されません。
スタイルシートでborderを設定すると出来るでしょう。
＃正直、定義型リストの方が簡単かと思われます
＃http://www.tagindex.com/html_tag/list/dl.html
-
2 名前： ００８ ： 2005/07/23 23:47 ［URL］
- phpinfo()さん、お返事ありがとうございます。
UAってなんですか？すいません無知で。
枠が一切表示されていないんですか？ショック。
スタイルシートで
TABLE, TD, { border: 3px #80bfff solid; border-collapse: collapse; }
としているんですけどねえ。
定義型リストというのも見てみましたがなんかどう活用したらいいのか
わかりませんでした。
引き続きよろしくお願いいたします。
-
3 名前： phpinfo() ： 2005/07/23 23:47
- ＞UAってなんですか？
http://members.jcom.home.ne.jp/pctips/www/faq/UA.html
-
4 名前： ００８ ： 2005/07/23 23:47 ［URL］
- phpinfo()さん、再度お返事ありがとうございます。
その後編集を続けていると枠線の幅は一定化できました。
四つ目のセルにもCOLSPAN="2"をつけてしまっていたのが
原因だったようです。いまＵＰしているのは編集済みです。
後はイメージを表示しているセルの大きさの一定化だけなんですが、
わかりません。
.aaa { WIDTH: 105; HEIGHT: 99; padding: 3px; }
のスタイルが効きません。高さは効いているようなんですが。
お分かりになる方がいらっしゃったらどうぞご指導よろしくお願いいたします。
-
5 名前： カヅサツ ： 2005/07/23 23:47 ［URL］
- <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN"
"http://www.w3.org/tr/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>注目のマンガ</title>
<style type="text/css">
html{
scrollbar-face-color:#F8F8FF;
scrollbar-track-color:#ffffff;
scrollbar-arrow-color:#DCDCDC;
scrollbar-highlight-color:#DCDCDC;
scrollbar-shadow-color:#DCDCDC;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
}
body{
color: #000000;
background-color: #FFFFFF;
margin: 0px 0px 12px 0px;
}
a:link,
a:visited{
color: #0066CC;
text-decoration: none;
font-family: "MS UI Gothic";
}
a:link img,
a:visited img{
border-width: 0px;
}
a:hover {
color: #FF0000;
background-color: #FFFFFF;
}
a:active {
color: #FF0000;
}
table{
color: #336699;
width: 100%;
height: 125px;
border-collapse: collapse;
margin: 0em 0px 1em 0px;
}
table,
td,
th{
border-width: 3px;
border-style: solid;
border-color: #80bfff;
}
th{
text-align: left;
padding: 1px 1px 1px 5px;
}
.cover {
width: 105px;
height: 99px;
padding: 3px;
}
.introduction {
font-size: small;
vertical-align: top;
width: 100%;
height: 85px;
padding: 7px;
}
.shop{
text-align: right;
font-size: small;
}
</style>
</head>
-
6 名前： カヅサツ ： 2005/07/23 23:47 ［URL］
- <body>
<table>
<tr>
<th colspan="2"><a
href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2177896&pid=872747990&vc_url=http%3a%2f%2fwww%2eebookjapan%2ejp%2fshop%2ftitle%2easp%3ftitleid%3d3757"
target="_blank" title="沈黙の艦隊" ><img
src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2177896&pid=872747990"
height="1" width="1" alt="">沈黙の艦隊 かわぐちかいじ 講談社</a></th>
</tr>
<tr>
<td class="cover" rowspan="2"><a
href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2177896&pid=872747990&vc_url=http%3a%2f%2fwww%2eebookjapan%2ejp%2fshop%2ftitle%2easp%3ftitleid%3d3757"
target="_blank" ><img
src="http://haishin.ebookjapan.jp/contents/images-m/SISE0160.jpg"
height="95" width="69" alt="沈黙の艦隊"><img
src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2177896&pid=872747990" height="1" width="1" alt=""></a></td>
<td class="introduction">日本の原子力潜水艦がたった一隻で突然独立国家を全世界に宣言します。艦長であり独立国家やまとの代表である海江田四郎の目的は一体何なのか。とても興味を引かれる内容の濃い一作です。</td>
</tr>
<tr>
<td class="shop">販売店：<a
href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2177896&pid=872747990"
target="_blank"><img
src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2177896&pid=872747990"
height="1" width="1" alt="">イーブックジャパン</a></td>
</tr>
</table>
</body>
</html>
-
7 名前： ００８ ： 2005/07/23 23:47 ［URL］
- カヅサツさん、お返事ありがとうございます！
タグをトレーニングルームの方にコピペして確認してみたんですが
思ったような風になってなかったので少し手を加えて実現できました。
何が原因だったのかなあと思い
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN"
"http://www.w3.org/tr/html4/loose.dtd">
を付けていなかったからなのかなあと、上のを外してもう一度トレーニン
グルームで試してみると普通に画像テーブルの大きさは固定されていました。
コメント部分のテーブル幅をこれまでは設定しないと画像とコメントの間の
縦線がテーブル幅によって左右に動いていたので幅を１００％にしていた
のですが、１００％を外して試してみたら縦線が固定されていたんです。
後から考えるに多分上にも書いたように
＞四つ目のセルにもCOLSPAN="2"をつけてしまっていた
のがそもそもの原因だったような気がします。ルールとしておかしな
タグが混ざっていると他の部分もおかしくなってしまうと言うような。
なにわともあれご親切にお返事を頂いて本当に感謝しています。
今後も勘違いな質問や初歩的な質問をしてしまうかもしれませんが
どうぞよろしくお願いいたします。
これを期に<!DOCTYPE HTML PUBLIC "">のことも勉強してみようと
思いました。今まで特にいらないかなあと思って付けていなかったので。
