Атрибуты тега td. Описание параметров тега. Значение CSS по умолчанию
Параметры
align Определяет выравнивание содержимого ячеек по горизонтали. bgcolor Цвет фона ячеек. bordercolor Цвет рамки. valign Выравнивание содержимого ячеек по вертикали.Закрывающий тег
Не обязателен.
Пример 1. Использование тега
Lorem ipsum dolor sit amet... |
Описание параметров тега
Параметр ALIGN
HTML:
3.2
4
XHTML:
1.0
1.1
Описание
Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание
осуществляется для всех ячеек в пределах одной строки. Если требуется применить
разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте
параметр align
для тега
или
.
Синтаксис
...
Аргументы
left
Выравнивание содержимого ячеек по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).
Значение по умолчанию
Аналог CSS
Параметр ALIGN
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте параметр align для тега
Синтаксис
Пример 2. Выравнивание в строке
... | ... |
Параметр BGCOLOR
Описание
Устанавливает цвет фона строки таблицы.
Синтаксис
Аргументы
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.
Аналог CSS
background-color
Пример 3. Цвет фона
... |
... |
Параметр BORDERCOLOR
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает цвет рамки вокруг строки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега
... |
... |
Замечание
- Параметр bordercolor работает только в браузере Internet Explorer; браузеры Opera и Firefox игнорируют этот атрибут.
- При использовании этого параметра код становится не валидным; для создания валидного кода используйте стили, в частности стилевой атрибут border.
Параметр VALIGN
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию контент ячейки располагается по ее вертикали в центре.
Синтаксис
Аргументы
top Выравнивание содержимого ячеек по верхнему краю строки. middle Выравнивание по середине. bottom Выравнивание по нижнему краю. baseline Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии.Значение по умолчанию
Пример 5. Выравнивание в строке
Борщ | Мясо отварить до готовности. Промыть свеклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности. Бульон процедить, мясо нарезать кусочками. В бульон добавить нарезанный дольками картофель, довести до кипения, опустить нарезанную соломкой свежую капусту и варить 10-15 минут, добавить пассерованные овощи, болгарский перец, нашинкованный тонкой соломкой, специи и довести до готовности. Готовому борщу дать настояться в течение 20-25 минут. При подаче к столу добавить сметану, мясо, зелень. |
HTML теги
Значение и применение
Таблицы помогают нам систематизировать определённые данные в строки и столбцы. Они могут содержать в себе различную информацию, например, такую как текст, изображения, нумерованные и маркированные списки и т.п.
Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:
Основное содержимое таблицы заключается в тег
Каждая строка таблицы помещается в элемент
Ячейка заголовка таблицы помещается в элемент
Каждая ячейка данных таблицы помещается в элемент
Наименование таблицы, если оно требуется размещается внутри элемента
Тег | Opera | IExplorer | Edge |
||||
---|---|---|---|---|---|---|---|
Да | Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значение | Описание | |
---|---|---|---|
abbr | text | Не поддерживается в HTML5.
Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов. |
|
align | right left center justify char | Не поддерживается в HTML5.
Выравнивает содержимое ячейки данных таблицы. |
|
axis | category_name | Не поддерживается в HTML5.
Назначение категории ячейки данных. |
|
bgcolor | rgb(x,x,x) #xxxxxx colorname | Не поддерживается в HTML5.
Задает цвет фона для ячейки данных таблицы. |
|
char | character | Не поддерживается в HTML5.
Выравнивает содержимое в ячейке данных таблицы по заданному символу. Атрибут char может быть использован только если атрибут align = "char" . |
|
charoff | number | Не поддерживается в HTML5.
Атрибут, который позволяет произвести выравнивание в ячейке данных с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = "char" . |
|
colspan | number | Определяет количество столбцов, которое ячейка данных должна охватывать. Значение атрибута должно быть неотрицательном целым числом. Не рекомендуется использовать значения свыше 1000, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1. | |
headers | header_id | Указывает одной или нескольких заголовочных ячеек (HTML тег | ), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов. |
height | pixels % | Не поддерживается в HTML5.
Устанавливает высоту ячейки данных. |
|
nowrap | nowrap | Не поддерживается в HTML5.
Указывает, что содержание в ячейке данных не должно переноситься. |
|
rowspan | number | Определяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть неотрицательном целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1. | |
scope | col colgroup row rowgroup | Не поддерживается в HTML5.
Определяет способ связать заголовочную ячейку (HTML тег | ) с ячейками данных в таблице. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов. |
valign | top middle bottom baseline | Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в ячейке данных. |
|
width | pixels % | Не поддерживается в HTML5.
Определяет ширину ячейки данных. |
Пример использования
Ячейка заголовка 1 | Ячейка заголовка 2 | Ячейка заголовка 3 |
---|---|---|
Ячейка данных 1 Строка 2 | Ячейка данных 2 Строка 2 | Ячейка данных 3 Строка 2 |
Ячейка данных 1 Строка 3 | Ячейка данных 2 Строка 3 | Ячейка данных 3 Строка 3 |
К данной таблице для наглядности мы добавили атрибут border (граница) со значением "1" , которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.
Объединение столбцов
Объединение столбцов в элементах
> Ячейка заголовка 1 | Ячейка заголовка 2 | Ячейка заголовка 3 |
---|---|---|
Ячейка данных 1 Строка 2 | Ячейка данных 2 Строка 2 | Ячейка данных 3 Строка 2 |
Ячейка 1 Строка 3 (colspan="2") | Ячейка 2 Строка 3 |
В браузере это выглядит следующим образом:
Объединение строк
Объединение строк в элементах
Ячейка заголовка 1 | Ячейка заголовка 2 | |
---|---|---|
rowspan = "2" > Ячейка данных 1 Строка 2 | Ячейка данных 2 Строка 2 | Ячейка данных 2 Строка 3 |
Ячейка данных 2 Строка 3 | Ячейка данных 3 Строка 3 |
Отличия HTML 4.01 от HTML 5
В HTML 5 была прекращена поддержка 11 атрибутов .Значение CSS по умолчанию
td { display : table-cell ; vertical-align : inherit ; } 09.10.16 2.2KАтрибут width HTML используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS для управления разметкой ячеек в HTML таблицах .
Настройка ширины столбца таблицы
Атрибут width , в настоящее время устаревший, когда-то являлся стандартным методом регулирования ширины столбцов таблицы. По умолчанию, браузер будет настраивать столбцы таблицы так, чтобы соответствовать ее содержимому. Но если нужно контролировать ширину каждого столбца, вы можете это сделать, настроив ширину для каждого элемента
Thin | Really Really Really Wide |
---|---|
Little |
Как видите, в первом случае мы не применили CSS или HTML td width . Что браузер сделает с такой таблицей?
Thin | Really Really Really Wide |
Little |
Браузер выделил для второго столбца намного больше места, чем для первого. Теперь сделаем то же самое, но воспользуемся атрибутом width , чтобы принудительно задать столбцам одинаковый размер:
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
В обоих случаях браузер должен предоставить каждому столбцу одинаковую ширину. Но первая таблица должна автоматически устанавливать размер, чтобы заполнить доступное пространство, в то время как вторая имеет фиксированную ширину.
Thin | Really Really Really Wide |
Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
Довольно неплохо. К сожалению, это некорректный HTML- код , поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS :
Thin | Really Really Really Wide |
---|---|
Little |
Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width :
Thin | Really Really Really Wide |
Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Регулируемая высота строки таблицы
Еще один атрибут, тесно связанный с шириной, это высота (height ). Этот атрибут также устарел, поэтому его не следует использовать. Но поскольку мы говорим о настройке ширины столбцов, то нужно рассмотреть и регулировку высоты строк. Вот как это делалось раньше с помощью устаревшего атрибута:
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Как браузер выводит этот пример:
Если честно, я не могу представить, зачем нужно контролировать высоту строки с помощью HTML td width . Гораздо больше смысла в том, чтобы настроить внешний и внутренний отступ для контента элемента
Параметры
align Определяет выравнивание содержимого ячейки по горизонтали. background Задает фоновый рисунок в ячейке. bgcolor Цвет фона ячейки. bordercolor Цвет рамки. colspan Объединяет горизонтальные ячейки. height Высота ячейки. nowrap Запрещает перенос строк. rowspan Объединяет вертикальные ячейки. valign Выравнивание содержимого ячейки по вертикали. width Ширина ячейки.Закрывающий тег
Не обязателен.
Пример 1. Использование тега
... | |
... | ... |
Описание параметров тега
Параметр ALIGN
HTML:
3.2
4
XHTML:
1.0
1.1
Описание
Задает выравнивание содержимого ячейки по горизонтали.
Синтаксис
...
Аргументы
left
Выравнивание содержимого ячейки по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).
Значение по умолчанию
Аналог CSS
Параметр ALIGN
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Задает выравнивание содержимого ячейки по горизонтали.
Синтаксис
Пример 2. Выравнивание содержимого ячейки
... | ... |
Параметр BACKGROUND
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Синтаксис
Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.
Значение по умолчанию
Аналог CSS
background-image
Пример 3. Фоновый рисунок в ячейке
background="/images/rules.gif" > ... |
Параметр BGCOLOR
Описание
Устанавливает цвет фона ячейки.
Синтаксис
Аргументы
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.
Аналог CSS
background-color
Пример 4. Цвет фона ячейки
... |
... |
Параметр BORDERCOLOR
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега
... |
... | ... |
Параметр COLSPAN
Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек
В приведенной на рис.1 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan .
Синтаксис
Аргументы
Значение по умолчанию
Пример 6. Объединение ячеек
ячейка 1 | |
ячейка 2 | ячейка 3 |
Параметр HEIGHT
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
Синтаксис
Аргументы
Значение по умолчанию
Высота вычисляется на основе содержимого ячейки.
Аналог CSS
Пример 7. Высота ячейки
... |
Параметр NOWRAP
Описание
Добавление параметра nowrap к тегу
Синтаксис
Аргументы
Значение по умолчанию
По умолчанию параметр nowrap не установлен.
Аналог CSS
Пример 8. Использование параметра nowrap
... |
Параметр ROWSPAN
Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 2 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan .
Синтаксис
Аргументы
Любое целое положительное число больше 2.
Значение по умолчанию
Пример 9. Объединение ячеек
ячейка 1 | ячейка 2 |
ячейка 3 |
Параметр VALIGN
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.
Синтаксис
Аргументы
top Выравнивание содержимого ячейки по верхнему краю строки. middle Выравнивание по середине. bottom Выравнивание по нижнему краю. baseline Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.Значение по умолчанию
Аналог CSS
Пример 10. Выравнивание в ячейке
... | ... |
Параметр WIDTH
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.
Синтаксис
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.
Аналог CSS
Пример 11. Ширина ячеек
... | ... |