рисование сложной таблицы - HTML и CSS

Che Guevara · 29.07.2010, 12:37

Доброго дня!
Помогите, plz, с рисованием в ХТМЛ сложной таблицы (как во вложении). Сам пробую - после второго ряда таблица перестаёт быть похожей на нечто близкое к таблице

См. вложение.
Спасибо!

dekameron · 30.07.2010, 05:30

А в чем проблема то была?

Прокомментил, как мог

Che Guevara · 30.07.2010, 11:27

dekameron
Отлично! Спасибо!
На сколько я понял там нужен файл стилей - залей, plz.
Вот смотрю на эту таблицу - в ОгоньЛиса отображается а в Эксплорере нет. Точнее в последнем браузере только внешние границы видны.
Спасибо!

dr.Chas · 30.07.2010, 19:03

Всё очень просто:

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Таблица</title>
<style type="text/css">
	*{padding:0;margin:0;}
	body{width: 800px; margin:auto;padding-top: 50px;}
	table{width: 100%;}
	table td, table th{height: 120px;}
</style>
</head>
<body>
	<table cellpadding="0" cellspacing="0" border="1">
    	<!-- [Первая строчка] -->
    	<tr>
        	<td colspan="4" style="width: 100%;">
                &nbsp;<!-- [Сливаем 4 колонки в одной ячейке] -->
            </td>
        </tr>
    	<!-- [Конец первой] -->
        
    	<!-- [Вторая] -->
    	<tr>
        	<td colspan="3" style="width: 75%;">
                &nbsp;<!-- [Сливаем 3 колонки в ячейке] -->
            </td>
        	<td style="width: 25%;">
                &nbsp;<!-- [Четвертая ячейка отдельно] -->
            </td>
        </tr>
    	<!-- [Конец второй] -->
        
    	<!-- [Третья] -->
    	<tr>
        	<td style="width: 25%;" rowspan="2">
                &nbsp;<!-- [Сливаем 2 колонки (текущую и ту, что будет под ней, в следующей строке)] -->
            </td>
        	<td style="width: 25%;">
                &nbsp;<!-- [Одиночная ячейка] -->
            </td>
        	<td style="width: 25%;">
                &nbsp;<!-- [Одиночная ячейка] -->
            </td>
        	<td style="width: 25%;" rowspan="2">
                &nbsp;<!-- [Сливаем 2 колонки (текущую и ту, что будет под ней, в следующей строке)] -->
            </td>
        </tr>
    	<!-- [Конец третей] -->
        
    	<!-- [Четвертая] -->
        <tr>
        	<td>
                &nbsp;<!-- [Одиночная ячейка (если считать от начала, то это уже вторая. первая описана в блоке выше и слита с теми ячейками)] -->
            </td>
            <td>
                &nbsp;<!-- [Одиночная ячейка (считая от начала уже третья, четвертую, естественно, тоже пропускаем, она выше)] -->
            </td>
        </tr>
    	<!-- [Конец четвертой] -->

        <!-- [Пятая] -->
        <tr>
        	<td style="height: 240px;">
               &nbsp; <!-- [Одиночная ячейка (только делаем в два раза выше от предыдущих)] -->
            </td>
        	<td colspan="2">
               &nbsp; <!-- [Сливаем две в одну] -->
            </td>
        	<td>
               &nbsp; <!-- [Одиночная ячейка (высоту указывать не надо, она будет у всех равна максимальной высоте в строчке)] -->
            </td>
        </tr>
        <!-- [Конец пятой] -->
        
        <!-- [Шестая] -->
        <tr>
            <td colspan="4" style="height: 60px;">
               &nbsp; <!-- [Сливаем 4 ячейки в одну и делаем по высоте поменьше] -->
            </td>
        </tr>
        <!-- [Конец шестой] -->
    </table>
</body>
</html>

30.07.2010, 11:27	#3
Che Guevara Пользователь Регистрация: 27.07.2010 Сообщений: 91	dekameron Отлично! Спасибо! На сколько я понял там нужен файл стилей - залей, plz. Вот смотрю на эту таблицу - в ОгоньЛиса отображается а в Эксплорере нет. Точнее в последнем браузере только внешние границы видны. Спасибо! Последний раз редактировалось Che Guevara; 30.07.2010 в 12:41.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Макрос для сложной выборки	DJspam894	Microsoft Office Excel	3	18.04.2010 10:32
Помогите со Сложной проблемкой	vlad1m1r19	Microsoft Office Excel	0	18.08.2009 19:20
Реализация сложной диаграммы.	BORINSHTEIN	Microsoft Office Excel	2	12.12.2008 11:52
Помогите с созданием сложной таблицы	GrayBrother	Microsoft Office Excel	4	25.08.2008 10:16