Атрибут height | HTML | WebReference
Браузер сам устанавливает высоту таблицы и её ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая её содержимое, добавляется пустое пространство по вертикали.
Данный атрибут устарел, взамен используйте стили.
Синтаксис
<td>...</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=utf-8">
<title>TD, атрибут height</title>
</head>
<body>
<table cellpadding="10" bgcolor="#ffcc00" align="center">
<tr>
<td>Ячейка 1</td>
</tr>
</table>
</body>
</html>Примечание
Чтобы задать высоту ячеек используйте стилевое свойство height, добавляя его к селектору td.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Высота</title> <style> td { border: 1px solid red; height: 40px; } </style> </head> <body> <table> <tr> <td> ... </td> </tr> </table> </body> </html>
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 08.11.2016
Редакторы: Влад Мержевич
Задаем высоту и ширину таблице и ячейкам, выравниваем содержимое по краям
дальше зададим высоту и ширину ячейкам нашей таблицы. Для этого предназначены атрибуты «height» и «width» — вы можете их задать для всей таблицы, для одного ряда или для ячейки. Высота и ширина могут задаваться как в пикселях, так и в процентах. Мы будем задавать ширину и высоту в пикселях.
| <table> <tr> <td height=»50″ width=»100″ bgcolor=»red»>а-1</td> <td width=»100″ bgcolor=»green»>а-2</td> <td width=»100″ bgcolor=»red»>а-3</td> </tr> <tr> <td height=»50″ width=»100″ bgcolor=»green»>б-1</td> <td width=»100″ bgcolor=»red»>б-2</td> <td width=»100″ bgcolor=»green»>б-3</td> </tr> </table> |
При просмотре в браузере:
|
Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки вашего ряда станут по высоте равны наибольшей. То же самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому, наибольшему ряду.
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну.
Теперь нам осталось лишь выровнять содержимое внутри таблицы:
| <table> <tr> <td height=»50″ width=»100″bgcolor=»red»><center>а-1</center></td> <td width=»100″ bgcolor=»green» align=»left»>а-2</td> <td width=»100″ bgcolor=»red» </tr> <tr> <td height=»50″ width=»100″ bgcolor=»green» valign=»bottom»><center>б-1</center></td> <td width=»100″ bgcolor=»red» align=»right»>б-2</td> <td width=»100″ bgcolor=»green» valign=»top»><center>б-3</center></td> </tr> </table> |
При просмотре в браузере:
|
И так если мы посмотрим внимательно на наш код, мы увидим, что «align», задает горизонтальное выравнивание содержимого ячейки, а «valign» – вертикальное, тэг <center> </center> отвечает за центрирования содержимого ячейки.
valign=»top»
– выравнивает содержимое ячейки по верхнему краю, по умолчанию в левом углу.valign=»bottom» – выравнивает по нижнему краю.
align=»left» — выравнивает по левому краю.
align=»right» — выравнивает по правому краю.
<center> </center> — выравнивают все что в них заключено, по центру.
Если вы хотите выровнять содержимое ячейки по верхнему – правому краю, то нужно указать два атрибута:
<td bgcolor=»red» valign=»top» align=»right»>б-2</td>
Рекомендуем к прочтению
Фиксированная высота div внутри ячейки таблицы, не увеличивая высоту ячейки (html, css)
1 Amit [2012-01-19 17:19:00]
У меня есть таблица, где ячейки имеют фиксированную высоту. Внутри таблицы у меня есть div, который также имеет фиксированную высоту, и если эта высота превышает высоту ячейки, я бы хотел, чтобы она переполнялась из ячейки, без увеличения высоты ячейки (а не макета, который я обычно хотел бы построить, но в данный момент это заданная начальная точка).
Например:
<table>
<tr>
<td>
<div>
12345
</div>
</td>
<td></td>
</tr>
</table>
table
{
width: 90%;
margin: 10px;
}
td
{
width: 50%;
border: 1px solid blue;
padding: 5px;
height: 100px;
vertical-align: top;
}
div
{
height: 250px;
width: 75%;
border: 1px solid red;
}
Это привело к тому, что высота ячейки таблицы увеличивалась в соответствии с высотой div.
Я попытался добавить position: absolute к div и position: absolute к td, и это сделало трюк в Chrome и IE (см. Этот пример jsFiddle):
Тем не менее, в Firefox position: absolute заставила ширину div относиться к ширине окна вместо ширины ячейки:
Как это можно зафиксировать? Я ищу либо решение, отличное от position: absolute, либо способ получить ширину div в FF.
html css
Как зафиксировать высоту ячейки таблицы HTML, CSS
При верстке сайта, когда шаблон страниц создается на базе таблиц (table) имеет место одна неприятная заминка: невозможность зафиксировать высоту ячейки, когда таблица включает в себя объединение строк. Такая особенность проявляется при использование IE или, по некоторым данным, и в FireFox. Хотя, я такой проблемы с ним не заметила. Google Chrome, кстати, тоже к такому порочному поведению не склонен и установленные высоты сохраняет.
Типичный html код расползающейся таблицы выглядит в простейшем случае так:
|
Здесь мы видим, что ячейка 2 объединяет строки, где размещены первая и третья ячейка. Когда мы начнем наполнять ее контентом, она начнет увеличиваться по высоте и тащить за собой ячейки 1 и 3, вызывая пропорциональное увеличение их высоты. Попытки зафиксировать высоту ячейки 1, используя HTML тег height или через CSS, ничего по большому счету не дают.
Проблему можно решить следующим образом: вместо ячеек 1 и 3 вложить дополнительную таблицу и контент размещать уже в ней. Наш код получит такой вид:
Теперь ячейка 2 может спокойно принимать любую высоту при ее наполнении, но высоты ячеек 1 и 3 останутся неизменны, что можно увидеть на рисунках снизу. Должна заметить, что использование таблиц не поощряется современными стандартами верстки сайтов. Лучше использовать блочные конструкции на базе тега div.
Таблица с фиксированными высотами ячеек
Таблица с фиксированными ячейками 1 и 3 при наполнении второй ячейки контентом.
Постоянный адрес страницы http://nemezida.su/kak_zafiksirovat_visotu_yacheyki_html_css.htm