Вопрос по таблице

WalkMan · August 30, 2010

таблицами верстать не умею

как то не сложилось)

а тут клиенту надо таблицами делать

вот и возник вопрос

есть блок с желтым тайтлом и тремя ячейками в ряд

надо ячейки равномерно по ширине таблицы расположить(ширина таблицы фикс/ячейки фикс)

слоями знаю как а вот таблицей и что бы кроссово хз

ПС у меня картинка примера не видна хз что не так

пруф на то что должно быть

_http://walkman.asia/htmlforum/sample.jpg

Edited August 30, 2010 by WalkMan

Great Rash · August 30, 2010

таблицами верстать не умею

Дожили

По теме:

Создайте таблицу из 3-x ячеек, каждой ячейке скажите width: 33.3%; В чем проблема то?

WalkMan · August 30, 2010

Дожили
По теме:
Создайте таблицу из 3-x ячеек, каждой ячейке скажите width: 33.3%; В чем проблема то?

трабла в выранивании красных блоков

получается первый и последнйи флоатить по краям?

psywalker · August 30, 2010

получается первый и последнйи флоатить по краям?

Зачем флоатить? Задай всем 33.3% ширину, как Great Rash сказал, да и всё

Great Rash · August 30, 2010

Какие нафиг флоаты, вы о чем вообще? Все гораздо проще делается:

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

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

		html, body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 10px;
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		table {
			width: 600px;
			border: 0;
			background: red;
		}

		th {
			background: yellow;
		}

		td {
			background: darkred;
		}

		td.divider {
			width: 10px;
			background: 0;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<table cellspacing="0">
		<thead>
			<tr>
				<th colspan="5">1</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					1
				</td>
				<td class="divider"> </td>
				<td>
					2
				</td>
				<td class="divider"> </td>
				<td>
					3
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

WalkMan · August 30, 2010

Какие нафиг флоаты, вы о чем вообще? Все гораздо проще делается:

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

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

		html, body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 10px;
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		table {
			width: 600px;
			border: 0;
			background: red;
		}

		th {
			background: yellow;
		}

		td {
			background: darkred;
		}

		td.divider {
			width: 10px;
			background: 0;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<table cellspacing="0">
		<thead>
			<tr>
				<th colspan="5">1</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					1
				</td>
				<td class="divider"> </td>
				<td>
					2
				</td>
				<td class="divider"> </td>
				<td>
					3
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

вот тож задумался над сепаратарами

извращение конечно но что поделать

надо за верстку таблица доплату брать)))))

psywalker · August 30, 2010

А я бы попроще даже сделал бы

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

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

		html, body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 10px;
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		table {
			width: 600px;
			border: 0;
			background: red;
			border-collapse: separate;
			border-spacing: 10px;
		}

		th {
			background: yellow;
		}

		td {
			background: darkred;
			height: 300px;
		}


	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<table cellspacing="0">
		<thead>
			<tr>
				<th colspan="3">1</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					1
				</td>

				<td>
					2
				</td>

				<td>
					3
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

WalkMan · August 30, 2010

А я бы попроще даже сделал бы

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

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

		html, body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 10px;
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		table {
			width: 600px;
			border: 0;
			background: red;
			border-collapse: separate;
			border-spacing: 10px;
		}

		th {
			background: yellow;
		}

		td {
			background: darkred;
			height: 300px;
		}


	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<table cellspacing="0">
		<thead>
			<tr>
				<th colspan="3">1</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					1
				</td>

				<td>
					2
				</td>

				<td>
					3
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

psywalker

хз

скопипастил и открыл в ие

чтото не захотел он отображаться правильно

сделал с сепараторами

psywalker · August 30, 2010

Для ИЕ можно сделать так

<table cellspacing="10">

Great Rash · August 30, 2010

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

Searcher · August 30, 2010

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

пробовали при помощи дополнительных ячеек?

Great Rash · August 30, 2010

Дык 5 пост...

psywalker · August 30, 2010

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

Согласен тада

WalkMan · August 30, 2010

Всем спасибо

Sign In

Вопрос по таблице

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information