Браузер | Internet Explorer | Netтscape | Опера | Safari | Mozilla Firefox | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Предназначен для разработки одной ячейки таблицы. Тег <TD> должен размещаться внутри контейнера <TR>, который в свою очередь располагается внутри тега <TABLE>.
<table> <tr> <td>...</td> </tr> </table>
Не обязателен.
Пример 1. Использование тега <TD>
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TD</title>
</head>
<body>
<table border="1" cellpadding="7" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>
</tr>
<tr>
<td valign="top" align="center">Ячейка 2</td>
<td width="98%" valign="top">Ячейка 3</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Задает выравнивание содержимого ячейки по горизонтали.
<td align="left | center | right | justify">...</td>
left
text-align
Пример 2. Выравнивание содержимого ячейки
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!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=utf-8">
<title>Тег TD, параметр align</title>
</head>
<body>
<table width="600" border="1">
<tr>
<td align="center">Ячейка 1</td>
<td align="center">Ячейка 2</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных рисунков, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей с нашего сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные Имаги в формате GIF, но они отвлекают внимание читателей.
<td background="URL">...</td>
Любой допустимый адрес Имаги — можно использовать относительный или абсолютный путь.
Нет.
background-image
Пример 3. Фоновый рисунок в ячейке
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!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=utf-8">
<title>Тег TD, параметр background</title>
</head>
<body>
<table width="600">
<tr>
<td background="/images/snow.gif">Ячейка с фоновым рисунком</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Устанавливает цвет фона ячейки.
<td bgcolor="цвет">...</td>
Значение цвета можно задавать двумя способами.
Браузеры поддерживают некоторые цвета по их названию.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 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, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Зависит от браузера и его версии, обычно используется белый цвет фона.
background-color
Пример 4. Цвет фона ячейки
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TD, параметр bgcolor</title>
</head>
<body text="white">
<table bgcolor="black" width="600">
<tr>
<td bgcolor="#ffcc00">Ячейка 1</td>
</tr>
<tr>
<td>Ячейка 2</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.
<td bordercolor="цвет">...</td>
См. параметр bgcolor.
Зависит от браузера и операционной системы.
Пример 5. Цвет рамки
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!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=utf-8">
<title>Тег TD, параметр bordercolor</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td bordercolor="red">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.
ячейка 1 | |
ячейка 2 | ячейка 3 |
Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек
В приведенной на рис.1 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.
<td colspan="число">...</td>
Любое целое положительное число больше 1.
1
Пример 6. Объединение ячеек
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!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=utf-8">
<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>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
<td height="значение">...</td>
Любое целое значение в пикселах или процентах от доступного пространства.
Высота вычисляется на основе содержимого ячейки.
height
Пример 7. Высота ячейки
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TD, параметр height</title>
</head>
<body>
<table cellpadding="10" bgcolor="#ffcc00" align="center" width="100%">
<tr>
<td height="50">Ячейка 1</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Добавление параметра nowrap к тегу <TD> заставляет контент внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на web-страницу. Как следствие, появится горизонтальная полоска прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации ШТМЛ 4.
<td nowrap>...</td>
Нет.
По умолчанию параметр nowrap не установлен.
white-space
Пример 8. Использование параметра nowrap
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TD, параметр nowrap</title>
</head>
<body>
<table width="400">
<tr>
<td nowrap>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.
Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en
commodo consequat.</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 2.
ячейка 1 | ячейка 2 |
ячейка 3 |
Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 2 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.
<td rowspan="число">...</td>
Любое целое положительное число больше 1.
1
Пример 9. Объединение ячеек
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.
<td valign="top | middle | bottom | baseline">...</td>
middle
vertical-align
Пример 10. Выравнивание в ячейке
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!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=utf-8">
<title>Тег TD, параметр valign</title>
</head>
<body>
<table width="60%" border="1">
<tr>
<td valign="top" height="200">Выравнивание по верхнему краю</td>
<td valign="bottom">Выравнивание по нижнему краю</td>
</tr>
</table>
</body>
</html>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования контента. В случае, когда это невозможно, например, в ячейке находятся Имаги, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.
<td width="значение">...</td>
Любое целое значение в пикселах или процентах от доступного пространства.
Ширина вычисляется на основе содержимого ячейки.
width
Пример 11. Ширина ячеек
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TD, параметр width</title>
</head>
<body>
<table cellpadding="10" border="1">
<tr>
<td width="20%">Ячейка 1</td>
<td width="80%">Ячейка 2</td>
</tr>
</table>
</body>
</html>
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект