У большинства начинающих верстальщиков работа с таблицами вызывает определенный страх и кажется очень сложной. На самом деле, в таблицах и работе с ними нет ничего сложного, главное разбираться с ними постепенно и по порядку, чтоб не получилась каша в голове.
Первое, что я хочу прояснить – это принцип построения таблицы в html что называется «на пальцах».
На первом шаге создаем некий контейнер, который будет содержать всю нашу таблицу. Вторым шагом создаем в этом контейнере строки таблицы. Третьим шагом является создание ячеек таблицы в каждой строке.
Теперь перейдем к практике на html.
К примеру, нам необходимо создать простую таблицу 5 на 5.
Первый шаг – создание контейнера. Для создания контейнера таблицы в html используется тег table. Второй шаг – создание строк. Строки таблицы создаются при помощи тега tr, расшифровывается как «table row». Тертий шаг – создание ячеек таблицы. Для этого существует тег td, расшифровывается как «table data». Именно внутрь тегов td и записываются все данные.
Важное замечание! В обыкновенной простой таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех тегов tr должно быть одинаковое количество td.
С созданием таблиц разобрались, теперь давайте попытаемся привести их в более красивый и оформленный вид при помощи CSS.
Первое что рассмотрим – это рамки, т.е. свойство border. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно.
Чтобы привести таблицу в привычный нам вид, где соседние ячейки имеют одну общую границу, используется свойство border-collapse.
По умолчанию у него стоит значение separate, которое разделяет ячейки. При этом можно изменять расстояние между ячейками c помощью CSS-свойства border-spacing. Обратите внимание, что свойство border-spacing задаётся для всей таблицы.
Значение collapse убирает двойные рамки: объединяются в одну рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы.
Для отображения только какой-то одной границы ячеек можно использовать отдельные свойства border-top, border-right, border-bottom и border-left.
Отступы внутри ячеек можно добавлять с помощью CSS-свойства padding (со всех сторон).
Можно задавать отступы для каждой из сторон отдельно, используя свойства padding-top, padding-right, padding-bottom и padding-left.
Заглавные ячейки
В HTML существует специальный тег th, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег th аналогичен тегу td, он так же должен располагаться внутри tr, для него стилями можно задавать все те же свойства. При этом, по умолчанию текст внутри th выделяется жирным и выравнивается по центру ячейки.
Заголовок таблицы
Тег caption должен размещаться внутри тега table, причём непосредственно внутри него и первым, до остальных вложенных тегов.
Заголовок таблицы по умолчанию создается сверху, но его можно переместить вниз, или поставить справа или слева при помощи свойства caption-side (top, bottom, left, right).
Объединение ячеек
Это единственное, что может вызывать некие трудности в понимании. Но давайте попробуем разобраться постепенно.
На самом деле все довольно просто и чтоб не запутаться, нужно соблюдать одно простое правило: атрибуты для объединения ячеек нужно писать в первой из всех объединяемых ячеек.
Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов th или td.
Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой». Фактически, цифра 2 (значение атрибута colspan) – это количество ячеек, которое должна занимать текущая ячейка.
Объединение ячеек по вертикали немного сложнее. Оно осуществляется с помощью атрибута rowspan у тега td или th.
Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.
Как видите, ничего сложного. Единственное, что еще может напрягать – это одновременное объединение ячеек по горизонтали и по вертикали.
Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. Правда, вытесненных ячеек окажется больше. Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.
Выравнивание содержимого
Содержимое как ячеек, так и заголовка таблицы можно выравнивать по горизонтали и по вертикали с помощью CSS.
За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.
За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.
Цвета
Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок:
- background-color - задаёт цвет фона,
- color - цвет текста,
- border-color - цвет рамок.
Задание классов для отдельных ячеек
По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. Чем меньше содержимого, тем меньше размеры таблицы.
Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.
Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height.
Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях (20px), так и в относительных, в процентах (20%).
При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.
Особое значение auto включает расчёт размеров по умолчанию.
Обратите внимание, что проценты при задании высоты обычно не работают.
Размеры ячеек и столбцов тоже можно задавать вручную, точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.
Есть два варианта добавления стилей ячейкам:
- назначать ячейкам уникальные имена классов и применять стили для этих классов;
- использовать атрибут style, внутри которого можно писать CSS-код.
Обычно размеры ячеек прописывают, когда надо вручную установить ширину столбцов таблицы: для этого достаточно задать ширину для каждой ячейки из первой строки.
