Разметка таблицы html

Question

Разметка таблицы html

Рейтинг: 0Ответов: 1Опубликовано: 25.05.2011

Здравствуйте!

Столкнулся с такой проблемой.

<table>
    <tr>
        <td rowspan=4>
            меню        
        </td>
    </tr>
    <tr>        
        <td height=10%>
             1
        </td>        
        <td height=20%>
             2        
        </td>        
        <td height=30%>
             3
        </td>        
        <td height=40%>
             4        
        </td>        
    </tr>
</table>

Проблема вот в чем: если поле "меню" по высоте намного длиннее, чем поля 1, 2, 3, 4, то высота этих ячеек в IE настраивается автоматически, не реагируя на свойство height для тега . Получается IE распределяет высоту на своё усмотрение. Выход из такого положения, конечно, есть, обрамить все в доп. таблицу, но мне все же непонятно, почему это не работает в первоначальном варианте.

html

Источник: Stack Overflow на русском

Answer 1

▲ 3

...в коде видна шапка таблицы если бы не colspan=4-единственная клетка td первой строки tr,а следующая строка tr содержит 3-и ячейки td, выстроенные в один ряд.Изменение высоты верхней строки никак не может отразиться на высоте второй строки.Если сверстать блоками табличку вашу,то получится диво-div'ное:перевёрнутая лестница.

Я переверстал вашу табличку блоками,оно и удобней будет для замен содержимого всяких :

Хтмл код:

<div id="menu" > Меню </div>
<div>
<div class="menuitem" style="height:10%" > Элемент меню </div>
<div class="menuitem" style="height:20%" > Элемент меню </div>
<div class="menuitem" style="height:30%" > Элемент меню </div>
<div class="menuitem" style="height:40%" > Элемент меню </div>
</div>

СSS:

#menu{width:100%;height:auto;}
.menuitem{position:relative;float:left;width:25%;}

Исходный код, конечно, удивил,там недоставало ещё пары блоков >tr< для осуществления съедания рядов rowspan'ом.

А теперь второй вариант(сплошная клетка слева и 4 ряда клеток справа):

<table>
<tr>
<td rowspan=5>меню</td>
</tr>
<!--следующий код повторить 3 раза с увеличением height на 1 0 -->
<tr>
<td height=1 0%>текст</td>
<td>текст</td>
<td>текст</td>
<td>текст</td>
</tr>
<!--/конец кода-->
</table>

Но и это ещё не всё.

Способ 3:

<table>
<tr>
<td rowspan=5 colspan=2>меню</td>
</tr>
<tr>
<td height=10%>текст</td>
</tr>
<tr>
<td height=20%>текст</td>
</tr>
<tr>
<td height=30%>текст</td>
</tr>
<tr>
<td height=40%>текст</td>
</tr>
</table>

Последний код-сплошная клетка слева и 4-клетки справа,высота клеток дурацки пересчитывается,спасёт только вёрстка таблицей в двухклеточной таблице.

Всё,больше вариаций нет,как мне кажется.

Надо сразу описывать образ того,что получить хотите,или ссылку на картинку давать.

Удачи!)

Разметка таблицы html

Ответы