- ベストアンサー
テーブルの作成で
初心者ですが子供の野球チームのホームページを作っています。 写真を飾るページを作っているのですが、テーブルを額縁のようにして 横に３列縦にいくつか５行くらいに並べたいと思っています。 額縁は一つ一つが独立して並べたいんですが、その方法がわかりません。 <table border="5" width="160" height="120" bgcolor="white"> <td> <center> <table border="1" width="116" height="80"> <td> <img src="gazo/fusha2.jpeg" width="116" height="80"> </center> </td> </table> </td> </table> で額縁ひとつができたんですが、それを横にも縦にもならべる方法を教えてください。よろしくお願いします。
- aki308
- お礼率22% (31/140)
- Windows XP
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
・・・打ちながら考えてみたら、要するに画像に枠つければいいだけみたいですね。 <style type="text/css"> <!-- img { border:2px solid #000000; margin: 1px; } .box1 { width: 122px; height: 86px; border: 5px solid #000000; background-color; #ffffff; margin: 1px; padding: 1px; float: left; } .box2 { width: 430px; clear: both; } --> </style> html部分 <div class="box2"> <div class="box1"><img src="***.gif" width="116" height="80"></div><div class="box1"><img src="***.gif" width="116" height="80"></div><div class="box1"><img src="***.gif" width="116" height="80"></div></div> <div class="box2"> <div class="box1"><img src="***.gif" width="116" height="80"></div><div class="box1"><img src="***.gif" width="116" height="80"></div><div class="box1"><img src="***.gif" width="116" height="80"></div></div> という感じでどうでしょうか？？？
その他の回答 (3)
- 345itati
- ベストアンサー率48% (795/1639)
#2です。記述ミス修正をさせて下さい。 table { border-collapose: separate; border: 5px solid #000000; background-color: #000000; } に訂正です・・・ ×bacoground-color: #000000; background-color: #000000;
- 345itati
- ベストアンサー率48% (795/1639)
えっと、そもそも基本から問題があるようなので^^; 額縁というか、画像に枠線をつけて横３列縦5行と考えて・・。画像の大きさは皆同じとしたら、 <head></head>間にスタイルシートで <style type="text/css"> <!-- table { border-collapose: separate; border: 5px solid #000000; bacoground-color: #000000; } td { border: none; background-color: #0000ff; width: 160px; height: 120px; text-align: center; } img { border:2px solid #000000; } --> </style> HTML部分では <table> <tr><td><img src="http://***"></td><td><img src="http://***"></td><td><img src="http://***"></td></tr> <tr><td><img src="http://***"></td><td><img src="http://***"></td><td><img src="http://***"></td></tr> <tr><td><img src="http://***"></td><td><img src="http://***"></td><td><img src="http://***"></td></tr> <tr><td><img src="http://***"></td><td><img src="http://***"></td><td><img src="http://***"></td></tr> <tr><td><img src="http://***"></td><td><img src="http://***"></td><td><img src="http://***"></td></tr> </table> という感じでは駄目ですかね・・・ (セルの範囲を分かりやすくするために、背景色を青くしています。白くしたい場合は、#0000ff部分を#ffffffに変更して下さい。 こういったレイアウト目的の為にテーブルを組むのは、本来好ましくありません。スタイルシートでレイアウトすべきです。
お礼
回答いただきありがとうございます。早速やってみます。
- akuhijrwq
- ベストアンサー率35% (381/1064)
テーブルは横に並べることが出来ません。 なので 大きなテーブルを作り その中にそのテーブルをいれてやるしかありません。
関連するQ&A
- tableがずれる理由がわかりません
上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう？？ 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブル高さ指定タグについて
テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？
- ベストアンサー
- HTML
- 初めてＨＰを作成してるんですが
素材の置いてあるサイトから、テーブルをダウンロードしました。 けどどうやって使えばいいのかわかりません。 コレ↓でやっても、画像がでません。 何が足りないのか教えていただけませんか？？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>テーブル設置例</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <CENTER> <TABLE cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="5" background="画像のＵＲＬ" height="27" bgcolor="#FFFFFF"></TD> </TR> <TR> <TD bgcolor="#FFFFFF"></TD> <TD rowspan="2" valign="bottom" bgcolor="#FFFFFF"><IMG src="画像のＵＲＬ" width="100" height="171" border="0"></TD> <TD width="280" height="250" bgcolor="#FFFFFF" align="center"><FONT size="-1">文章BR> 文章<BR> <BR> 文章</FONT></TD> <TD rowspan="2" valign="bottom" bgcolor="#FFFFFF"><IMG src="画像のＵＲＬ" width="100" height="171" border="0"></TD> <TD bgcolor="#FFFFFF"></TD> </TR> <TR> <TD valign="bottom"><IMG src="画像のＵＲＬ" width="20" height="23" border="0"></TD> <TD background="画像のＵＲＬ" height="23"></TD> <TD valign="bottom"><IMG src="画像のＵＲＬ" width="20" height="23" border="0"></TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML> windows９８・ＩＥ６，０でメモ帳を使って作成しています。 超初心者のくせにかなり無謀なんでしょうかー さっぱりわかりません。。。 何か補足することがありましたら、お知らせください ご回答どうぞよろしくお願いいたします・・！
- ベストアンサー
- その他（インターネット接続・通信）
- テーブルで画像を並べるときに・・
今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
- ビルダー9 表の枠（罫線？空白？）を完全になくすには？
会社のHPを作っています。 下記のタグを見て頂くとわかると思うのですが、 一番大きい画像と、その右の画像の間に細い線が入ってしまっています。 （ファイル名は消してあります） 最初は上下にも入っていたのですが、それはどうにか消すことができました。 （どうやったか覚えてないですけど） この線をないものとすることはできますか？ 周りに詳しい人がいなくて、ほんっっとうに困ってます！助けてください(T_T) <TABLE width="785" cellspacing="0" cellpadding="0"> <TBODY> <TR align="left" bgcolor="#ffffff"> <TD colspan="4" rowspan="3" width="691" height="73"><IMG src="" width="691" height="76" border="0"></TD> <TD colspan="2" width="77"><IMG src="" width="94" height="19" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="20" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="37" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="6" height="18"><IMG src="" width="84" height="21" border="0"><IMG src="" width="130" height="21" border="0"><IMG src="" width="156" height="21" border="0"><IMG src="" width="126" height="21" border="0"><IMG src="" width="114" height="21" border="0"><IMG src="" width="175" height="21" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- ホームページ作成ソフト
- テーブルで中央に指定したい
1行1列の横100％ 縦100％に指定したテーブルを1つ そのテーブルの中に1行1列の横100px 縦100pxが1つ このようにした場合、中に入れたテーブルはどの解像度でも画面の中心にくるはずです。 しかし、IE6で確認すると横の中央にはくるのですが縦の中央にはきません。 しかしネスケ4.7ではイメージ通りになっています。 なぜでしょうか？ [ソース参考] <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table width="100" height="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0033CC"> <tr> <td width="100" height="100"><center> <font color="#FFFFFF"><strong>中央</strong></font> </center></td> </tr> </table> </td> </tr> </table>
- 締切済み
- HTML
- テーブル内でのランダムな並べ変え
全然知識がないのですがよろしくお願いします。 タグで <table border="0"> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> </table> このようなテーブルがあって、その順番をページ更新でタイトル・画像・文書を一枠としてクルクルランダムに入れかえたいのですが、どうしたらいいでしようか？ 今後、この一枠がドンドン増えて行って、それも含めて全ての枠をランダムに入れ替えたいのです。 jqueryで簡単にできるようなことは聞きましたが、私には知識がないので助けてください。 よろしくお願いします。 http://www.finefinefine.jp/web/kiji2068/ ここを見れとも言われたのですが、スクリプトは私には不明です・・・
- ベストアンサー
- JavaScript
- スタイルシートのテーブル枠について
今までテーブルを利用してホームページに簡単な線を つけていました。これをスタイルシートで行うと 微妙にうまくできません・・・お助けください。 すべてＩＥで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが 線が１pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img src="ims/sps.gif" width="600" height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか？ 質問が、うまくまとまってなくてすみません・・・
- ベストアンサー
- HTML
- tableの作成方法について
よろしくお願いします。 表を以下のように作成しました。 表の横のラインに罫線を引きたいのですが記述方法が分かりません。 表の周りにはcssで記述して2pxの罫線を引いてあります。 どなた様か、ご指導の程よろしくお願いします <table> <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt21.gif" alt="" width="168" height="24" /><br /> </td> </tr> <tr> <td class="d"><img src="img/9.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /></td> </tr> <tr> <td class="e"><a href="http://www."><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> ----------------------------------------------------------------ここに横の罫線を引きたいのですが記述方法が分かりません。 <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt22.gif" alt="" width="103" height="23" /><br /> </td> </tr> <tr> <td class="d"><img src="img/1.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /> </td> </tr> <tr> <td class="e"><a href="http://"><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> </table>
- ベストアンサー
- HTML
お礼
回答いただきありがとうございます。 早速やってみます。