Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 4.
Рис. 4. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 3 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью атрибута rowspan.
Синтаксис
<td rowspan="число">...</td>
Значения
Любое целое положительное число больше 1.
Значение по умолчанию
1
Пример. Объединение ячеек
HTML 4.01 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 6
<!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=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>
valign
Выравнивание содержимого ячейки по вертикали.
-
Internet Explorer
Chrome
Opera
Safari
Firefox
6.0
7.0
8.0
9.0
10.0
11.0
12.0
13.0
9.2
9.6
10.0
11.0
2.0
3.1
4.0
5.0
3.0
4.0
5.0
6.0
Спецификация
-
HTML:
3.2
4.01
5.0
XHTML:
1.0
1.1
Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.
Синтаксис
<td valign="top | middle | bottom | baseline">...</td>
Значения
top
Выравнивание содержимого ячейки по верхнему краю строки.
middle
Выравнивание по середине.
bottom
Выравнивание по нижнему краю.
baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
Значение по умолчанию
middle
Аналог CSS
vertical-align
Пример. Выравнивание в ячейке
HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 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=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>
width
Ширина ячейки.
-
Internet Explorer
Chrome
Opera
Safari
Firefox
6.0
7.0
8.0
9.0
10.0
11.0
12.0
13.0
9.2
9.6
10.0
11.0
2.0
3.1
4.0
5.0
3.0
4.0
5.0
6.0
Спецификация
-
HTML:
3.2
4.01
5.0
XHTML:
1.0
1.1
Описание
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, атрибут width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.
Синтаксис
<td width="значение">...</td>
Значения
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.
Аналог CSS
width
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Также для этого тега доступны универсальные атрибуты и события.
Тег <th>
Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
|||||||||||||||||||
6.0 |
7.0 |
8.0 |
9.0 |
10.0 |
11.0 |
12.0 |
13.0 |
9.2 |
9.6 |
10.0 |
11.0 |
2.0 |
3.1 |
4.0 |
5.0 |
3.0 |
4.0 |
5.0 |
6.0 |
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
Спецификация
-
HTML:
3.2
4.01
5.0
XHTML:
1.0
1.1
Описание
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Синтаксис
<table>
<tr>
<th>...</th>
</tr>
</table>
Закрывающий тег
Не обязателен.
Пример. Использование тега <th>
HTML 4.01 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 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=utf-8">
<title>Тег TH</title>
<style type="text/css">
table {
border-collapse: collapse; /* Отображать двойные линии как одинарные */
}
th {
background: #ccc; /* Цвет фона */
text-align: left; /* Выравнивание по левому краю */
}
td, th {
border: 1px solid #800; /* Параметры границы */
padding: 4px; /* Поля в ячейках */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" border="1">
<tr>
<th>Браузер</th>
<th colspan="3">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>Версия</th>
<td>5.5</td>
<td>6.0</td>
<td>7.0</td>
<td>7.0</td>
<td>8.0</td>
<td>9.0</td>
<td>1.0</td>
<td>2.0</td>
</tr>
<tr>
<th>Поддерживается</th>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 5.
Рис. 5. Вид ячеек, оформленных с помощью стилей