人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLのテーブルの表示で困っています。
以下のテーブルを表示するとき、bbbbbのセルそのものを上寄せに表示するにはどのようにすればいいのでしょうか。
セル内の内容を上寄せにするにはvalignなどの設定項目があるようですが、セルそのものの表示位置を指定する方法が見付かりません。
ご存じの方がいらっしゃいましたら、教えてください。

<html>
<body>
<table border="1">
<td>
<table border="1" >
<td>
テスト
</td>
</table>
</td>
<td>
<table border="1">
<tr valign="top">
<td valign"top">
bbbbbb
</td>
</tr>
</table>
</td>
</table>
</body>
</html>

●質問者: takets
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML セル テスト
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● llusall
●18ポイント

こう言う事でしょうか??

赤字のところを指定すれば良いと思います。


<html>

<body>

<table border="1">

<tr height="100">

    <td>

        <table border="1" >

        <tr>

        <td>

        テスト

        </td>

        </tr>

        </table>

    </td>

    <td Valign="top"  >

        <table border="1" id="idBBBB">

        <tr Valign="top"  >

        <td Valign="top"  >

        bbbbbb

        </td>

        </tr>

    </table>

    </td>

</tr>

</table>

</body>

</html>


http://www.yahoo.co.jp (ダミー)

◎質問者からの返答

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


2 ● 潮澤 昴
●19ポイント

何やらタグが抜けまくってるか多いかでおかしくなるんで補完してます。

テスト

ダミーです。画像ありまへん

bbbbbb

↑こうしたいわけですね?

<XMP><HTML><BODY><TABLE border="1"><TBODY><TR><TD><TABLE border="1"><TBODY><TR><TD>テスト<BR><IMG src="dummy.gif" border="0" width="100" height="100" alt="ダミーです。画像ありまへん"></TD></TR></TBODY></TABLE></TD><TD valign="top"><TABLE border="1"><TBODY><TR valign="top"><TD valign="top">bbbbbb</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></BODY></HTML></XMP>

↑のタグでいけるはずです。

※<XMP></XMP>は消して下さい。

テストの後ろの改行と画像は上寄せを明確に見せる為にくっつけたゴミですので消して下さい。

http://nourl

◎質問者からの返答

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


3 ● たか
●19ポイント

<html>

<body>

<table border="1">

<td>

<table border="1" >

<td>

テスト

</td>

</table>

</td>

<td valign="top"> ←ここでは?

<table border="1">

<tr valign="top">

<td valign"top">

bbbbbb

</td>

</tr>

</table>

</td>

</table>

</body>

</html>


http://q.hatena.ne.jp/1153207173

◎質問者からの返答

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

valignを落としていたようです。


4 ● naleringar
●18ポイント

スタイルシートのmarginやpadding、それにtdやtrのheight,widthを組み合わせることで、任意の位置に表示することができると思います。下記の例は質問のテーブルを改良して色々つけてありますので、お手持ちの環境で、どれを外すとどう変わるのか、確認していただければと思います。なお、例文中、tr抜け、"抜けがありました。こういったものも表示崩れの原因になりますので、チェック機能のある作製ソフトを使うのも手です。

とほほのスタイルシート入門

http://www.tohoho-web.com/css/index.htm

????

<html>

<body>

<table border="1" bgcolor="blue">

<tr>

<td height="100" valign="bottom" bgcolor="yellow">

<table border="1" bgcolor="red">

<tr>

<td>テスト</td>

</tr>

</table>

</td>

<td valign="top" height="50">

<table border="1" bgcolor="aqua">

<tr>

<td>bbbbbb</td>

</tr>

</table>

</td>

<td height="100" valign="middle" bgcolor="yellow">

<table border="1" bgcolor="white">

<tr>

<td>テスト2</td>

</tr>

</table>

</td>


</tr>

<tr>

<td height="100" valign="bottom" style="padding-bottom:40px">

<table border="1" bgcolor="red">

<tr>

<td>テスト</td>

</tr>

</table>

</td>

<td valign="top" height="50" bgcolor="yellow" style="margin-top:40px">

