Высота ячейки html: Как задать высоту ячейки в таблице при верстке html писем? — Хабр Q&A – css — Равная высота ячеек таблицы HTML

Атрибут 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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Задаем высоту и ширину таблице и ячейкам, выравниваем содержимое по краям

дальше зададим высоту и ширину ячейкам нашей таблицы. Для этого предназначены атрибуты «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>

При просмотре в браузере:

а-1 а-2 а-3
б-1 б-2
б-3

Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки вашего ряда станут по высоте равны наибольшей. То же самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому, наибольшему ряду.

Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну.

Теперь нам осталось лишь выровнять содержимое внутри таблицы:

<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» valign=»bottom»>а-3</td>
</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>

При просмотре в браузере:

а-1 а-2 а-3
б-1 б-2 б-3

И так если мы посмотрим внимательно на наш код, мы увидим, что «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 код расползающейся таблицы выглядит в простейшем случае так:

Content 1 Content 2
Content 3

Здесь мы видим, что ячейка 2 объединяет строки, где размещены первая и третья ячейка. Когда мы начнем наполнять ее контентом, она начнет увеличиваться по высоте и тащить за собой ячейки 1 и 3, вызывая пропорциональное увеличение их высоты. Попытки зафиксировать высоту ячейки 1, используя HTML тег height или через CSS, ничего по большому счету не дают.

Проблему можно решить следующим образом: вместо ячеек 1 и 3 вложить дополнительную таблицу и контент размещать уже в ней. Наш код получит такой вид:

Теперь ячейка 2 может спокойно принимать любую высоту при ее наполнении, но высоты ячеек 1 и 3 останутся неизменны, что можно увидеть на рисунках снизу. Должна заметить, что использование таблиц не поощряется современными стандартами верстки сайтов. Лучше использовать блочные конструкции на базе тега div.


Таблица с фиксированными высотами ячеек 1 и 3.


Таблица с фиксированными ячейками 1 и 3 при наполнении второй ячейки контентом.

Постоянный адрес страницы  http://nemezida.su/kak_zafiksirovat_visotu_yacheyki_html_css.htm

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *