Неправильная таблица рендеринга

Question

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1"> 
<tbody> 
    <tr> 
    <td width="150" colspan="2" ></td> 
    <td width="75" colspan="1" ></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1"></td> 
    <td width="150" colspan="2"></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1" ></td> 
    <td width="150" colspan="2" ></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1" ></td> 
    <td width="150" colspan="2" ></td> 
    </tr> 
</tbody> 
</table> 

Эта таблица выглядит

http://gridwizard.rayz.ru/images/correct.gif

но в реальной

http://gridwizard.rayz.ru/images/incorrect.gif

Есть ли какие-либо решения?

Answer 1

Четыре вещи:

1. colspan="1" не требуется. Это значение по умолчанию;
2. Вы должны использовать CSS. То, что вы делаете, устарело;
3. Вам не нужна ширина на каждую ячейку. Достаточно первого (в каждом столбце); и
4. Используйте элемент <col>, чтобы явно разместить ваши столбцы.

Например:

#mytable { width: 300px; height: 100px; border: border-collapse: collapse; } 
#mytable td { border: 1px solid none; } 

с:

<table id="mytable"> 
<col style="width: 75px;"> 
<col style="width: 75px;"> 
<col style="width: 75px;"> 
<tbody> 
    <tr> 
    <td colspan="2">...</td> 
    <td>...</td> 
    </tr> 
    <tr> 
    <td>...</td> 
    <td colspan="2">...</td> 
    </tr> 
    <tr> 
    <td colspan="2">...</td> 
    <td>...</td> 
    </tr> 
    <tr> 
    <td>...</td> 
    <td colspan="2">...</td> 
    </tr> 
</tbody> 
</table> 

Answer 2

Это происходит потому, что вы только когда-либо определяете два столбца, а colspan работает только после того, как определено достаточное количество столбцов для диапазона.

Вы можете создать фиктивную строку из 3-х ячеек, чтобы определить вашу структуру, тогда будет работать spanning. Тем не менее, ваш cellpadding и spacing вызовут небольшой зазор в верхней части таблицы, поэтому я предлагаю применить дополнение к <td> 's vis css, а не непосредственно в таблице. Затем вы можете скрыть свой фиктивный столбец, не стиля его.

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1"> 
<tbody> 
    <tr> 
    <td width="100"></td> 
    <td width="100"></td> 
    <td width="100"></td> 
    </tr> 
    <tr> 
    <td colspan="2">e</td> 
    <td colspan="1">e</td> 
    </tr> 
    <tr> 
    <td colspan="1">e</td> 
    <td colspan="2">e</td> 
    </tr> 
</tbody> 
</table> 

Другой альтернативой является создание надлежащей головки таблицы (<thead> ... </thead>), где вы маркировать столбцы и поместить клетки там.