Резиновая табличная верстка - HTML и CSS

Dimas0707 · 14.12.2016, 21:37

Доброго времени суток, уважаемые форумчане) Подскажите пожалуйста нубу, что я делаю не так??

Стоит задача, сделать резиновый макет исключительно табличной версткой (не спрашивайте почему.... дивами и так знаю как сделать).
Короче первое задание: скрин 1.

Все норм, делаем табличку, во вторую ячейку посередине вставляю еще одну табличку, задаю ей рамку, ставим проценты и все как надо работает))) (скрин 2).

Но вот вторая задачка..... (скрин 3)И вот тут мозгов уже не хватает))

Я рассуждаю так: добавляем еще одну ячейку, colspan ом сливаем шапку и подвал, чтобы они не были корявыми. Делаем одной ячейке 25% второй 75%. Пока все ровно, все работает (скрин 4).

Но вот как сделать рамку внутри? (как на скрине 3...) Если по аналогии с первым вариантом, вставить таблицу внутрь ячейки и задать ей рамку и ширину в процентах, то вид получается не такой...

Ведь таблица растягивается по ширине относительно ячейки в которую вставлена.... А в задании приведен пример, как будто таблица растянута исходя из ячейки контента первого скрина..... Короче помогите, как сделать второе задание (скрин 3), чтобы сохранить вот эти 2% отступа, чтобы этот отступ был визуально одинаковый в обеих ячейках???? Нужно чтобы скрин 6 и скрин 3 выглядели одинаково..... И при этом не страдала "резиновость.."

pompiduskus · 14.12.2016, 22:11

Вот эта разметка похожа на то что у тебя на рисунке.

Код:

<!DOCTYPE html>
<html>
<head>
<style>
table{
    width: 100%;
}
td.LL{ width: 22%; min-height:200px; margin: 1%; display: block; float:left; }
td.RR{ width: 72%; min-height:200px; margin: 1%; display: block; float:left; }

table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table >
  <tr>
    <th cellpadding="10" colspan="2">HEADER</th>
  </tr>
  <tr>
    <td class="LL">L</td>
    <td class="RR">R</td>
  </tr>
  <tr class="LL">
    <th colspan="2">FOOTER</th>
  </tr>
</table>

</body>
</html>

Что бы быстро проводить тесты с ней
http://www.w3schools.com/code/tryit....e=FAQX52UQVSL1

Naive · 15.12.2016, 02:23

pompiduskus, ему надо внутри этих двух ячеек по новой таблице запустить и так, чтобы поля были у тех ячеек отпинывали эти две таблицы куда надо.
ТС, ключевое слово "поля".

pompiduskus · 15.12.2016, 11:40

А да, точно, я этот момент пропустил. Тогда все еще легче

14.12.2016, 21:37	#1
Dimas0707 Новичок Джуниор Регистрация: 14.12.2016 Сообщений: 1	Резиновая табличная верстка Доброго времени суток, уважаемые форумчане) Подскажите пожалуйста нубу, что я делаю не так?? Стоит задача, сделать резиновый макет исключительно табличной версткой (не спрашивайте почему.... дивами и так знаю как сделать). Короче первое задание: скрин 1. Все норм, делаем табличку, во вторую ячейку посередине вставляю еще одну табличку, задаю ей рамку, ставим проценты и все как надо работает))) (скрин 2). Но вот вторая задачка..... (скрин 3)И вот тут мозгов уже не хватает)) Я рассуждаю так: добавляем еще одну ячейку, colspan ом сливаем шапку и подвал, чтобы они не были корявыми. Делаем одной ячейке 25% второй 75%. Пока все ровно, все работает (скрин 4). Но вот как сделать рамку внутри? (как на скрине 3...) Если по аналогии с первым вариантом, вставить таблицу внутрь ячейки и задать ей рамку и ширину в процентах, то вид получается не такой... Ведь таблица растягивается по ширине относительно ячейки в которую вставлена.... А в задании приведен пример, как будто таблица растянута исходя из ячейки контента первого скрина..... Короче помогите, как сделать второе задание (скрин 3), чтобы сохранить вот эти 2% отступа, чтобы этот отступ был визуально одинаковый в обеих ячейках???? Нужно чтобы скрин 6 и скрин 3 выглядели одинаково..... И при этом не страдала "резиновость.."

14.12.2016, 22:11	#2
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Вот эта разметка похожа на то что у тебя на рисунке. Код: `<!DOCTYPE html> <html> <head> <style> table{ width: 100%; } td.LL{ width: 22%; min-height:200px; margin: 1%; display: block; float:left; } td.RR{ width: 72%; min-height:200px; margin: 1%; display: block; float:left; } table, th, td { border: 1px solid black; } </style> </head> <body> <table > <tr> <th cellpadding="10" colspan="2">HEADER</th> </tr> <tr> <td class="LL">L</td> <td class="RR">R</td> </tr> <tr class="LL"> <th colspan="2">FOOTER</th> </tr> </table> </body> </html>` Что бы быстро проводить тесты с ней http://www.w3schools.com/code/tryit....e=FAQX52UQVSL1 <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/ Последний раз редактировалось pompiduskus; 14.12.2016 в 22:14.

15.12.2016, 02:23	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	pompiduskus, ему надо внутри этих двух ячеек по новой таблице запустить и так, чтобы поля были у тех ячеек отпинывали эти две таблицы куда надо. ТС, ключевое слово "поля". Alar, верни репу!

15.12.2016, 11:40	#4
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	А да, точно, я этот момент пропустил. Тогда все еще легче <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Табличная верстка	Мики6277	HTML и CSS	3	01.08.2013 15:16
Табличная верстка - плывет..!	Runna	Помощь студентам	1	09.05.2012 20:25
резиновая табличная вёрстка	DrStrangeLove	HTML и CSS	10	03.12.2010 12:08
Табличная верстка	BaGiRa	HTML и CSS	1	07.02.2009 12:06