<table border="1" bgcolor="aqua" style="margin-top:40px">

<tr>

<td>bbbbbb</td>

</tr>

</table>

</td>

<td height="100" valign="middle">

<table border="1" bgcolor="white" style="margin-left:40px">

<tr>

<td>テスト2</td>

</tr>

</table>

</td>


</tr>


</table>

</body>

</html>

◎質問者からの返答

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

作成ツールも探してみます。


5 ● watson
●18ポイント

テーブルは、矩形( 正方形と長方形 )の完全な格子状を崩すことができな

いみたいです

つまり、あるセルの一辺は隣り合うセルの一辺と必ず隣接するし、必ず

同じ長さになります

セルを結合すれば格子状を崩すことはできるけど、セル自体が上下左右に

寄るわけではないです

http://www.tohoho-web.com/html/td.htm

【配置関連属性】

属性 意味
align=align H3-H4s/e2/N2。セル内データの横方向の配置を指定します。
center:中央表示(H3/e2/N2)
char:指定文字揃え(H4)
justify:均等割付(H4)
left:左寄せ(H3/e2/N2)
right:右寄せ(H3/e2/N2)
valign=valign H3-H4s/e2/N2。セル内データの縦方向の配置を指定します。
baseline:ベースライン揃え(H4/e2/N2)
bottom:下揃え(H3/e2/N2)
center:中央揃え(e2/N2)
middle:中央揃え(H3/e2/N2)
top:上揃え(H3/e2/N2)

上記解説では、『 … セル内データの … 』となってます

「 align 」属性や「 valign 」属性は、他の要素( タグ )では要素自身

の位置指定である場合が多いですが・・・

「 TD align="…" 」が、セル自体の位置ではなく、セルの中の配置物の

位置指定なのは、先ほど言ったことが理由です

もちろん、行の要素である「 TR 」要素に付いても、同じことが言えるみ

たいです

ところが、テーブル自体は位置指定が有効です

つまり、「 TABLE align="位置指定" 」は、テーブル自体の位置指定なの

で、これを利用すれば希望の動作が実現できます

まずは、セルが一つの場合の作例です

<TABLE>

<TR>

<TD align="位置指定" width="幅" height="高さ">

<TABLE>

<TR>

<TD></TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

ポイントは・・・

・ 外側のテーブルのセル、または、内側のテーブルのテーブルにて、位

置指定する

作例は外側のテーブルのセルにて設定したけど、内側のテーブルのテー

ブルにて設定でも、外側のテーブルの中で内側のテーブルが位置指定

に従うことになります

・ 外側のテーブルにて、テーブルまたはセルの幅や高さを指定する

幅や高さを指定しない場合は、配置物のサイズによってセルやテーブ

ルのサイズが変わります

幅や高さを指定しない場合は、余白が発生しない場合があって、その

場合は内側のテーブルが上下左右に寄っているように見えません

外側のテーブルでは、テーブルまたはセルにて幅や高さの指定が必要

になる場合があります

なお、配置物によっては内側のテーブルでも必要になる場合がありま

今回の場合なら・・・

テスト

bbbbbb

<TABLE border="1" width="200" height="100">

<!-- ( HTML規則では、「 TR  」タグは省略禁止らしいので追加 ) -->

<TR>

  <TD>

    <TABLE border="1">

    <TR>

      <TD>

テスト

      </TD>

    </TR>

    </TABLE>

  </TD>

  <TD valign="top">

    <TABLE border="1">

    <TR>

      <TD>

                        bbbbbb

      </TD>

    </TR>

    </TABLE>

  </TD>

</TR>

</TABLE>

なお、 HTML 規格では、どんな場合でも「 TABLE 」「 TR 」「 TD 」は

開始タグと終了タグを省略してはいけない規則になっている、というよう

に自分は教えられましたが・・・

本当に規則としてあるのか、自分では確認できていません

ただし、ひょっとしてブラウザによっては動作が異なる場合があるかもし

れないことなど考えると、省略しないほうが良いだろうと思ってます

◎質問者からの返答

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

TRタグが省略禁止とは知りませんでした。


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