Table атрибуты: MySQL | Атрибуты столбцов и таблиц — Вебджем.рф

Содержание

Атрибуты команды table

Таблица задается командой <TABLE> … </TABLE>.

Внутри этих тэгов задаются строки командами <TR> … </TR>.

Наконец, внутри строк задаются клетки (ячейки) командами <TD> … </TD>.

Таким образом, по строкам, описывается вся структура таблицы.

Рассмотрим следующий пример.

Программа

Таблица на экране

<TABLE border=1>

</TR>

</TR>

</TR>

</TABLE>

(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

Атрибут	Значение	Описание
align	left, right	Выравнивание по горизонтали
width	число или процент	Ширина таблицы
cellpadding	число	Расстояние между содержимым ячейки и рамкой
cellspacing	число	Расстояние между ячейками таблицы
bgcolor	цвет	Цвет фона таблицы
background	файл	Фоновая картинка
border	число	Ширина линий рамки
bordercolor	цвет	Цвет линий рамки
bordercolordark	цвет	Цвет рамки (снизу и справа)
bordercolorlight	цвет	Светлый цвет рамки (сверху и слева)

Описание атрибутов Атрибут align

Этот атрибут позволяет определить положение таблицы по отношению к соседним элементам документа. То есть атрибут align имеет для таблиц тот же смысл, что и для картинок.

Зададим небольшой текстовый абзац и разместим внутри него таблицу. Если атрибут не задан, таблица выравнивается по левому краю окна, а другие элементы страницы выше или ниже нее (обтекания не происходит):

Рис.1

Когда атрибут задан, текст обтекает таблицу, выровненную в соответствие со значением атрибута на странице.

Рис.2

Рис.3

Выровнять таблицу по центру окна можно при помощи команды CENTER:

<CENTER>

<TABLE>

…

</TABLE>

</CENTER>

Задать выравнивание можно при помощи команды DIV:

Рис. 4

Рис.5

Атрибут width

Если атрибут не задан, браузер рисует таблицу минимальных размеров вокруг данных, которые она содержит. Запись width=число заставляет браузер рисовать таблицу шириной в указанное количество пикселов. Если реально для таблицы требуется больше места, значение

width игнорируется. Если заданный размер «уводит» таблицу за правую границу окна, браузер добавляет к окну горизонтальную линейку протяжки.

Старайтесь формировать окно документа таким образом, чтобы горизонтальная протяжка в нем никогда не появлялась. Во-первых, линейка протяжки уменьшает полезный размер окна, во-вторых, ухудшает восприятие документа и раздражает пользователя.

Можно задавать ширину таблицу в процентном отношении к ширине окна браузера. В этом случае используют запись width=процент.

Рис.6

Рис. 7

Атрибуты cellpadding и cellspacing

Первый атрибут задает расстояние между рамкой таблицы и содержимым ячеек, второй — между рамками соседних ячеек. Когда атрибуты не заданы, браузер устанавливает их по режиму умолчания, обычно:

cellpadding=1 и cellspacing=2.

Рис.8

Рис.9

Атрибуты bgcolor и background

Если атрибуты не заданы, элементы выводятся прямо на фон документа, и таблица выглядит прозрачной. Атрибут bgcolor задает цвет фона таблицы, а атрибут background паркетную укладку картинкой.

Рис.10

Рис.11

Атрибут background позволяет накладывать рисунки друг на друга в любом количестве (при использовании вложенных таблиц). Этот эффект можно использовать как элемент дизайна.

Атрибуты border и bordercolor

Первый атрибут задает толщину рамки вокруг всей таблицы, второй — ее цвет.

Если задано border=0, то рамка, а заодно и прямоугольники клеток не рисуются.

Рис.12

Рис.13

Атрибуты bordercolordark и bordercolorlight

Браузер Netscape Navigator эти атрибуты не поддерживает. В Microsoft Internet Explorer они позволяют при необходимости нарисовать на экране объемную рамку. Первый задает цвет ее нижней и правой стороны, второй — левой и верхней.

Если необходимо рамку нарисовать плоской (одноцветной), нужно задать атрибут bordercolor, а атрибуты bordercolordark и bordercolorlight не задавать.

Рис.14

Рис.15

— журнал «Доктайп»

25 января 2023

Справочник

Нейрокекс

Что делает тег

Тег <td> используется для создания ячейки таблицы. Он должен быть вложен в тег <tr> , который, в свою очередь, вложен в тег <table> . Ячейка может содержать текст, изображения, формы, список и другие HTML-элементы.

Синтаксис тега <td>

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Примеры использования

Таблица с тремя колонками (имя, фамилия и возраст) и тремя строками данных:

<table>
  <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Возраст</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

В этом примере ячейки в первой строке таблицы определены с помощью тега <th> , который используется для заголовков таблицы, вместо

<td>:

<table>
  <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

В этом примере используется атрибут colspan, чтобы объединить ячейки в первой строке таблицы и создать заголовок для двух колонок:

<table>
  <tr>
    <td colspan="2">Сумма</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Товар 1</td>
    <td>50</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Товар 2</td>
    <td>75</td>
    <td>25</td>
  </tr>
</table>

Для чего использовать тег <td>

Добавить расписание на сайт.
Показать цены на товары.
Создать таблицу с данными о продуктах.
Показать контакты компании.
Создать таблицу с результатами опроса.

Атрибуты тега <td>

colspan — количество объединяемых ячеек по горизонтали.

rowspan — количество объединяемых ячеек по вертикали.

headers — список id элементов, которые связаны с ячейкой.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег может использоваться только внутри <tr>.
Не рекомендуется использовать вложенные таблицы — это приводит к проблемам с доступностью и масштабируемостью.

Нюансы

Если ячейка пустая, используйте <td></td> вместо <td/> для лучшей читаемости кода.
Если ячейка содержит изображение, используйте атрибут alt для доступности.
В одной строке таблицы должно быть одинаковое количество ячеек.
Если в таблице используются ячейки с разной шириной, браузеры автоматически изменяют ширину других ячеек в строке.
Если в ячейке нет содержимого, она всё равно отображается, но имеет нулевую высоту и ширину.
Если содержимое не помещается в ячейке, браузер автоматически изменит её размеры.

Поддержка браузерами

Тег <td> поддерживается всеми современными браузерами.

Актуальная информация — на caniuse.

Альтернативные теги

<th> — используется для определения заголовков ячеек таблицы. Он также может использоваться для обычных ячеек, но при этом будет иметь жирный текст и выравнивание по центру по умолчанию.
<caption> — используется для заголовка таблицы.

Чем заменить тег

Если необходимо отобразить данные в виде таблицы, используйте тег <td>.

Актуальность

Тег <td> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

Справочник

31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

Справочник

29 марта 2023