Как установить cellpading и cellspacing для таблицы в CSS?

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

Если верить документации HTML5, то у тега table пропали многие атрибуты. Фактически у table есть ряд старых и новых глобальных атрибутов, а также еще что-то. Никаких вам width и height, border, align и valign атрибутов, а также cellpading и cellspacing. Все это постепенно передается в загребущие лапки языка описания внешнего вида документа, т.е. CSS. По сути, логично и правильно, но зато сложнее. Впрочем, вернемся к нашим таблицам.

Одним из преимуществ, блочной верстки является хорошо читаемая и гибкая семантика документа. В тоже время, все упираемся в такой «популярный» браузер, как Internet Explorer 6, 7 и 8. Увы, но компания Microsoft не предоставляет возможности обновить браузер без установки патчей, которые могут нарушить действие «лекарства». Безусловно, я ни к чему такому не призываю и ничего такое не пропагандирую, но давайте быть реалистами. Людям нужна новая версия браузера Internet Explorer, без кучи сервиспаков к нему. Опять же, Windows XP столь хорош, что его не удается похоронить. Хотя бы потому, что Windows 8 не всякий ноутбук осилит. Опять двадцать пять, все-все, теперь о таблицах.

Как установить cellpading и cellspacing для таблицы в CSS?

Сразу о главном, но в данном посте я затрону и многие другие атрибуты, так что вперед. В частности, для начала, давайте разберемся с тем как можно реализовать действие атрибутов cellpading и cellspacing для таблицы в CSS? На всякий случай напомню:

• cellpading – определяет отступ внутри ячейки таблицы.
• cellspacing – определяет отступ между (снаружи) ячейками таблицы.

Проще всего с атрибутом cellpading, т.к. у нас есть CSS-свойство padding, которое можно указать для соответствующих элементов, например:

table th, table td { padding: 5px } /* cellpading="5" */

Несколько сложнее обстоит дело с атрибутом cellspacing. Если отступ между ячейками вам не нужен? то достаточно указать:

table { border-collapse:collapse } /* cellspacing="0" */

Такой вариант работает даже на старых версиях Internet Explorer. А вот если вы хотите задать отличное от нуля значение отступа между ячейками, то тут два варианта. Первый заключается в том, чтобы послать HTML5 и использовать атрибут cellspacing, тем более, что пока ту документацию еще допишут... С другой стороны, вы можете послать Internet Explorer, его пользователей и использовать CSS-свойство border-spacing, например:

table { border-collapse:separate; border-spacing:1px; } /* cellspacing="1" */

Как вы видите все достаточно реализуемо, но чем-то приходится жертвовать. Дальше я рассмотрю CSS альтернативы еще нескольких атрибутов, которые мы так привыкли использовать в таблицах. Думаю, это не будет лишним. Ловите бонус!

Альтернативы некоторых атрибутов в CSS

И так, чего у нас там не хватает? Ну, для атрибутов width и height имеются одноименные CSS-свойства, так что вы можете всегда указать что-то вроде такого:

table { width: 100% }
tr { height: 100px }

К слову, как по мне, задавать высоту элементы не комильфо, но смотрите сами. Опять же никто не отменял атрибута: style, а значит можно использовать костыли и в самом HTML:

<table style="width:100%">

Хотя, это тоже неправильно! Ну, вы меня понимаете.

Несколько сложнее и не понятней обстоит дело с border. Дело в том, что последняя, известная мне, версия документации HTML5 все же допускает наличие этого атрибута. Правда только как указатель на то есть (1) или нет (0) границы. В других спецификациях нету и его. В общем, с HTML5 лучше смотреть в сторону CSS3. Основная же сложность с CSS-свойство border состоит в то, что прописать его в атрибуте style тега table мало, т.к. таким образом, мы зададим границу лишь для таблицы в целом, а не для ее ячеек. Поэтому воспользуемся многообразием селекторов, например:

table td { border:1px solid #000; }

В данном случае все теги td являющиеся потомками тега table будут иметь границу в 1 пиксель и черного цвета. Если в таблице есть таблица, и мы хотим задать границу только для прямых потомков, придется указать это со всей очевидностью, например:

.table > tr > td { border:1px solid #000; }

В дано случае для всех тегов td, являющихся прямыми потомками тегов tr, являющихся прямыми потомками тега с CSS-классом table будут иметь границу в 1 пиксель и черного цвета. К слову, такой навороченный селектор не всякий Internet Explorer осилит, увы и ах. О самих же селекторах рекомендую почитать тут, будет время надо будет и самому что-то такое опубликовать, а пока спасибо Дмитрию Наубенко.

Потерю в лице атрибута align можно компенсировать используя CSS-свойства margin (для позиционирования таблицы) и/или text-align (для содержимого ячеек). Например:

table.center { margin:0 auto }
tr.center td { text-align:center }
th.center { text-align:center }
td.center { text-align:center }

Думаю, что-то расписывать - смысла нет, все и так понятно. Что касается вертикального позиционирования содержания ячеек, то есть CSS-свойство vertical-align, например:

th, td { vertical-align: top }

В общем, кто ищет, тот всегда найдет… на свою голову. На этом у меня всё. Очень жаль, если вы не знаете, что такое HTML и CSS, рекомендую скачать бесплатные учебники на странице «Бесплатно». К слову, там же появилась книга «HTML5. Руководство разработчика» от Марка Пилгрима. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/IvBPjh