HTML тег table
Тег определяет HTML таблицу для представления табличных данных.
HTML таблица состоит из элемента и одного или более элементов , и .
Элемент определяет строку таблицы, элемент определяет верхний колонтитул/заголовок таблицы, а элемент определяет ячейку таблицы.
Более сложные HTML таблицы также могут содержать элементы , , , , и .
Разница между HTML 4.01 и HTML5
В HTML5 атрибуты align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width не поддерживаются.
Атрибуты тега
| Атрибут | Описание |
|---|---|
| align | Определяет горизонтальное выравнивание содержимого элемента table |
| bgcolor | Определяет цвет фона элемента |
| border | Определяет, следует ли отображать рамку вокруг ячеек таблицы |
| cellpadding | Определяет расстояние между содержимым ячейки таблицы и ее границей |
| cellspacing | Определяет расстояние между ячейками таблицы |
| frame | Определяет, каким образом отображается внешняя граница таблицы |
| rules | Определяет, каким образом следует отображать границы между ячейками таблицы |
| summary | Определяет краткое описание таблицы |
| width | Определяет ширину таблицы |
Общие атрибуты
CSS стили по умолчанию
table
HTML пример использования
Простая HTML таблица с двумя строками и двумя столбцами:
Месяц Сэкономлено Январь $100
Основные атрибуты тега TABLE
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
- align — выравнивание содержимого таблицы по горизонтали.
- valign — выравнивание содержимого всех ячеек таблицы по вертикали (поддерживается не всеми браузерами).
- bgcolor — цвет фона таблицы.
- border — рамки вокруг таблицы и в её ячейках.
- cellspacing — определяет расстояние между соседними ячейками.
- cellpadding — определяет расстояние между краем ячейки и её содержимым.
- width и height — ширина и высота таблицы.
- id — уникальный идентификатор таблицы.
- class и style — атрибуты, определяющие вид таблицы с помощью CSS.
Это далеко не все атрибуты. Более подробно о некоторых из них я расскажу в следующих статьях (а также о других тегах таблицы). Если вы подзабыли, как использовать атрибуты, то вспомнить можно здесь.
Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.
Таблицы
Таблицы — это основное средство управления размещением объектов на странице. Основные теги таблицы:
- table . Этот тег определяет начало таблицы внутри документа.
- tr . Этот тег строки таблицы (table row) , он определяет строки, идущие слева направо в горизонтальном направлении.
- td . Этот тег данных таблицы (table data) определяет отдельные ячейки. Тег ячейки таблицы и информация, содержащаяся в нем, определяют структуру таблицы по столбцам.
Весь текст и графика помещаются внутри тегов td .
Пример простой таблицы
| This is my first table cell. | And this is my second table cell. |
| This is my first table cell in the second row. | And this is the second table cell in the second row. |
- align=x. Выравнивание таблицы на странице определяется значением этого атрибута В качестве x должно стоять left или right . Так как поумолчанию в броузерах производится выравнивание по левому краю, а для выравнивания таблиц по центру обычно используются другие теги, то единственно эффективное использование этого атрибута относится к случаю, когда вы хотите сместить всю таблицу к правому краю окна броузера.
- border=x. Переменная x должна быть заменена числовым значением от 0 и более. Это значение определяет ширину видимой рамки вокруг таблицы. При создании макетов страниц x обычно будет задаваться равным 0.
- cellspacing=x. Этот атрибут определяет интервал между отдельными ячейками таблицы (другими словами между видимыми столбцами). Параметр x должен принимать значения, большие ли равные 0. Это поможет получить пустое пространство между элементами, помещенными внутри ячеек.
- cellpadding=x. Этот атрибут определяет расстояние от границ ячейки до помещенных в нее объектов. Он также используется для создания пустого пространства внутри каждой ячейки.
- width=%x или width=x Чтобы задать ширину таблицы, вы можете указать либо число, соответствующее доле в процентах от общей ширины окна броузера, либо конкретное значение, которое будет обозначать конкретную ширину в пикселях. Выбор ширины таблицы чрезвычайно важен. Превышение максимума ширины в 595 пикселей может привести к тому, что при разрешении 640х480 страницу придется пролистывать горизонтально.
Если вы хотите выровнять таблицу по центру страницы, то можно использовать тег div вместе с атрибутом выравнивания типа . Открывающийся тег и атрибут помещаются перед таблицей; после того, как вы закончите ввод таблицы, введите закрывающий тег .
Возврат в начало страницы Возврат на главную страницу сайта
Пример таблицы с атрибутами align, border, cellspacing, cellpadding, width
| This is my first table cell. | And this is my second table cell. |
| This is my first table cell in the second row. | And this is the second table cell in the second row. |
- align=x Переменная x может иметь значения left , right или middle . Когда вы используете атрибут внутри ячейки таблицы, содержимое ячейки выравнивается в соответствии с атрибутом.
Пример таблицы с атрибутами выравнивания в ячейках
| This is my first table cell. | And this is my second table cell. |
| This is my first table cell in the second row. | And this is the second table cell in the second row. |
- valign=x X принимает значения top , middle или bottom . При вертикальном выравнивании содержимое ячейки располагается в верхней части, нижней части или посередине ячейки.
Пример таблицы с атрибутами выравнивания valign=x в ячейках
В этом примере первая ячейка таблицы в первой строке и первая ячейка таблицы во второй строке вертикально выравнены по верхнему краю. Вторая ячейка таблицы в первой сторке вертикально выравнена по середине, а вторая ячейка таблицы во второй строке выровнена по нижнему краю.
| This is my first table cell. | And this is my second table cell. |
| This is my first table cell in the second row. | And this is the second table cell in the second row. |
- colspan=x Здесь x это число столбцов, атрибут colspan заставляет текущую ячейку занимать несколько столбцов по ширине.
Пример таблицы с атрибутом colspan в ячейках
| This is my first table cell, which spans two columns. | |
| This is my first table cell in the second row. | And this is the second table cell in the second row. |
- rowspan=x Здесь x это число строк, атрибут rowspan заставляет текущую ячейку занимать несколько строк по высоте.
Пример таблицы с атрибутом rowspan
| This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. | This is the first table cell in the second column. |
| And this is the second table cell in the second table row. |
Использование атрибутов colspan и rowspan предоставляет прекрасные возможности для размещения объектов на Web-странице, в частности разрешает верстку в несколько колонок.
Попробуйте вставить в таблицу графику с помощью тега . Именно так постороены макеты большинства Web-страниц.
| This is the first table cell in the second column. |
| And this is the second table cell in the second table row. |
Иногда вам надо оставить какую-либо ячейку таблицу пустой. Не следует использовать в этом случае комбинацию:
К сожалению, многие броузеры «чудят» с пустыми ячеками. Поэтому, для создания пустой ячейки воспользуйтесь специальным зарезервированным символом неhазрывного пустого пространства   (подробнее — см.здесь), а именно:
Да, мы чуть не забыли о таких важных элементах создания таблицы, как заголовок таблицы — тег и тег и заголовков столбцов таблицы . Например,
| Наименование | Значение | Пример |
|---|---|---|
| Меньше чем | < | |
| Больше чем | > | > |
| Амперсанд | & | & |
| неразрывный пробел | ||
| кавычки | " | « |
Это записано в HTML-документе так:
Краткий список зарезервированных символов Наименование Значение Пример Меньше чем < Больше чем > > Амперсанд & & неразрывный пробел кавычки " "
Вы заметили, здесь использована комбинация
для создания пустой ячейки таблицы?
Атрибут тега align=»top» означает, что заголовок надо поместить до («вверху») таблицы. Другое значение атрибута align=bottom. Тогда заголовок будет располагаться под таблицей.
Удобно, не правда ли? Допустимыми значениями являются также left, right.
А теперь воспользуемся знаниями о каскадных таблицах стиля , и попробуем задать разные цвета в таблице для заголовков столбцов и для «тела» самой таблицы.
table < margin-left: -4%; font-family: sans-serif; background: white; border-width: 2; border-color: white; >th < font-family: sans-serif; background: rgb(204, 204, 153) >td
| Наименование | Значение | Пример |
|---|---|---|
| Меньше чем | < | |
| Больше чем | > | > |
| Амперсанд | & | & |
| неразрывный пробел | ||
| кавычки | " | « |
В данном случае использован встроенный стиль CSS. Это трудоемко и нерационально. Так делать не надо!
Лучше воспользоваться внедренным стилем. Например, он используется для таблиц на странице Форматирование текста.
Либо воспользоваться связанными таблицами стилей.
| Наименование | Значение | Пример |
|---|---|---|
| Меньше чем | < | |
| Больше чем | > | > |
| Амперсанд | & | & |
| неразрывный пробел | ||
| кавычки | " | « |
Это записано в HTML-документе так:
Краткий список зарезервированных символов Наименование Значение Пример Меньше чем < Больше чем > > Амперсанд & & неразрывный пробел кавычки " "
Таблицы можно использовать просто как способ форматирования текста, так как таблица в HTML-документе может не содержать всех или некоторых разграничительных линий.
В этом случае в ячейки помещаются текст, текстовые ссылки, изображения, а некоторые ячейки остаются пустыми. Для задания нужного расстояния между элементами следует использовать атрибуты выравнивания.
Этот способ использования страниц позволяет экономить место и достаточно эффектно разместить публикуемый материал в окне броузера.
Пример использования таблицы как способа расположения элементов на странице
(использование атрибута frame тега table )
А вы посетили выставку Клода Моне в Эрмитаже?
Атрибуты тега
Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right , текст начинает обтекать таблицу сбоку и снизу.
bgcolor
Устанавливает цвет фона таблицы.
border
Устанавливает толщину границы в пикселах вокруг таблицы. При наличии этого атрибута также отображаются границы между ячеек.
cellpadding
Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
cellspacing
Задает расстояние между внешними границами ячеек. Если установлен атрибут border , толщина границы принимается в расчет и входит в общее значение.
cols
Атрибут cols указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все ее содержимое будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols ), строками ( rows ) или группами ( groups ), которые определяются наличием тегов , , , или . Толщина границы указывается с помощью атрибута border .
width
Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.