TD
Данный тег используется для создания одной ячейки в таблице. Тег
<TD> размещается внутри контейнера
<TR>, который в свою очередь располагается внутри тега
<TABLE>.
<body>
<table border="1" width="400">
<tr>
<td width="200" align="center" >Ячейка 1, Ряд 1</td>
<td width="200" align="center">Ячейка 2, Ряд 1</td>
</tr>
<tr>
<td width="200" align="center">Ячейка 1, Ряд 2</td>
<td width="200" align="center">Ячейка 2, Ряд 2</td>
</tr>
</table>
</body>
|
| Ячейка 1, Ряд 1 |
Ячейка 2, Ряд 1 |
| Ячейка 1, Ряд 2 |
Ячейка 2, Ряд 2 |
Параметры:
align Определяет выравнивание содержимого ячейки по горизонтали
background Задает фоновый рисунок в ячейке
bgcolor Цвет фона ячейки
bordercolor Цвет рамки
colspan Объединяет горизонтальные ячейки
rowspan Объединяет вертикальные ячейки
nowrap Запрещает перенос строк
height Высота ячейки
width Ширина ячейки
valign Выравнивание содержимого ячейки по вертикали
Параметр ALIGN
Задает выравнивание внутри ячейки по горизонтали.
Аналог в
CSS - параметр
text-align.
center Выравнивание содержимого ячейки по центру
left Выравнивание содержимого по левому краю*
right Выравнивание содержимогопо правому краю
justify Выравнивание по ширине (одновременно по правому и левому краю)
<td align="center">...</td>
Параметр BACKGROUND
Определяет фоновый рисунок для ячейки в таблице, который будет взят из графического файла по указанному пути. Размеры фонового рисунке невозможно изменить, он всегда отображается в натуральную величину. Если для самой таблицы уже было предопределено фоновое изображение, то фоновое изображение ячейки будет его перекрывать и накладываться свеху вторым слоем.
Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. Этот недостаток можно устранить, используя стили
CSS. Аналогичным параметром в
CSS, для создания фона таблицы, является параметр
background-image.
<td background="URL">...</td>
Параметр BGCOLOR
Определяет цвет заливки ячейки в таблице. Можно также задать его через стили
CSS с помощью параметра
background-color.
<td bgcolor="цвет">...</td>
Параметр BORDERCOLOR
Определяет цвет рамки ячейки, когда в теге
<table> стоит параметр
border со значением больше
0.
<td bordercolor="цвет">...</td>
Параметр COLSPAN
С помощью данного параметра можно объединить две или более горизонтальных ячеек в одну. В качестве значения, устанавливается число объединяемых ячеек.
<body>
<table border="1" width="400">
<tr>
<td width="200" align="center" >Ячейка 1, Ряд 1</td>
<td width="200" align="center">Ячейка 2, Ряд 1</td>
</tr>
<tr>
<td width="200" align="center" colspan="2">Объединенная ячейка</td>
</tr>
</table>
</body>
|
| Ячейка 1, Ряд 1 |
Ячейка 2, Ряд 1 |
| Объединенная ячейка |
Параметр ROWSPAN
С помощью этого параметра можно объединить две или более вертикальных ячеек в одну. В качестве значения, устанавливается число объединяемых ячеек.
<body>
<table border="1" width="400">
<tr>
<td width="200" align="center" rowspan="2">Объединенная ячейка</td>
<td width="200" align="center">Ячейка 2, Ряд 1</td>
</tr>
<tr>
<td width="200" align="center">Ячейка 2, Ряд 2</td>
</tr>
</table>
</body>
|
| Объединенная ячейка |
Ячейка 2, Ряд 1 |
| Ячейка 2, Ряд 2 |
Параметры HEIGHT и WIDTH
Используя эти параметры, можно установить ширину и высоту для каждой ячейки. Но не следует забывать, что все ячейки в одном ряду должны иметь одинаковую высоту, а все ячейки в одном столбце - одинаковую ширину. Если количество контента не будет помещаться в ячейке, то ее высота будет автоматически увеличиваться.
<td height="значение" width="значение">...</td>
Параметр NOWRAP
Добавление этого параметра к тегу
<TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на web-страницу. Как следствие, появится горизонтальная полоса прокрутки. Аналогичный параметр в
CSS -
white-space.
Параметр VALIGN
Задает выравнивание внутри ячейки по вертикали.
Аналог в
CSS - параметр
vertical-align.
top Выравнивание содержимого ячейки по верхнему краю
middle Выравнивание по середине*
bottom Выравнивание по нижнему краю
baseline Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии
<td valign="top">...</td>