Таблицы или дивы?

@nonamez123 · Регистрация: 23.10.2010

Студворк — интернет-сервис помощи студентам

Собственно надо забацать такую вот сетку, которая будет меняется (добавление/удаление ячеек по ширине и длине). Что лучше тут использовать: старые таблици или дивы со стилями?

@eternity · 11.12.2012, 20:09

то с чем удобнее работать

@taras atavin · 11.12.2012, 20:13

Почему или? Вот у меня таблица, в ячейке много текста, этот текст должен там прокручиваться, а высота таблицы быть 100% от страницы. Разве эту задачу можно решить таблицей? Весь текст ячейки завёрнут в див. С другой стороны, таких дивов несколько, они в одну строку и между ними надо разлиновать таблицу. Разве это делается дивами? А таблицей делается элементарно. Так что это всё равно, что противопоставлять токарный станок и экскаватор. nonamez123, ты же не спрашиваешь, как твоя страница должна выглядеть и какой содержать контент? А почему про див и таблицы спрашиваешь?

@etalord · 11.12.2012, 20:37

Если при удалении ячейки она "схлопывается", то удобнее сделать дивы c float. Тогда не придется геморроиться с открытием/закрытием <tr> . Будет тупо произвольное количество блоков, а выстроятся в сетку они сами. По-моему удобно.

Vovan-VE · 12.12.2012, 15:11

Сообщение от etalord

то удобнее сделать дивы c float

Удобнее с display: inline-block; будет, а не с float.

@nonamez123 · 12.12.2012, 15:15 **[ТС]**

Сообщение от Vovan-VE

Удобнее с display: inline-block; будет, а не с float.

в эксплоере оно не работает (и блок, ни тайбл).

Добавлено через 39 секунд
Народ, в общем на данный момент вот так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
div.square{
    padding: 5px;
    margin: 5px;
    border: 1px solid green;
    /*display: inline-table;*/
    /*display: inline-block;*/
    float: left;
}
div.row{
    margin: 0 auto;
}
</style>
 
<div style="width:500px; border:1px solid red; margin: 0 auto">
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
</div>

А как теперь это всё ещё и по центру? Ну тобишь только square

@etalord · 12.12.2012, 15:22

Сообщение от Vovan-VE

Удобнее с display: inline-block; будет, а не с float.

Поясните, чем удобнее? В пользу флоат - бОльшая кроссбраузерность. В inline-block какие-то проблемы в IE7 есть - некорректная работа с блочными элементами.

@Taatshi · 12.12.2012, 15:34

etalord, под ie7 все равно кое-что подправлять, можно будет поправить и это. Мало где для ie7 не требуется отдельные стили прописывать.

@etalord · 12.12.2012, 15:44

Так а всё-таки? Почему inline-block, а не float?

Автору: Пока не скажешь, как должна вести себя таблица, помочь не сможем

Vovan-VE · 12.12.2012, 15:45

Сообщение от nonamez123

в эксплоере оно не работает (и блок, ни тайбл).

Работает. Даже в IE7, путь и с горем пополам, но работает.

Сообщение от etalord

Поясните, чем удобнее?

Сколько раз Вы боролись с мясом из float'ов разных размеров? Сколько раз Вы меняли местами порядок элементов в коде, чтобы на странице с float'ами придать им нужный порядок отображения? Сколько раз Вам хотелось выровнять из по центру горизонтально, вертикально?

Вот float'ы: http://jsfiddle.net/VovanVE/9Ss3c/1/ (картинка №1)

Код

HTML5
1
2
3
4
5
6
7
8
<div class="grid">
    <div class="item big"></div>
    <div class="item medium"></div>
    <div class="item small"></div>
    <div class="item small"></div>
    <div class="item big"></div>
    <div class="item small"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.grid {
    width: 500px;
    border: #f00 solid 1px;
    padding: 2px;
}
.grid:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}
.grid > .item {
    float: left;
}
.item {
    border: #090 solid 2px;
    margin: 2px;
    width: 150px;
}
.item.small {
    height: 100px;
}
.item.medium {
    height: 150px;
}
.item.big {
    height: 250px;
}

