Справочник html.
Описание
Предназначен для создания одной ячейки таблицы. Тег <TD>
должен размещаться внутри контейнера <TR>, который
в свою очередь располагается внутри тега <TABLE>.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Параметры
- align
- Определяет выравнивание содержимого ячейки по горизонтали.
- background
- Задает фоновый рисунок в ячейке.
- bgcolor
- Цвет фона ячейки.
- bordercolor
- Цвет рамки.
- colspan
- Объединяет горизонтальные ячейки.
- height
- Высота ячейки.
- nowrap
- Запрещает перенос строк.
- rowspan
- Объединяет вертикальные ячейки.
- valign
- Выравнивание содержимого ячейки по вертикали.
- width
- Ширина ячейки.
Закрывающий тег
Не обязателен.
Пример 1. Использование тега <TD>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD</title>
</head>
<body>
<table border="1" cellpadding="7" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#D3EDF6" align="center">
... </td>
</tr>
<tr>
<td valign="top" align="center"> ... </td>
<td width="98%" valign="top"> ... </td>
</tr>
</table>
</body>
</html>
Описание параметров тега <TD>
Параметр ALIGN
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Задает выравнивание содержимого ячейки по горизонтали.
Синтаксис
<td align="left | center | right | justify">...</td>
Аргументы
- left
- Выравнивание содержимого ячейки по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
- justify
- Выравнивание по ширине (одновременно по правому и левому краю).
Значение по умолчанию
left
Аналог CSS
text-align
Пример 2. Выравнивание содержимого ячейки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр align</title>
</head>
<body>
<table width="600" border="1">
<tr>
<td align="center"> ... </td>
<td align="center"> ... </td>
</tr>
</table>
</body>
</html>
Параметр BACKGROUND
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка
ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются
ширина и высота, и он всегда отображается в натуральную величину с масштабом
100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется
по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на
месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для
посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный
контраст между ним и содержимым ячейки. В качестве фона допускается использовать
анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Синтаксис
<td background="URL">...</td>
Аргументы
Любой допустимый адрес изображения — можно использовать относительный
или абсолютный путь.
Значение по умолчанию
Нет.
Аналог CSS
background-image
Пример 3. Фоновый рисунок в ячейке
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр background</title>
</head>
<body>
<table width="600">
<tr>
<td background="/images/rules.gif">
... </td>
</tr>
</table>
</body>
</html>
Параметр BGCOLOR
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Устанавливает цвет фона ячейки.
Синтаксис
<td bgcolor="цвет">...</td>
Аргументы
Значение цвета можно задавать двумя способами.
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. Цвет фона ячейки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр bgcolor</title>
</head>
<body text="white">
<table bgcolor="black" width="600">
<tr>
<td bgcolor="#ffcc00"> ... </td>
</tr>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>
Параметр BORDERCOLOR
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен
параметр border с ненулевым значением у тега <TABLE>.
Синтаксис
<td bordercolor="цвет">...</td>
Аргументы
См. параметр bgcolor.
Значение по умолчанию
Зависит от браузера и операционной системы.
Пример 5. Цвет рамки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр bordercolor</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td bordercolor="red"> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>
Параметр COLSPAN
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Устанавливает число ячеек, которые должны быть объединены по горизонтали.
Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например,
как для таблицы, показанной на рис. 1.
ячейка 1 |
ячейка 2 |
ячейка 3 |
Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек
В приведенной на рис.1 таблице содержатся две строки и две колонки, причем
верхние горизонтальные ячейки объединены с помощью параметра colspan.
Синтаксис
<td colspan="число">...</td>
Аргументы
Любое целое положительное число больше 2.
Значение по умолчанию
1
Пример 6. Объединение ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр colspan</title>
</head>
<body>
<table width="200" border="1" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2">ячейка 1</td>
</tr>
<tr>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>
Параметр HEIGHT
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого.
Однако при использовании параметра height высота
ячеек будет изменена. Здесь возможны два варианта. Если значение height
меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае,
когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое
пространство по вертикали.
Синтаксис
<td height="значение">...</td>
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
Высота вычисляется на основе содержимого ячейки.
Аналог CSS
height
Пример 7. Высота ячейки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр height</title>
</head>
<body>
<table cellpadding="10" bgcolor="#ffcc00" align="center"
width="100%">
<tr>
<td height="50"> ... </td>
</tr>
</table>
</body>
</html>
Параметр NOWRAP
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Добавление параметра nowrap к тегу <TD>
заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой.
Неправильное использование этого атрибута может привести к тому, что таблица
будет слишком широкой и не поместится целиком на веб-страницу. Как следствие,
появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной
таблицей будет неудобно, из-за чего применение параметра nowrap
осуждается в спецификации HTML 4.
Синтаксис
<td nowrap>...</td>
Аргументы
Нет.
Значение по умолчанию
По умолчанию параметр nowrap не установлен.
Аналог CSS
white-space
Пример 8. Использование параметра nowrap
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр nowrap</title>
</head>
<body>
<table width="400">
<tr>
<td nowrap> ... </td>
</tr>
</table>
</body>
</html>
Параметр ROWSPAN
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот
параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как
для таблицы, показанной на рис. 2.
ячейка 1 |
ячейка 2 |
ячейка 3 |
Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 2 таблице содержатся две строки и две колонки, причем
левые вертикальные ячейки объединены с помощью параметра rowspan.
Синтаксис
<td rowspan="число">...</td>
Аргументы
Любое целое положительное число больше 2.
Значение по умолчанию
1
Пример 9. Объединение ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр rowspan</title>
</head>
<body>
<table width="200" border="1" align="center"
cellpadding="4" cellspacing="0">
<tr>
<td rowspan="2" bgcolor="#FBF0DB">ячейка
1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>
Параметр VALIGN
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент
ячейки располагается по ее вертикали в центре.
Синтаксис
<td valign="top | middle | bottom | baseline">...</td>
Аргументы
- top
- Выравнивание содержимого ячейки по верхнему краю строки.
- middle
- Выравнивание по середине.
- bottom
- Выравнивание по нижнему краю.
- baseline
- Выравнивание по базовой линии, при этом происходит привязка содержимого
ячейки к одной линии.
Значение по умолчанию
middle
Аналог CSS
vertical-align
Пример 10. Выравнивание в ячейке
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр valign</title>
</head>
<body>
<table width="60%" border="1">
<tr>
<td valign="top"> ... </td>
<td valign="bottom"> ... </td>
</tr>
</table>
</body>
</html>
Параметр WIDTH
HTML: |
3.2 |
4 |
XHTML: |
1.0 |
1.1 |
Описание
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину
ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования
текста. В случае, когда это невозможно, например, в ячейке находятся изображения,
параметр width будет проигнорирован, и новая ширина
ячейки будет вычислена на основе ее содержимого.
Синтаксис
<td width="значение">...</td>
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.
Аналог CSS
width
Пример 11. Ширина ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TD, параметр width</title>
</head>
<body>
<table cellpadding="10" border="1">
<tr>
<td width="20%"> ... </td>
<td width="80%"> ... </td>
</tr>
</table>
</body>
</html>
Теги таблицы
CAPTION предназначен для создания заголовка к таблице. Такой заголовок представляет собой текст, отображаемый перед таблицей и описывающий ее содержание.
COL задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.
COLGROUP предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.
TBODY предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили.
TD Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.
TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.
TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
THEAD предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.
TR служит контейнером для создания строки таблицы.
|