下記のようなtableを組みたいのですが。。

| ̄ ̄ ̄ ̄ ̄ ̄ ̄|
| ______|
| |       |
| |       |
| |_____|
| |       |
| |       |
| |_____|
| |       |
| |       |
|_|_____|

なお、CSSはNN4をクリアできる範疇でしか使用できません。
そのため多少複雑なtableの入れ子になってしまっても構わないです。
罫線は全てシングル線です。

どなたかお分かりになる方がおりましたら
よろしくお願いします。

A 回答 (4件)

ああ、勘違い。


上と左はつながっているんですね。

cellpadding とか cellspacing とかを0にして
背景や画像を使用して擬似的につながっていると見せかけるテーブルをつくることが可能ですが・・・

(一般的にテーブル(またはフレーム)と画像の組み合わせが多いレイアウト方法です)

この回答への補足

自己解決方法を記載します。
これよりもスマートな表示方法をごぞんじな方がおられましたら引き続きご回答お願い致します。

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
<tr bgcolor="#FFFFFF">
<td width="100%" colspan="4">
<table border="0">
<tr>
<td>○○○○</td>
</tr>
</table>
<div align="right">
<table width="98%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1" colspan="2" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="1" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
<td>
<table border="0">
<tr>
<td>○○○○</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" colspan="2" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="1" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
<td>
<table border="0">
<tr>
<td>○○○○</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

補足日時:2005/04/05 11:33
    • good
    • 0
この回答へのお礼

そうなんです。
ここが悩みどころでした<上と左

やはりその方法しかありませんでしょうか。。

お礼日時:2005/04/05 11:32

自己解決方法にある「○○○○」を含むテーブルは必要なんですか?



必要だとしても、pタグを使用すれば、ちょっとはコードがすっきりするのではないでしょうか。
    • good
    • 0

素直にテーブルで組めばいいのでは?



<table>
<tr>
<td colspan="2">一番上</td>
</tr>
<tr>
<td rowspan="3">ひだり</td>
<td>右1</td>
</tr>
<tr>
<td>右2</td>
</tr>
<tr>
<td>右3</td>
</tr>
</table>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

この組み方ですと、borderを入れると一番上とひだりのあいだに罫線が入ってしまいます。

上と左は一体でなければならないのです。

お礼日時:2005/04/05 11:20

こんなのでどうでしょうか?


サイズは自由に変更してください。

一つのテーブルに三行のテーブルを入れただけです。

ポイントは中に入れるテーブルの配置を「右寄せ」にして、改行しただけです。



<table border="1" width="22%">
<tr>
<td width="100%" valign="bottom" align="right"> 
<table border="1" width="63%">
<tr>
<td width="100%"> </td>
</tr>
<tr>
<td width="100%"> </td>
</tr>
<tr>
<td width="100%"> </td>
</tr>
</table>
</td>
</tr>
</table>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q字(あざ)について

字(あざ)があるのは100%町や村だけですか?
北海道には、人口5万人以下の「市」があり、実質的には町や村と変わりませんが、そういった場所に「字(あざ)」はあるのでしょうか?
逆に、市のなかで字がある市の例があれば、教えてください。

Aベストアンサー

字(町)名変更、住居表示業務を生業とする者です。市制を敷いていることと、「字」区域を持つことは、基本的に何も関係ありません。大きな市(例えば政令指定都市)の中にも字住所は山のようにありますし、ど田舎でも字を持たない所もあります。字名と町名(市区町村の町ではありません)は原則同じもので、市区町村内の地域(区域)を表す名称に過ぎません。一般表記で「字(大字、小字)」は省略されることが多く、馴染みが薄いかもしれません。町村合併、市制施行などの際に字変更をすることが多く、徐々に少なくなってはいますが、まだまだ「字」は多く残っています。
ちなみに、字(町)名は、各市区町村の議会の議決と都道府県知事に対する届出だけでOKなので、昭和30~50年代に多く変更されました。(地方自治法第260条)

参考URL:http://www.houko.com/00/01/S22/067B.HTM#

Qtableにtable。table同士の間隔を拡大

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

#end{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #40ee22;
}

td.test1{
background-color: #000000;
color: #333333;
}

td.test2 img{
margin: 10px;
}

.test3{
font-size: 12px;
padding: 5px;
}

td.test4{
text-align: center;
}
</style>
<table id="test0">
<tbody>
<tr>
<td>
<DIV style="height:400px; overflow:auto;">

<table id="start">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table class="center">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table id="end">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
...続きを読む

Aベストアンサー

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
</div>
</body>
</html>

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li c...続きを読む

Q仏という字のつく字(あざ)について

あざ名に仏のつく土地だとかつて縁起のよくない場所だった可能性があるでしょうか?解説したHPなどもご紹介ください。

Aベストアンサー

http://www.saigaidensho.soumu.go.jp/saigai/import.2007-03-13.185706-2/

こんなサイトがありますが、本当に不吉であれば改名すると思います。

Q入れ子table個々への文字サイズ指定の方法

tableを入れ子にしてサイトのレイアウトを行っているのですが、
中に入っているtableに別の文字サイズを style="font-size : ○px;"
の様に指定しようとしても、headで指定している文字サイズに邪魔されて
中に入っている小table個々の指定通りに表示されません。
<td>それぞれに一つ一つ入れていくと、指定通り表示されます。
これを、小テーブルに一括して指定するもう少しスマートな方法を御教えください。
確かBOXごとに名前を付けて指定していく方法があったと思うのですが
今探しても見つかりませんでした。どうかお助けください。

Aベストアンサー

<table class="inside" >
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
みたいだとしたら
<style>
table.inside td { font-size:○pt; }
</style>
で指定できると思います。

Q住所の「字(あざ)」の英文表記を教えて

住所「…香取郡森町字港町1丁目」(例)を英文(ローマ字)で書くときはどのように書くのか教えてください。
この場合、「字」は 
(1)「森町」の後ろに付くのか
Aza-Minatomachi, Morimachi 1-chome, … 
(2)「港町」の頭に付くのか
Minatomachi, Morimachi-aza 1-chome, …
どちらが正しいのでしょうか?

Aベストアンサー

元、郵便局員です。

以下の記載方法が「郵便局員にとって」わかりやすい記載方法だと思います。
Return Address には「字」は無くてもいいです。


・・・(番地),Minatomachi 1chome,
Mori-Town, Katori-gun,・・・ pref.(県名)
XXX-XXXX(郵便番号), JAPAN


どうしても字を入れたい!というときは、

・・・(番地), Aza Morimachi 1chome,
以下同じ

になります。
市区町村名のあとに続く地名の「町域(旧郵政省の造語)」の前に大字・字がきますので、港町の頭に字がつきます。

Qテーブル入れ子にしたらNNではダメ?

赤い背景画像を使ったHTMLにテーブルを3個入れ子で載せました。
下のテーブルのセルに白色、中のテーブルのセル色にグレー、一番上のテーブルのセルに白色を指定しました。

そこへラジオボタンをつけたのですが、本来、枠がない丸いボタンのところに赤の枠ができてしまいます。
IEでは問題ないのですが、NN4.7で確認したらこうなっていました。

デザインを変えずに回避する方法があったら教えてください。
また、NN6.*~だったらOKということはありますか?

Aベストアンサー

こんにちは!

<input type="radio" name="address" value="menber" checked style="background-color:#FFFFFF;">

と style="background-color:#FFFFFF;" を追加してください。

NN6は分かりませんが4.7と7で確認しました。

Mac 側は確認していません・・。

QAmazon注文時、住所の字(あざ)

Amazonで商品を注文しようと思い、住所を入力、、、

正式な住所は○○市××字□□ 1111-1 マンション名 000号
なのですが
Googlemap等で検索すると字□□の部分が無く、また字□□を入力しても該当なし

こういう場合は字□□が無くてもでも届くということでしょうか?

Aベストアンサー

字の字を抜いた形が多いです。 まぁ、字の字を抜いた形なら問題無く届く。もし無くても大丈夫ですが、似たようなマンション名があると、間違いを起こす可能性もありえます。郵便番号で有る程度省略は可能ですが、市町村名から書いて頂けると確実性は高まります。
 ネットなどではどうも字名を入れると長く成ることもあり、省略されているケースが多いです。文字数の制限もあるので。
 無くても、届くことは届きますね。

Qwin IEでのtableタグを入れ子にした場合のalign指定

tableを2重で使用し、外側のtableのtdにalign="right"をつけると、内側のテーブルのテキストもrightになってしまいます。

win firefoxで確認しましたらrightになりませんでした。

この問題の回避方法を知っている方がおりましたらご教授いただけないでしょうか?

よろしくお願いいたします。

※ネットで調べようと思ったのですが、情けない事にキーワードがあいまいすぎて膨大な数しかヒットさせる事ができませんでした。

<html>
<body>
<table border="1" width="100%">
<tr>どうでしょうか?<td>
</td>
</tr>
<tr>
<td align="right">
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>

Aベストアンサー

左揃えになってますよ。内側のtableにwidthを指定してみてください。

widthを指定していないために内側のtableがtestという文字の幅になってしまっているのでは?

内側のtableにborder="1"を指定してみれば目に見える形で分かるかと思います。

Q住所の書き方「字(あざ)」は?

こんにちは。
住所を書く際に2行になってしまうときがあります。

□□町○○字△△1-2-3

という住所だった場合に、「字」の後ろか前で改行したいのですが、
「字」という字は○○の後ろにつけるべきなのか、△△の前につけるべきなのか、わかりません。

アドバイスお願いします!

Aベストアンサー

字は△△とセットでしょうから、、△△の前につける方が一般的かと・・・

Qtableタグで入れ子した場合、上そろえはできますか?

<table border="2">
<tr><td>
<table border="3">
<tr><td >--1--</td></tr>
<tr><td >--2--</td></tr>
<tr><td >--3--</td></tr>
<tr><td >--4--</td></tr>
</table>
</td>
<td>
<table border="3"><tr>
<tr><td >--1--</td></tr>
<tr><td >--2--</td></tr>
<tr><td >--3--</td></tr>
<tr><td >--4--</td></tr>
<tr><td >--5--</td></tr>
<tr><td >--6--</td></tr>
<tr><td >--7--</td></tr>
</table>
</td>
<td>
<table border="3"><tr>
<tr><td >--1--</td></tr>
<tr><td >--2--</td></tr>
</table>


と、すると、どうしても上下で中央そろえになってしまうため、番号が左右で合いません。
だからといって、全部に<tr>をたしてしまうと、デザインがしにくくなってしまうので、困っています。
どなたか、解決できるようでしたら、アドバイスをお願いします。

<table border="2">
<tr><td>
<table border="3">
<tr><td >--1--</td></tr>
<tr><td >--2--</td></tr>
<tr><td >--3--</td></tr>
<tr><td >--4--</td></tr>
</table>
</td>
<td>
<table border="3"><tr>
<tr><td >--1--</td></tr>
<tr><td >--2--</td></tr>
<tr><td >--3--</td></tr>
<tr><td >--4--</td></tr>
<tr><td >--5--</td></tr>
<tr><td >--6--</td></tr>
<tr><td >--7--</td></tr>
</table>
</td>
<td>
<table border="3"><tr>
<tr><td >--1--</td></tr>
<tr><td >--2--</td></...続きを読む

Aベストアンサー

<TD ALIGN="CENTER" VALIGN="TOP">
で上付け・中央ぞろいになります。


人気Q&Aランキング

おすすめ情報