Не получается таблица.

SCHNITZER · November 23, 2009

Это моя первая таблица.

Хочу сделать вот такую таблицу, которая будет "начинена" изображениями:

Вот так она должна объединяться:

http://i706.photobucket.com/albums/ww68/szr4/tb.gif

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<HTML	XMLNS="http://www.w3.org/1999/xhtml"	LANG="ru"	XML:LANG="ru"	>

		<HEAD>




		</HEAD> 

				<TABLE	BORDER='1'>


						<TR>
								<TD		WIDTH='48'></TD>		<TD		WIDTH='210'></TD>		<TD		WIDTH='22'></TD>		<TD		WIDTH='22'></TD>		<TD		WIDTH='210'></TD>		<TD		WIDTH='48'></TD>
						</TR>


						<TR>
								<TD		COLSPAN='2'	WIDTH='258'>12a</TD>		<TD		COLSPAN='2'	WIDTH='44'>34a</TD>		<TD		COLSPAN='2'	WIDTH='258'>56a</TD>
						</TR>


						<TR>
								<TD		WIDTH='48'>1b</TD>			<TD		COLSPAN='2'		WIDTH='232'>23b</TD>		<TD		COLSPAN='2'	WIDTH=232>45b</TD>		<TD	WIDTH='48'>6b</TD>
						</TR>


						<TR>
								<TD		COLSPAN='6'>123456C</TD>
						</TR>

				</TABLE>





		</BODY> 

	</HTML>

_________________________________________________________________________

Без "холостой" первой строки никак не получается выравнять таблицу. Как быть? (col - тоже не помогает, тем более, что я не хочу его использовать ввиду постепенной загрузки).

Edited November 23, 2009 by SCHNITZER

Justnewone · November 23, 2009

ОТкрывающий тег боди забыли

и таблица будет самая обыкновенная, без колспанов вообще.

тупо 3 TR, в котором в каждом по 6 TD, в самом первом TR всем ячейкам надо записать соответствующие им ширины, и всем им через TR.first TD{height:32px}

Для второго ряда ширину указывать уже не надо, только высоту TR.second TD{height:90px}

Ну и для третьего TR.third TD{height:24px}

Ну и, для гарантии и кроссбраузерности я бы добавил ширину самой таблице равную сумме всех ее ячеек в ряду.

Edited November 23, 2009 by Justnewone

SCHNITZER · November 23, 2009

Спасибо за ответ!

Тег <BODY>- потер нечаянно

TR.third TD{height:24px} - что вообще это значит? Я такого не походил. Где мне можно посмотреть информацию?

psywalker · November 23, 2009

Спасибо за ответ!
Тег <BODY>- потер нечаянно
TR.third TD{height:24px} - что вообще это значит? Я такого не походил. Где мне можно посмотреть информацию?

http://htmlbook.ru/html/

Searcher · November 24, 2009

Топикстартер со стилями похоже вообще не знаком, читайте внимательно про css и html и справочник по стилям css проштудируйте. И на всякий случай еще скажу, что все атрибуты тэгов относящиеся к оформлению устарели лет на 10. Все оформление через css, а в html только структура.

Вот это утверждение надо на самом видном месте дать. Не понимаю почему столько людей приходят с настолько устаревшими представлениями о верстке? Где вы свой код делали? Почему тэги и их атрибуты прописными буквами? Зачем пустой head в таблице? Почитайте теорию сначала, а потом начинайте что-то делать!

SCHNITZER · November 25, 2009

Со стилями знаком, с их практическим применением - нет. HTML и CSS проштудировал. Теперь остается вопрос - правильная связка значений и где какие применять. Я совсем новенький, еще не понимаю.

Где брал информацию... Да и в частности на этом сайте.

Я хорошо знаю 3д, там одно и тоже можно сделать разными способами, а правильный расскажут на форуме, желательно, в спокойных тонах. Так что дерзайте.

Писал в блокноте (NOTEPAD++). Просто мне удобнее писать прописными буквами, нагляднее. А чем это плохо?

Пустой <head> - потому что удалил из кода информацию, что бы вас не нагружать лишним. Как раз по этому и не было закрывающего тега.

По поводу теории. http://htmlbook.ru/html/table.html И где тут сказано, что необходимо оформлять таблицу с помощью css. Тут в подробностях описан, как я понимаю, устаревший способ.

panig · November 26, 2009

SCHNITZER, у Вас xhtml doctype, а в нем нужно в нижнем регистре писать.

«Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML)» Википедия

А насчет css. Это же стили оформления. Без них многие штучки будут закрыты в общем-то.

» Тут в подробностях описан, как я понимаю, устаревший способ.

Да нет, но лучше все css прописать. Как вариант ваш код html будет проще выглядеть.

Edited November 26, 2009 by panig

SCHNITZER · November 30, 2009

Justnewone читаю читаю, не могу понять, что Вы имеете ввиду. Вы не могли бы показать пример кода этой таблицы, на котором я бы понял этот метод, и мог бы его в дальнейшем использовать. А то у меня не получается.

Например, как же по 6 колонок, когда в 3 ряду их всего одна. По нулям остальные, или как...

DjTarik · November 30, 2009

Блин, так и хочется написать готовый вариант)))

SCHNITZER · November 30, 2009

Ну пжлста, напишите. Всего один пример современного подхода, и я во всем разберусь.

Justnewone · November 30, 2009

Ну пжлста, напишите. Всего один пример современного подхода, и я во всем разберусь.

<style type="text/css">

TABLE{
	table-layout:fixed;
	border-collapse:collapse;
	}

	TH, TD{
		height:90px;
		padding:.3em .4em;
		border:2px solid #808080;
		font-weight:normal;
		text-align:left;
		vertical-align:top;
		}

	THEAD TH{
		height:32px;
		}

	.end TH,
	.end TD{
		height:24px;
		}

</style>

<table border="1" cellpadding="4" cellspacing="0" width="560">
	<thead>
		<tr>
			<th scope="col" width="48">Title1</th>
			<th scope="col" width="210">Title2</th>
			<th scope="col" width="22">Title3</th>
			<th scope="col" width="22">Title4</th>
			<th scope="col" width="210">Title5</th>
			<th scope="col" width="48">Title6</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Row1</th>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
		</tr>
		<tr class="end">
			<th scope="row">Row2</th>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
		</tr>
	</tbody>
</table>

Great Rash · November 30, 2009

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 8px Tahoma;
		}

		body {
			margin: 10px;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;
			border: 0;
		}

		table td {
			padding: 0;
			text-align: center;
			border: #000 1px solid;
		}

		table .first td {
			height: 32px;
		}

		table .second td {
			height: 90px;
		}

		table .third td {
			height: 24px;
		}

		table td.side {
			width: 48px;
		}

		table td.big {
			width: 210px;
		}

		table td.center {
			width: 22px;
		}
	</style>
</head>

<body>

	<table cellspacing="0">
		<tr class="first">
			<td class="side"></td>
			<td class="big"></td>
			<td class="center"></td>
			<td class="center"></td>
			<td class="big"></td>
			<td class="side"></td>
		</tr>
		<tr class="second">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="third">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

</body>
</html>

SCHNITZER · November 30, 2009

Спасибо большое!

НО!

Вот так она должна объединяться:

http://i706.photobucket.com/albums/ww68/szr4/tb.gif

Вопрос то именно в этом. Как сделать, что бы было подобное объединение.

Вы пропустили самое важное )

Вот как таблица должна в итоге выглядеть:

http://i706.photobucket.com/albums/ww68/szr4/a.gif

Edited November 30, 2009 by SCHNITZER

Justnewone · November 30, 2009

Спасибо большое!
Вот как таблица должна в итоге выглядеть:
http://i706.photobucket.com/albums/ww68/szr4/a.gif

Используйте колспан. Жаль что сразу не нарисовали что Вам надо.

Edited November 30, 2009 by Justnewone

Great Rash · November 30, 2009

Объяснять надо доходчивей. Такое объединение пожалуй не получится сделать. Выход - использовать 3 таблицы. Верх, середину и низ.

SCHNITZER · November 30, 2009

Как же не нарисовал... Прочитайте внимательно вопрос и текст темы.

Я, конечно, узнал много нового, но заморочили вы меня на неделю ))) Так-то все ясно.

Чуть позже выложу код, с учетом всех замечаний, там посмотрим.

Justnewone · November 30, 2009

Как же не нарисовал... Прочитайте внимательно вопрос и текст темы.
Я, конечно, узнал много нового, но заморочили вы меня на неделю ))) Так-то все ясно.
Чуть позже выложу код, с учетом всех замечаний, там посмотрим.

Сообщение отредактировал SCHNITZER - 23.11.2009, 18:07

Очень смешно.

SCHNITZER · November 30, 2009

Опубликовал тему, сразу же отредактировал. Первый ответ был после редактирования. Что смешного?

Justnewone · November 30, 2009

Опубликовал тему, сразу же отредактировал. Первый ответ был после редактирования. Что смешного?

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

SCHNITZER · November 30, 2009

Гхм...

Что-то мне подсказывает...

Justnewone, не сочтите за труд, можно посмотреть Ваши работы?

Justnewone · November 30, 2009

Гхм...
Что-то мне подсказывает...
Justnewone, не сочтите за труд, можно посмотреть Ваши работы?

Нет, а зачем Вам? Если что-то не нравится, просто не берите на вооружение мой совет. Зачем Вам мои работы?

SCHNITZER · November 30, 2009

Я все понял.

Спасибо.

Sign In

Не получается таблица.

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information