В языке HTML существует очень много элементов, и каждый из них уникален по-своему. Таблица - очень интересный, востребованный и серьезный объект. Благодаря ей можно не только предоставлять информацию в удобном виде, но и строить целый каркас сайта.
Раньше практически все веб-мастера использовали таблицы именно для верстки сайтов. Изначально таблицы для этого не придумывались. Поэтому для разметки сайта нужно использовать блочный элемент div.
Если вы не хотите всегда оставаться новичком, привыкайте сразу всё делать правильно. Это очень важно в языке HTML. В таблице нужно размещать только обычную информацию (текст, ссылки, списки, изображения и т. п.), а не весь сайт целиком.
Как сделать таблицу HTML?
Таблица - это сложный элемент, который состоит из большого числа других элементов. Запомните, что при создании ячеек или строк всегда сразу нужно ставить закрывающийся тег. Иначе всё слетит. Обработчик в браузере будет искать конец элемента и, пока не найдет его, всё дальнейшее будет включать в таблицу. Результатом будет каша.
Если вы пишете сайт в "Блокноте", то всё придется делать руками. Если в готовом редакторе, то там обычно есть кнопки - "вставить таблицу", "вставить изображение" и так далее.
Пример таблицы 2 на 2.
текст первой ячейки первой строки
текст второй ячейки первой строки
текст первой ячейки второй строки
текст второй ячейки второй строки
Теги
Главное правило: количество ячеек в каждой строке должно быть одинаковым. Это ведь таблица.
Но, как и в редакторе Word и Excel, ячейки можно объединять между собой.
Как объединять ячейки в таблице?
Для объединения используют атрибуты Colspan и Rowspan. Span переводится как "охватывать" или "перекрывать". Дословный смысл - охватить/перекрыть ячейки/строки.
В значении этого атрибута нужно указать, сколько строк или ячеек будет перекрыто. Далее приведен наглядный пример использования обоих атрибутов HTML в таблице.
В данном примере в первой строке объединили 3 ячейки при помощи атрибута colspan="3". Затем первую ячейку второй строки растянули на четыре строки. Запомните, что растягиваем/объединяем только в первой ячейке. Ее свойство распространятся далее. Всё, что идет раньше, затронуто не будет.
Если у вас есть 5 ячеек и вы хотите объединить со 2 по 4, то нужно именно у ячейки под номером 2 указать атрибут colspan="3".
Обратите внимание на ячейку под номером 9 на рисунке выше. Там объединили сразу и ячейки и строки. Такие действия не запрещаются.
Посмотрите еще один пример для закрепления информации. Поскольку некоторые путают атрибуты и вместо ячеек порой объединяют строки.
Оформление таблиц
Возьмем обычный, стандартный случай HTML. В таблице две строки по две ячейки в каждой.
Результат кода будет следующим.
Как видите, никаких эффектов нет. Можно добавить рамку, указать ширину и высоту.
Также можно поиграть с выравниванием. Можно выравнивать как по высоте, так и по ширине.
Align для выравнивания по горизонтали, а valign - по вертикали. Вот такой результат.
Видео: Dreamweaver. Объединение ячеек таблиц. Нестандартное использование таблиц. Урок 32
Атрибуты align и valign можно применять ко всей строке. Тогда все ячейки, которые находятся в ней, будут подчиняться этим атрибутам.
Кроме тегов
Как подключать стили к таблице?
Как и любые теги HTML, таблица может преобразовываться посредством стилей. Вам нужно указать файл стилей в области head или готовый стиль (указывается также в head).
...
table {
Видео: Видеокурс HTML & CSS. Урок 3. Таблицы и списки.
font-family: Verdana, Arial, Helvetica, sans-serif-
color: #000000-
}
.my_class
{
color: #666666-
}
...
Видео: HTML-теги thead, th, tbody и tfoot. Разделение таблицы. #46.
Если вы указали просто table, то этот стиль применится ко всем таблицам на странице. Абсолютно ко всем. Но, если использовать второй метод, где указано произвольное имя с точкой, то тогда этот стиль можно применять к любой желаемой таблице, при этом не затрагивая другие.
Обратите внимание, что классы можно использовать как для тега table, так и для конкретной ячейки или строки.
текст первой ячейки первой строки
текст второй ячейки первой строки
текст первой ячейки второй строки
текст второй ячейки второй строки
Если в названии стиля где-нибудь допущена ошибка, то результата не увидите. Если же в самом стиле есть ошибки, но при этом названия совпадают, эффекта не будет. Каждая запятая или двоеточие играет большую роль.
Дополнительные атрибуты у таблиц
Какие атрибуты можно писать в классах стилей? Существует очень много атрибутов, которые применяются именно к таблицам. Рассмотрим самые основные, которые вам пригодятся.
align | Выравнивание по горизонтали |
valign | Выравнивание по вертикали |
background | Фоновое изображение в ячейке/таблице |
bgcolor | Цвет фона в ячейке |
bordercolor | Цвет рамки таблицы/ячейки |
height Видео: Уроки HTML 6.0 Создание таблицы | Высота ячейки |
nowrap | Запрет переноса текста в строке. |
width | Ширина ячейки/таблицы |
Как видите, использовать HTML в таблице можно огромным количеством "инструментов".
Красивые созданные с помощью HTML таблицы. Примеры
Благодаря стилям можно создавать различные красивые таблицы. Всё зависит от того, что и как вам нравится. Это как в приготовлении блюд. Ингредиенты те же, а вариантов рецептов большое множество.
Как видите, если использовать теги HTML, таблица может преобразиться до неузнаваемости. Границы возможностей определяет ваша фантазия.