テーブルタグのセルの位置指定について

このQ&Aのポイント
  • 質問文章では、同じ<table align='center'>を用いていますが、セルの中身の行揃えが代わってしまいます。タグ1ではセルの中身が自動的に左詰めになりますが、タグ2では中央ぞろえになってしまいます。
  • 質問者はなぜタグ1のようにセルの中身が左詰めになるのか分かりません。
  • 初心者的な質問ですが、タグの使い方について教えていただけますでしょうか。
回答を見る
  • ベストアンサー

同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。

どちらも<table align="center">を用いています。 ですが、タグ1は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ2のセルの中身は、中央ぞろえになってしまいます。 タグ1のように、<table align="center">を用い、セルを左詰め指定(<align="left">)をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ1------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10">&nbsp;</td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ2------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td>&nbsp;</td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • pasocom
  • ベストアンサー率41% (3584/8637)
回答No.1

両方のタグを私が試してみた結果では両方とも左揃えになるようです。 「align」は、<table>タグ内に直に記述しても意味無く、デフォルトの「左揃え」になってしまうのです。 「align」は<td>タグ内に記述するのが正しいと思います。

関連するQ&A

  • オブジェクトを指定してください、のエラーについて

    HTML作業中、下記のようなエラーメッセージが表示されます。 エラー:オブジェクトを指定してください。 文字:3 コード:0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか?それと、 ライン:200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか? メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック!" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif">&nbsp;</td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>

  • IE セル間に隙間が・・・

    HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか?よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td>        ------3 <td valign="top" >*** <br> </td>

    • ベストアンサー
    • HTML
  • テーブル内でのランダムな並べ変え

    全然知識がないのですがよろしくお願いします。 タグで <table border="0"> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">&nbsp;&nbsp;◆タイトル</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">&nbsp;&nbsp;◆タイトル</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">&nbsp;&nbsp;◆タイトル</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/ ここを見れとも言われたのですが、スクリプトは私には不明です・・・

  • HTML::テーブルのセルスペーシング、セルパディングについて

    テーブルについてお聞きします。どうか助けてください。 以下のようなソースがあります。 <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#DED6BF"> <tr> <td><table width="600" border="0" cellpadding="3" cellspacing="1" bgcolor="#DED6BF"> <tr> <td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話開始時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td> <td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話終了時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話先</strong></font><img src="image/spacer.gif" width="86" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話時間</strong></font><img src="image/spacer.gif" width="86" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>料金</strong></font><img src="image/spacer.gif" width="86" height="1"></td> </tr> </table></td> </tr> </table> 一番左のセル(通話開始時間)の幅は150で、そのセルに透明gifをいれて、テーブルがくずれないようにしています。その透明gifの長さは"136"です。 なぜ透明gifの長さは136なのでしょうか?14を引く理由がわかりません。 テーブルのcellpadding="3"とcellspacing="1"なので透明gifの長さは"143"なのではないでしょうか?

  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <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>

  • background-color css

    目的:社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

  • ハーボットのフレーム。

    某サイトでハーボットのフレームの枠を配っていたので つけようと思ってやっていましたが、 枠は出来たのですがその中にハーボット本体を入れることが どうしても出来ないんですけどどうやっていれるのでしょうか? 因みにhtmlは。 <TABLE width="142" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD rowspan="3" width="14" height="245"><IMG src="***/habwaku02.gif" width="9" height="247" border="0"></TD> <TD width="125"><IMG src="***/habwaku01.gif" width="127" height="37" border="0"></TD> <TD rowspan="3" width="6" height="245"><IMG src="***/habwaku03.gif" width="9" height="247" border="0"></TD> </TR> <TR> <TD width="125" align="center"><IMG src="***/hw1.gif" width="125" height="199" border="0"></TD> </TR> <TR> <TD width="125"><IMG src="***/habwaku04.gif" width="127" height="9" border="0"></TD> </TR> </TBODY> </TABLE> で=***/habwaku0*.gifの部分は全てうまく画像が出来ました。 あとはここに画像URLを入れるだけとなっていましたが 入れ方を教えてください。

  • 同一セルでの垂直方向の位置揃えについて

    同一セルでの垂直方向の位置揃えについて よろしくお願いいたします。 tableタグを使用して表を作成しております。 最後の列のセルだけテキストとimgを配置したいのですが、 その際、テキストは必ずセル内中央に、imgは必ずセル内下部に配置するような 事は可能でしょうか? 行によって高さが変わるのでmargin,padding等ではセル内の特定の位置に表示できず、 vertical-alignをセルに適用すればどちらかは出来るのですが、 同一セル内で vertical-align:middle; vertical-align:botom; のような事が同時に実現出来る指定などあるでしょうか? 下記のような感じなんですが、 <table> <tr>  <td>このセルは高さが100px</td>  <td>テキストは中央にimgは下部に配置したいセル    <a href="a.html"><img src="a.jpg" height="10" /></a>  </td> </tr> <tr>  <td>このセルは高さが200px</td>  <td>テキストは中央にimgは下部に配置したいセル    <a href="b.html"><img src="a.jpg" height="10" /></a>  </td> </tr> </table> どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 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>