Мясо. Смотреть не хочется.
Смените left на right - изменится порядок их отображения.
Они никогда не будут по центру горизантально.
Вертикально они вообще только по верху стыкуются - никогда по низу или по центру.

А вот inline-block'и: http://jsfiddle.net/VovanVE/9Ss3c/2/ (картинка №2)

Код

HTML5
1
2
3
4
5
6
7
<div class="grid">
    <div class="item big"></div>
    <div class="item medium"></div>
    <div class="item small"></div>
    <div class="item small"></div>
    <div class="item big"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.grid {
    width: 500px;
    border: #f00 solid 1px;
    padding: 2px;
    text-align: center;
}
.grid > .item {
    display: inline-block;    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
.item {
    border: #090 solid 2px;
    margin: 2px;
    width: 150px;
}
.item.small {
    height: 100px;
}
.item.medium {
    height: 150px;
}
.item.big {
    height: 200px;
}

Все ровно по строкам.
Меняйте любые размеры как угодно - всё останется ровно.
Выравнивание по горизонтали и вертикали без геморроя.
Отображение на странице всегда в естественном порядке.

@nonamez123 · 12.12.2012, 15:56 **[ТС]**

Так это, посоны, а мне то помочь можете? Ну что бы везде работало...

Vovan-VE · 12.12.2012, 16:50

Сообщение от nonamez123

Ну что бы везде работало...

inline-block'и в разы удобнее, и везде работают.

@nonamez123 · 12.12.2012, 21:37 **[ТС]**

Сообщение от Vovan-VE

inline-block'и в разы удобнее, и везде работают.

чот не так http://jsfiddle.net/nonamez/s9hbx/

Vovan-VE · 13.12.2012, 15:40

Сообщение от nonamez123

чот не так

div.row не нужен. Это ж не таблица. http://jsfiddle.net/VovanVE/s9hbx/1/

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@nonamez123 189 / 185 / 54 Регистрация: 23.10.2010 Сообщений: 1,336

	Таблицы или дивы? 11.12.2012, 18:19. Показов 2902. Ответов 13 Метки нет (Все метки) Собственно надо забацать такую вот сетку, которая будет меняется (добавление/удаление ячеек по ширине и длине). Что лучше тут использовать: старые таблици или дивы со стилями? 0

@eternity 12 / 12 / 0 Регистрация: 23.11.2012 Сообщений: 37
	11.12.2012, 20:09
	то с чем удобнее работать 0

@taras atavin 4226 / 1796 / 211 Регистрация: 24.11.2009 Сообщений: 27,562
	11.12.2012, 20:13
	Почему или? Вот у меня таблица, в ячейке много текста, этот текст должен там прокручиваться, а высота таблицы быть 100% от страницы. Разве эту задачу можно решить таблицей? Весь текст ячейки завёрнут в див. С другой стороны, таких дивов несколько, они в одну строку и между ними надо разлиновать таблицу. Разве это делается дивами? А таблицей делается элементарно. Так что это всё равно, что противопоставлять токарный станок и экскаватор. nonamez123, ты же не спрашиваешь, как твоя страница должна выглядеть и какой содержать контент? А почему про див и таблицы спрашиваешь? 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	11.12.2012, 20:37
	Если при удалении ячейки она "схлопывается", то удобнее сделать дивы c float. Тогда не придется геморроиться с открытием/закрытием <tr> . Будет тупо произвольное количество блоков, а выстроятся в сетку они сами. По-моему удобно. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	12.12.2012, 15:34
	etalord, под ie7 все равно кое-что подправлять, можно будет поправить и это. Мало где для ie7 не требуется отдельные стили прописывать. 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	12.12.2012, 15:44
	Так а всё-таки? Почему inline-block, а не float? Автору: Пока не скажешь, как должна вести себя таблица, помочь не сможем 0

@nonamez123 189 / 185 / 54 Регистрация: 23.10.2010 Сообщений: 1,336
	12.12.2012, 15:56 [ТС]
	Так это, посоны, а мне то помочь можете? Ну что бы везде работало... 0