Вопрос выравнивания таблиц 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.Второй табличный тег не может идти туда, где он у вас есть.Вам нужно сделать что-то вроде:

<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

Вы бы попробовали:

<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>

Я добавляю "border = 1" и текст в ячейки, чтобы увидеть изменения.

Answer 3

Второй стол должен быть лучше, если вы поместите его внутри td на первом столе. Затем на втором столе много colspan.

<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 4

Вы получили таблицу непосредственно внутри таблицы, и это не "допустимо".

Принимая во внимание:

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 5

Colspan используется для указания того, сколько COLumns SPAN одного столбца, а не для указания ширины пикселя, как может показаться, что вы пытаетесь сделать здесь.

Вместо этого используйте colspan, чтобы указать, сколько столбцов должен охватывать один столбец, и указать ширину столбцов с использованием стилей CSS или атрибута width.

См. Этот пример:

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