Форум Сайтостроение Веб-строительство

Помогите мне сделать таблицу на дивах.

12
F
На сайте с 31.01.2013
Offline
8
FDima
2488

Помогите мне сделать таблицу на дивах.

Есть таблица:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="top" width="70%" height="100%" bgcolor="#808080" align="center">первое
<div align="center">
<center>
<table border="0" width="95%" cellspacing="0" cellpadding="5" height="100%">
<tr>
<td align="center" colspan="2" bgcolor="#808000">четвертое</td>
</tr>
<tr>
<td align="center" height="20" bgcolor="#3333FF">пятое</td>
<td align="center" height="20" bgcolor="#3333FF">шестое</td>
</tr>
<tr>
<td valign="top" colspan="2" bgcolor="#808000">седьмое</td>
</tr>
<tr>
<td height="20" valign="top" bgcolor="#3333FF">восьмое</td>
<td height="20" valign="top" bgcolor="#3333FF">девятое</td>
</tr>
<tr>
<td valign="top" colspan="2" bgcolor="#808000">десятое</td>
</tr>
<tr>
<td height="20" valign="top" bgcolor="#3333FF">одиннадцать</td>
<td height="20" valign="top" bgcolor="#3333FF">двенадцать</td>
</tr>
<tr>
<td valign="top" colspan="2" bgcolor="#808000">тринадцать</td>
</tr>
<tr>
<td height="20" valign="top" bgcolor="#3333FF">четырнадцать</td>
<td height="20" valign="top" bgcolor="#3333FF">пятнадцать</td>
</tr>
</table>
</center>
</div>
</td>
<td valign="top" width="15%" bgcolor="#33CCFF" height="100%" align="center">
два
</td>
<td valign="top" width="15%" bgcolor="#CCCCFF" height="100%" align="center">
три
</td>
</tr>
</table>

Ее нужно перевести в CSS.

нужно срочно. заплачу. голова не соображает. душно и жарко

Наблюдатель со стажем
Garin33
На сайте с 31.08.2009
Offline
169
Garin33
#1

Table специально придуман для таблиц. Велосипед не выдумывайте.

Потому что Drupal - это круто.
F
На сайте с 31.01.2013
Offline
8
FDima
#2
Garin33:
Table специально придуман для таблиц. Велосипед не выдумывайте.

мне нужно таблицу на <div>

K
На сайте с 28.05.2011
Offline
40
kinto
#3

Введите содержимое

F
На сайте с 31.01.2013
Offline
8
FDima
#4

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

---------- Добавлено 17.08.2013 в 15:50 ----------

Еще раз говорю, что на деле большинство спецов раздутые языком. такое простое задание даже некому выполнить. С такое проблемой уже не раз сталкиваюсь. на языке знает все, а на деле - пустое место.

Только и способны репутацию мне портить. Я ведь сказал, что заплачу.

8 развенчанных SEO-мифов. Часть Автоматизация поиска клиентов для Как получить реальную отдачу
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#5
FDima:
Я ведь сказал, что заплачу.

не плачь...

http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
nezabor
На сайте с 19.07.2010
Offline
152
nezabor
#6

а еще вам bootstrap поможет 100500%

Чудес не бывает...
T
На сайте с 19.09.2012
Offline
29
turen
#7

Отвлекаясь от вопроса целесообразности, пример мне стал интересен, поэтому вариант реализации привожу ниже.

Ваша таблица не везде отображается одинаково, как минимум в части обработки table height="100%" для внутренней таблицы, которая внутри <div> и внутри <center> (например, IE и Chrome думают на этот счёт по-разному - вот ваша таблица в действии).

Вот примерно (с оговорками - примечание см. ниже кода), что может получиться из этой таблицы: 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<style type="text/css">



html, body { height: 100%; }

body { overflow: hidden; margin: 0; }



.t1 { width: 100%; height: 100%; position: relative; }

.t1c1 { width: 70%; background-color: #808080; position: absolute; }

.t1c2 { width: 15%; background-color: #3cf; position: absolute; margin-left: 70%; }

.t1c3 { width: 15%; background-color: #ccf; position: absolute; margin-left: 85%; }

.t1c1, .t1c2, .t1c3 { height: 100%; text-align: center; vertical-align: top; }

.t1c1div { text-align: center; }



.t2 { display: table; }

.t2r1, .t2r2 { display: table-row; }

.t2r1c, .t2r2c { display: table-cell; }



.t2 { width: 95%; height: 100%; margin: auto; }

.t2 .tc { padding: 5px; }

.t2r1 { height: 30px; }

.t2r1c { background-color: #808000; text-align: left; height: 30px; }

.center { text-align: center !important; }

.t2r2c1, .t2r2c2 { width: 50%; height: 100%; text-align: left; background-color: #33f; float: left; }



</style>



</head>

<body>

<div class="t1">

	<div class="t1c1">первое

		<div class="t1c1div">

			<div id="t2" class="t2">

				<div class="t2r1">

					<div class="t2r1c"><div class="tc center">четвертое</div></div>

				</div>

				<div class="t2r2">

					<div class="t2r2c">

						<div class="t2r2c1"><div class="tc center">пятое</div></div>

						<div class="t2r2c2"><div class="tc center">шестое</div></div>

					</div>

				</div>

				<div class="t2r1">

					<div class="t2r1c"><div class="tc">седьмое</div></div>

				</div>

				<div class="t2r2">

					<div class="t2r2c">

						<div class="t2r2c1"><div class="tc">восьмое</div></div>

						<div class="t2r2c2"><div class="tc">девятое</div></div>

					</div>

				</div>

				<div class="t2r1">

					<div class="t2r1c"><div class="tc">десятое</div></div>

				</div>

				<div class="t2r2">

					<div class="t2r2c">

						<div class="t2r2c1"><div class="tc">одиннадцать</div></div>

						<div class="t2r2c2"><div class="tc">двенадцать</div></div>

					</div>

				</div>

				<div class="t2r1">

					<div class="t2r1c"><div class="tc">тринадцать</div></div>

				</div>

				<div class="t2r2">

					<div class="t2r2c">

						<div class="t2r2c1"><div class="tc">четырнадцать</div></div>

						<div class="t2r2c2"><div class="tc">пятнадцать</div></div>

					</div>

				</div>

			</div>

		</div>

	</div>

	<div class="t1c2">два</div>

	<div class="t1c3">три</div>

</div>



</body>

</html>

Этот пример в действии - тут.

Примечание. У меня в Chrome моя таблица отображается почти как ваша в IE (т.к. в Chrome 28 страница отображается, как я понимаю, не так, как задумано), за исключением ширины синих ячеек (которых по две в строке). Ширина этих ячеек у вас не указана, я поставил по 50%, а браузер думает немножко иначе (например, 45%/55%).

Использовать table-cell ещё и для этих div я не стал, т.к. возможно, это не столь важно.

В Chrome 28 table height=100% из вашего примера для внутренней таблицы (по крайней мере у меня) не имеет эффекта, т.к. вышестоящие <div> и <center> имеют высоту не 100%.

Ещё один пример без использования display: table/table-row/table-cell, но с использованием Javascript - тут.

Javascript/JQuery применяется для решения проблемы одновременного использования строк с фиксированной высотой совместно со строками с плавающей высотой, заданной в процентах, не применяя таблицы (в т.ч. через display: table/... и т.п.).

Ссылки на рабочие примеры привожу в соответствии с пп.1 п.3 правил, в качестве иллюстрации к утверждениям и для удобства сравнения.

Как лучше для оптимизации Оптимизация сайта для планшетов DIV 100% height в
dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#8
FDima:
Еще раз говорю, что на деле большинство спецов раздутые языком. такое простое задание даже некому выполнить

есть надежный способ, чтобы вычислить говноверстальщика: он верстает табличные данные дивами.

Дизайн интерьера (http://balabukha.com/)
[Удален]
#9
dkameleon:
есть надежный способ, чтобы вычислить говноверстальщика: он верстает табличные данные дивами

Не... не катит... это же не древнейшая профессия

платят нормальное бабло - пофик - можно и в эксель (и т.д.) запихать и вывести

virtuozo
На сайте с 05.04.2012
Offline
34
virtuozo
#10
dkameleon:
есть надежный способ, чтобы вычислить говноверстальщика: он верстает табличные данные дивами.

Я думаю, все обстоит гораздо проще, ТС явно с кем-то поспорил, что сможет таблицу "запросто" перевести в div-ы:)

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий