テーブルアライメントの問題html

Question

<table width="100%" border="0"> 
    <table width="600" align="center" bgcolor="#ffffff"> 
    <tr> 
     <td width="600" colspan="120">Banner Image</td> 
    </tr> 
    <tr> 
     <td width="400" colspan="80"></td> 
     <td width="10" colspan="2" bgcolor="yellow"></td> 
     <td width="190" colspan="38"></td> 
    </tr> 
    </table> 
</table> 

アライメントが2番目の行に混乱しています。どのように解決することができますか？

Answer 1

ここには多くの問題があるようです。

まず、これは有効なhtmlではありません。 2番目のテーブルタグは、持っているところには行けません。

<table width="100%" border="0"> 
    <tr><td> 
    <table width="600" align="center" bgcolor="#ffffff"> 
     <tr> 
      <td width="600" colspan="3">Banner Image</td> 
     </tr> 
     <tr> 
      <td width="400"></td> 
      <td width="10" bgcolor="yellow"></td> 
      <td width="190"></td> 
     </tr> 
    </table> 
</td></tr> 
</table> 

あなたの直面する問題はおそらく解決します。しかし、なぜあなたは120列あるのですか？それはどの標準でも間違っているようです。

注意ここでの使用は非常に不適切だと思われるので、私はcolspanを削除しました。

また、どうして外側のテーブルタグを使用するのか自分に尋ねることがあります。より良い方法では行えないことは、あなたのために何もしていません。

Answer 2

Colspanは、ここで実行しようとしているように、ピクセル幅を示すのではなく、単一の列SPANの数を示すために使用されます。

代わりに、colspanを使用して、単一の列のスパン数を指定し、CSSスタイルまたは「幅」属性を使用して列の幅を指定します。あなたが直接、テーブル内のテーブルを持って、 "有効" ではないthatsの

http://jsfiddle.net/xixionia/yt3gf/

Answer 3

：

は、この例を参照してください。

考慮：

I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190 

は、あなたが持っている必要があります。

<table style="width:100%; background-color: #fff;"> 
<tr> 
    <td colspan="3">Banner Image</td> 
</tr> 
<tr> 
    <td style="width: 66.6%"></td> 
    <td style="width: 1.6%; background-color: yellow;"></td> 
    <td style="width: 31.6%"></td> 
</tr> 
</table> 

あなたは明確にレイアウトワイヤーフレームを作るためにテーブルを使用しようとしています。あなたはCSSとhtml5についてもっと研究する必要があります。

この回答はおそらくあなたのコードを修正しますが、あなたが適用しようとしているロジックを修正するものではありません。

Answer 4

2番目のテーブルは、最初のテーブルのtdの中に配置した方がよいでしょう。次に、2番目のテーブルには、多くの列車があります。

<div> 
    <table> 
     <tbody> 
      <tr> 
       <td width="600" colspan="3">Banner Image</td> 
      </tr> 
      <tr> 
       <td width="400"></td> 
       <td width="10" bgcolor="yellow"></td> 
       <td width="190"></td>   
      </tr> 
     </tbody> 
    </table> 
</div> 

テーブルの代わりにdivを使用することをお勧めします。しかし、あなたはまだ選択肢があります。他の投稿を参考にしてください。

Answer 5

あなたはしようとするだろう：

<table width="100%" > 
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">  
<tr>   
<td colspan="120">Banner Image</td>  
</tr>  
<tr>   
<td style="width:400px;" colspan="80">a</td>   
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>   
<td style="width:190px;" colspan="38">c</td>  </tr> 
</table> 
</table> 

を私が変更を確認するために、「国境= 1」とセル内のテキストを追加します。