Вёрстка таблицы

[Sannis]

Есть таблица (упрощённый вариант):

 

<table>
    <tr>
        <td>Нажмите на кнопку чтобы посмотреть сообщение</td>
        <td rowspan="3">Здесь много текста, строк 20.</td>
    </tr>
    <tr>
        <td><div id="msg">Сообщение</div></td>
    </tr>
    <tr>
        <td><input type="button" name="submit" value="Показать сообщение" onclick="my_show_div(document.getElementById('msg'));" /></td>
    </tr>
</table>

 

В этом случае таблица получается "высокая" и в левом столбце 2 строки маленькие, а 3я — высокая очень. А хочется чтобы средняя ячейка была большой, а нижняя под размер кнопки. Пробывал height="1%" — не выходит. Как это можно осуществить?

 

P.S. На дивах верстать не хочу.

[Soi]

если конечная цель заключается в том, чтобы кнопка была в самом низу и чтобы за ней был фон, отличный от фона ячеек выше, то не вижу иного выхода:

<table>
<tr>
	<td>Нажмите на кнопку чтобы посмотреть сообщение</td>
	<td rowspan="3">Здесь много текста, строк 20.</td>
</tr>
<tr>
	<td><div id="msg">Сообщение</div></td>
</tr>
<tr>
	<td valign="bottom"><div id="button_bg"><input type="button" name="submit" value="Показать сообщение" onclick="my_show_div(document.getElementById('msg'));" /></div></td>
</tr>
</table>

 

или конечная цель другая?

Изменено 1 Октября 2007 пользователем Soi

[Sannis]

Другая. Проходили... Это только кнопку внутри ячейки вниз уберает, а сама ячейка меньше не становится

Нужно чтобы строка с кнопкой была узкой, а над ней ячейка была шире. причём её высоту тоже нельзя жёстко задать, неизвестно сколько текста будет справа...

 

P.S. Или проще в эту ячейку кинуть div с границей верхней для видимого эффекта?

[Soi]

Другая. Проходили... Это только кнопку внутри ячейки вниз уберает, а сама ячейка меньше не становится

Нужно чтобы строка с кнопкой была узкой, а над ней ячейка была шире. причём её высоту тоже нельзя жёстко задать, неизвестно сколько текста будет справа...

 

P.S. Или проще в эту ячейку кинуть div с границей верхней для видимого эффекта?

да, проще оформить именно с div.

Только вот между второй и третьей строкой у вас останется белая граница, при данном оформлении.

[Sannis]

да, проще оформить именно с div.

Спасибо, тогда не буду пытаться

[Soi]

можно еще и так:

<table>
<tr>
	<td>Нажмите на кнопку чтобы посмотреть сообщение</td>
	<td rowspan="3">Здесь много текста, строк 20.</td>
</tr>
<tr>
	<td><div id="msg">Сообщение</div></td>
</tr>
<tr>
	<td><input type="button" name="submit" value="Показать сообщение" onclick="my_show_div(document.getElementById('msg'));" /></td>
	<td></td>
</tr>
</table>

так будет, возможно, правильней даже.

конечно в правом столбце появится еще одна строка, но ее можно правильно оформить и она не будет привлекать к себе много внимания.

Зато не будет лишней границы между 2 и 3 строкой в левом столбце.

Изменено 1 Октября 2007 пользователем Soi

[Sannis]

У меня так и было в начале, но тогда если кнопка посередине, то нужно следить за тем чтобы граница колонок была посередине, это тоже морока... Но кто знает, чем это закончится в итоге...

[vasyast]

Проще сделать три таблицы, вложенные в одну с двумя колонками. Фигли там =)

[asoloviev]

А так не интереснее?

http://veerle.duoh.com/sandbox/csstutorial...sv2/table2.html

[Sannis]

Проще сделать три таблицы, вложенные в одну с двумя колонками. Фигли там =)

Ага, таблица - див - таблица - скрывающийся див. Ляпота.

 

А так не интереснее?

http://veerle.duoh.com/sandbox/csstutorial...sv2/table2.html

Это можно и без foota сделать же?

[Arhar]

высоту тээра и тэдэ задать в пикселях?

[Sannis]

высоту тээра и тэдэ задать в пикселях?

Не проканывает, первое что я сделал. Они сволочи обрабатываются по порядку и если во второй строке высоту не прописывать - то на высоту третьей он уже внимания не обращает (говорю за Оперу). А задавать высоту второй ячейки я не хочу, потому что у меня высота второго столбца (с текстом) задан в пикселях. Но как вариант задать высоту ячейки под сообщения по визуально приятному минимуму, если что потом увеличится под сообщение.

[xRay]

С rowspan без указания высоты 2-ой ячейке (в первом столбце) нифига не выйдет.

Варианты уже предложены или таблицами или дивами.

 

Ну вот еще малость для изврата:

<TD id="cel_main" onresize="document.all('cell_1').height=document.all('cell_main').height"></TD>

[Sannis]

Да, гемор. вложенной таблицей не получилось, тоже самое, без задания высоты второй ячейки не пашет. А если делать несколько дивов, то потом сложно отпозиционировать сообщение отображающееся посередине пустого места... Остаётся только либо жёстко задавать в пикселях всю таблицу, или при загрузке яваскриптом рассчитывать высоту этой строки, нда...