- 締切済み
HTML 表の中の表
趣味でHPを作り始めたのですが表のところがよくわかりません。 大きな表（外枠）の中に2個目の表を作りたいのですが、どうしても2個目の表が大きな表（外枠）の真ん中に来てしまいます。2個目の表が大きな表の一番上にくっつくようにしたいのですがどうしたらいいのでしょうか。宜しくおねがいします。 <html> <body> <table border="1" height="500" width="300"> <tr> <td> <table border="1" width="100%"> <tr > <td colspan="3" > </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </body> </html>
- その他（趣味・娯楽・エンターテイメント）
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
まっとうなHTMLならtable要素にheightなんて属性は実在しないの でアレですが、display属性の値がtable-cellな要素のvertical- align属性の既定値はmiddleなので、セルの高さが中身よりも大き ければ、当然そうなります。 スタイルシートを学んでvertical-align属性の値をtopにでもすれ ば、希望通りの見た目になりますよ。d_gさんが推薦したページは 同じことを、もう存在しない超古代の属性値で説明していますが、 それが「参考になる内容ではありませんでした」では先が思いやら れますが。tableのheight属性を許すヘボブラウザなら、試してみ ればウマくいくはずなのに。
- d_g
- ベストアンサー率39% (48/121)
手打ち支援のサイトは色々あると思いますよ。 HTML手打ちで作るホームページ講座 [セル内の文字の位置を指定する]の項を参照。
補足
解答ありがとうございます。 せっかく教えていただいたのですが参考になる内容ではありませんでした。
関連するQ&A
- HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。 下のソースで５０と１３０のとこをきちんとエクセルのように枠線揃えたいのですが、 どのようにしたら良いのでしょうか？ よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- 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>
- ベストアンサー
- ホームページ作成ソフト
- 表の幅・高さ１００％表示が、ブラウザによっては見え方が違う事ついて
初めまして。お世話になります。 現在、ホームページを作成していますが、 分からない事がありますので、質問させて頂きました。 ホームページビルダーで、表（tableタグ）を使ったレイアウトを作成中です。 表の幅（width）と高さ（height）を共に１００％で指定し、 表の中をセル（td）で細かく仕切り、その中に画像やテキストを配置し、 レイアウトしたいと思っています。 表のサンプルソースはこんな感じです。細かくてすみません…。 <TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD height="20" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD height="30" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD colspan="5" height="5"></TD> </TR> <TR> <TD rowspan="3"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD rowspan="3"></TD> </TR> <TR> <TD width="700"></TD> </TR> <TR> <TD width="700" height="1" bgcolor="#0000ff"></TD> </TR> </TABLE> 上記のソースでは表の中に、幅７００pｘの青色の四角いスペースを作っています。 しかし、ブラウザで見え方を確認しますと。 InternetExplorer、Opera、Sleipnirではうまく表示できますが、 Firefox、Lunascapeではうまく表示できません。 高さは大丈夫なのですが、 <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD width="700"></TD> <TD width="700" height="1" bgcolor="#0000ff"></TD>等の、 width="700"が無視され、青色の四角いスペースまでもが、１００％表示になってしまいます。 どのようなタグを書けば、どのブラウザでも正しく表示できるようになるのでしょうか？ また、Firefox、Lunascapeのバージョンが古いのですが、 これらの影響もあるのでしょうか？ Firefoxがバージョン1.5.0.2で、Lunascapeがバージョン3.5.4です。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 表を横に並べる
メモ帳でＨＰ作っています。 表が縦に長くなったので ２つに分割して横に並べたいのです。 で分割出来て横にも並べたのですが 全体的に小さくなってしまい、 少しでも数字を変えると高さが合わなくなって しまいます。 表は上で高さを合わせたいです。 どうすればいいのでしょうか？。 <table border="0" width="600"> <tr> <td Width="250"> <table border cellpadding="1"> <tr> <td VALIGN="middle" width="100"> あいうえお</td> <td VALIGN="middle" width="260"> かきくけこ</td> </tr> </table> </td> <td width="250"> <table border cellpadding="1"> <tr> <td VALIGN="middle" width="100"> さしすせす</td> <td VALIGN="middle" width="260"> なにぬねの</td> </tr> </table> </td> </tr> </table>
- 締切済み
- ホームページ作成ソフト
- htmlを使って表を作っています
自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか？わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか？ 練習問題と自分が作ったソース載せます。 <html> <h4><b>１問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">～</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 ＜第一問：幅400、高さ400、上のセルの数が２つ、下のセルの数が２つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。＞ どうですか？うまく表示されましたか？ レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">～</table> ・<tr bgcolor="★">～</tr> ・<td bgcolor="★">～</td> ★には色指定値(例：#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列（一行）に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 ＜第二問：幅50、高さ50、１つのセルのテーブル全体の背景を赤くしてみましょう。 赤→#ff0000＞ ＜第三問：幅150、高さ100、上のセルを３つ、下のセルを３つのテーブルを作り、 上３つのセルの背景を青くしてみましょう。 青→#0000ff＞ ＜第四問：幅100、高さ100、上のセルを２つ、下のセルを２つのテーブルを作り、 左上のセルの背景を緑にしてみましょう。 緑→自分で見つけて下さい＞
- 締切済み
- ホームページ作成ソフト
- このテーブルタグの中の色を白にするには
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます（画像<A href="images/001_base_1.gif">１</A>・<A href="images/001_base_2.gif">２</A>・<A href="images/001_base_3.gif">３</A>・<A href="images/001_base_4.gif">４</A>）</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色（背景の色）になっています。 これを透明でなく白にする方法をおしえてください！
- 締切済み
- HTML
- HTMLのソース
HPを今作ってますが、IEではまったく問題なく正常に表示されるのに、ネスケでは欠ける部分がでます。どちらかにしか対応しない独自拡張タグではなく、普通のテーブルです。以下がソースです。 <HTML> <HEAD> <TITLE>メイン</TITLE> </HEAD> <BODY bgcolor="000000"> <TABLE WIDTH=700 HIGHT=600 BORDER=1> <TABLE BORDER=1> <TR><TD WIDTH=600 HEIGHT=100>これはテスト表示です</TD><TD WIDTH=100 HEIGHT=100><IMG SRC=TOP2.GIF></TD> </TR> <TABLE WIDTH=700 HEIGHT=200 BORDER=1> <TD><IMG SRC=TOP1.JPG></TD> </TR> </TABLE> <TABLE WIDTH=700 HEIGHT=100 BORDER=1> <TD>これはテストです</TD> </TABLE> </TABLE> 上から８行目の ◎<TR><TD WIDTH=600 HEIGHT=100>これはテスト表示です</TD><TD WIDTH=100 HEIGHT=100><IMG SRC=TOP2.GIF></TD> のテーブルがネスケでは表示されず、下の二つしかでません。IEでは完璧です。いちおう。大きいテーブルに小テーブルを入れているのですが（慣れてないもんで、配置をはっきりさせるため）何か変ですか？まぁ慣れっこの人から見たら、変なとこ山盛りでしょうが、こんな簡単なテーブルで表示差があるとは思いません。どうでしょう？どなたかお時間のあるかたお返事まってます。大変たすかります。
- ベストアンサー
- HTML
- テーブルタグの余白
テーブルタグを使ってHPのレイアウトを整えようと思っているのですが、セルの中に画像をいれるとどうしても下に余白ができてしまい困っています。対策方を教えて下さい。セルの大きさも画像の大きさにあわせています！！ <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" > <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> <Tr> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> <Td WIDTH="108" HEIGHT="128"> aiueo </Td> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> </Tr> <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> </Table>
- ベストアンサー
- Windows 95・98
補足
言ってられる意味がわかりません。d_gさんには回答のお礼もしているし、それこそ内容が古かったので参考にならなかったと言ったまでです。table要素のheight属性が使えるブラウザはヘボなのですか？私が見たHTML入門のサイトにはほとんどtableの大きさを指定するのにwidthとheightが書いてあるのですが。それから先が思いやられるとかよけいなお世話です。どこの技術者か博士か知りませんが私はただ趣味で楽しくやってるだけですから。あなたみたいな物言いをする方に教わろうとは思いません。質問をしてこんな不愉快な回答をもらったのははじめてです。