Ваше мнение о таблицах как способе отображения табличных данных

[Zverushka]

Еще раз убедилась, что таблицы - это ад.

Данные с виду походили на табличные, но как в процессе оказалось - никаких паддингов и маргинов для tr тега, также он не поддерживает псевдоэлементы - и много подобной фигни.

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

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

Что вы думаете по поводу таблиц? Возможно стоило воспользоваться просто слоями - ведь что и кому  дадут эти данные, представленные в виде таблицы, а не в виде слоев?

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

[advokatua]

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

 

[ Строка - Ячейка - короткий текст (или число) ] - вот и вся таблица, а если в нее пихать/распихивать по разным углам какие-те фюшечки, то конечно это уже не совсем те таблицы, о которых каждый думает в первую очередь 

Edited November 14, 2013 by advokatua

[SelenIT]

он не поддерживает псевдоэлементы

Почему? Поддерживает. Только нужно учитывать, что они появятся либо в дополнительных «виртуальных ячейках», либо сами (при соотв. display) превратятся в такие ячейки — ничего, кроме ячеек, в tr-ках жить не может.

 

расстояние между строками таблицы

border-spacing (padding ячеек в общем-то ни при чем).

 

что и кому дадут эти данные, представленные в виде таблицы, а не в виде слоев?

Навскидку, возможность скопировать в Excel чем-то более удобным, чем сплошная куча текста? В перспективе — еще и нативную сортировку...

 

насколько таблицы сложны в своей стилизации

Что есть, то есть. Но если не гнаться за пиксельперфекционизмом, осуществимо достаточно многое.

[antonKar]

никаких паддингов и маргинов для tr тега, также он не поддерживает псевдоэлементы - и много подобной фигни

Попробуйте ему в качестве background поставить картинку и посмотрите на результат в разных браузерах))

 

Я не знаю как с этим дело обстоит в современных браузерах, но ~1.5 года назад мой facepalm достигал космических масштабов.

 

 

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

Оберните внутренний контент ячеек в div и уже этому div задавайте отступы. А ячейки строки уже будут иметь свои отступы, которые можно править в своё удовольствие. 

Edited November 14, 2013 by antonKar

[SelenIT]

ему в качестве background поставить картинку и посмотрите на результат в разных браузерах

Это вебкито-блинковая проблема. Да, она всё еще актуальна.

[Zverushka]

 

он не поддерживает псевдоэлементы

Почему? Поддерживает. Только нужно учитывать, что они появятся либо в дополнительных «виртуальных ячейках», либо сами (при соотв. display) превратятся в такие ячейки — ничего, кроме ячеек, в tr-ках жить не может.

 

 

 

расстояние между строками таблицы

border-spacing (padding ячеек в общем-то ни при чем).

 

 

http://jsfiddle.net/d38WW/1/ Вот допустим почему красная полоса идет только вверху, а не у каждого тр (я так поняла tr не понимает на себе relative)? Соотвественно я хотела просто сделать нестандартную границу у каждой строки, которая превышала ширину содержимого почти на треть (и выходила даже за ширину wrap страницы). И хотела это сделать через абсолютные псевдоэлементы. В итоге пришлось просто расширить таблицу до 1500 пикселей и сдвинуть ее влево, а к tr применить background-image. Кстати о какой проблеме background image у tr идет речь? Кажется я уже боюсь.

Как у каждой строки сделать отступ вверху в 10 пикселей через border-spacing?

Edited November 14, 2013 by Zverushka

[SelenIT]

(я так поняла tr не понимает на себе relative)?

По спеке, влияние relative на внутренние элементы таблиц не определено, и браузеры этим нагло пользуются. Но в Fx и Хроме можно так (пользуясь тем, что неуказанные координаты абсолюта воспринимаются такими, какими были бы при static). Вот IE, бяка, упорно отказывается применять к псевдикам tr-ок display, отличный от table-cell (с table-cell работает). Поэтому для него приходится делать так.

 

 

о какой проблеме background image у tr идет речь?

Картинка применяется не ко всей tr-ке, а к каждой td-шке отдельно (только в вебкитных, в явное нарушение спеки CSS2.1).

 

 

отступ вверху в 10 пикселей через border-spacing?

Как в примерах выше — подойдет?

[Zverushka]

Как в примерах выше — подойдет?

Надо, чтобы отступ сверху был 5 пикселей, а снизу 10 пикселей... 

Edited November 14, 2013 by Zverushka

[SelenIT]

Это как? Сверху и снизу от чего до чего? От разделительной линии до соседних строк?

[klierik]

таблицами надо _уметь_ верстать.

[Zverushka]

Да - от текста до красной строки снизу 10 пикселей (это например) и от верхнего края текста до красной строки сверху - 15 пикселей. Ну в общем речь то о margin-top, margin-bottom или padding, просто они (td) помимо прочего имеют еще и свой padding. Можно конечно, приплюсовать или обернуть в div, но можно ли по-другому? Я так вижу бордер спейс не подходит.

Edited November 14, 2013 by Zverushka

[klierik]

Обнуление таблиц:

 

/* Table */table         { border:0; border-collapse:collapse; border-spacing:0; empty-cells:show; }caption, th, td { padding: 0; vertical-align: middle; text-align:left; font-weight:normal; }

[SelenIT]

Грубо говоря, border-spacing — это и есть заменитель margin-ов для ячеек. Если рисовать разделители псевдиками, то всё упирается в достаточное место для обоих отступов и правильное позиционирование самой линии (напр.), если рисовать бордерами, то единственный вариант — играть с padding-ами ячеек.

 

border-collapse:collapse;

Палка о двух концах. Да, это единственный способ убрать cellspacing через CSS в IE7-. Но это ощутимо меняет логику форматирования таблицы, в частности, ломая возможность задавать ячейкам border-radius и тени. Я бы ставил это не по умолчанию для всего, а строго где нужно (напр. для строгой минималистичной таблицы с однопиксельной сеткой).