- Атрибут height
- Примечание
- CSS
- Поддержка браузерами
- Спецификация
- Значения
- HTML Table Sizes
- HTML Table Width
- Example
- HTML Table Column Width
- Example
- HTML Table Row Height
- Example
- HTML Exercises
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Таблицы в HTML — Создание таблиц — Высота и ширина, фон таблицы
- Создание таблицы: строки и ячейки. Заголовок таблицы
- Выравнивание таблицы. Выравнивание содержимого ячеек
- Высота и ширина таблицы и ячеек
- Границы таблицы и ячеек
- Частичное отображение границ
- Отступы внутри и снаружи ячеек
- Объединение ячеек
- Фон таблицы. Фон ячеек таблицы
- Редактирование таблицы
- HTML Размеры таблицы
- Ширина таблицы
- Пример
- Ширина столбца таблицы
- Пример
- Высота строки таблицы
- Пример
- HTML Упражнения
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
Атрибут height
Атрибут / параметр height (от англ. «height» ‒ «высота») указывает рекомендуемую высоту ячейки.
Примечание
Значение данного атрибута используется только в случаях, когда оно не противоречит требованиям к высоте других ячеек в той же строке. (Высота всех ячеек строки, как правило, устанавливается по значению самой высокой ячейки.)
CSS
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | Tables |
| 4.01 | 11.2.6 Table cells: The TH and TD elements height = length [CN]. [1] DTD: Transitional |
| 5.0 | |
| 5.1 | |
| XHTML | |
| 1.0 | Extensible HyperText Markup Language [1] DTD: Transitional |
| 1.1 | |
Значения
В качестве значения указывается высота ячейки. Значение высоты ячейки может быть выражено в виде:
<число>Если в качестве значения указывается только число, то высота ячейки таблицы рассчитывается в пикселях. (Например, « height=»35″ ».) % Если в качестве значения указывается число со « % » ЗНАКОМ ПРОЦЕНТА [U+0025], то высота ячейки таблицы рассчитывается в процентах на основе доступного вертикального пространства. (Например, « height=»32%» ».)
HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the width or height properties to specify the size of a table, row or column.
HTML Table Width
Example
Set the width of the table to 100%:
Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.
HTML Table Column Width
Example
Set the width of the first column to 70%:
HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row element:
Example
Set the height of the second row to 200 pixels:
HTML Exercises
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Таблицы в HTML — Создание таблиц — Высота и ширина, фон таблицы
Таблицы довольно широко применяются при создании веб-страниц: они служат не только способом представления и упорядочения данных, но и являются инструментом форматирования страниц — их используют для создания каркаса страницы — применяют табличную верстку.
Определение в Википедии: Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег ).
Если коротко, то при табличной верстке создается таблица, занимающая в основном всю ширину окна браузера, в каждой ячейке которой располагается тот или иной элемент (или элементы) страницы.
Создание таблицы: строки и ячейки. Заголовок таблицы
Таблица создается с помощью тега
информирует браузер о завершении таблицы.
Любая таблица состоит из столбцов и строк.
| 1-я ячейка 1-ой строки | 2-я ячейка 1-ой строки |
| 1-я ячейка 2-ой строки | 2-я ячейка 2-ой строки |
|---|---|
 | |
Выравнивание таблицы. Выравнивание содержимого ячеек
При помощи атрибут align Вы можете разместить таблицу в левой или правой ( align= «left» и align= «right» ) части окна браузера (родительского элемента) или по его центру ( align= «center» ).
Выравнивание содержимого строк (тег ) и ячеек (тег ) по горизонтали также осуществляется при помощи атрибута align , а по вертикали при помощи атрибута valign :
— атрибут align принимает значения left , right , center и justify , которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;
— атрибут valign , принимающий значения top , bottom и middle , задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.
Атрибут align служит также для выравнивания заголовка (тег ) по горизонтали и определения его расположения — над таблицей или под ней.
По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.
Высота и ширина таблицы и ячеек
По умолчанию размеры (высота и ширина) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.
Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно — при помощи атрибутов hieght и width соответственно.
Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:
— указывается целое положительное число. В этом случае размер будет задан в пикселях;
— указывается целое положительное число с символом %.
Если содержимое таблицы или ячейки превышает заданные размеры — они будут проигнорированы браузером, а новые размеры автоматически подобраны в соответствии с размерами содержимого.
 | |
| | |
| | |
Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.
Границы таблицы и ячеек
Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.
Толщина границы (или рамки) задается в пикселях. В качестве значения атрибута border указывается целое положительное число. Если атрибут border указан без значения, толщина рамки составит 1 пиксель.
Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует).
По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.
Атрибут bordercolor задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег ), строки (тег ) или ячейки (тег ).
Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS).
| Атрибут border не указан. | Поэтому границы отсутствуют. |
| | |
| Толщина границы таблицы составляет 3 пикселя. | Ячейки имеют границы толщиной 1 пиксель! |
| | |
Частичное отображение границ
Граница таблицы и рамка вокруг ячеек могут быть отображены частично.
Отступы внутри и снаружи ячеек
При форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек.
В качестве значений атрибутов указываются целые положительные числа, которые задают расстояние в пикселях.
| Расстояние от содержимого ячеек | до их границ составляет 10 пикселей |
| Расстояние между ячейками и от ячеек | до границы таблицы составляет 25 пикселей |
Объединение ячеек
Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали.
Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
Фон таблицы. Фон ячеек таблицы
В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.
При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег ).
Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.
Редактирование таблицы
В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.
К первой группе относятся теги и . Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.
При помощи атрибута span тега указывают количество колонок, к которым будут применены атрибуты align , valign или width (выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок).
Если атрибут span в теге отсутствует, то будут изменены характеристики одной — первой колонки таблицы. При втором использовании тега задаются свойства для следующих (следующей — если атрибут span отсутствует) колонок таблицы и т.д.
Ко второй группе тегов относятся также практически идентичные между собой теги , и .
Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали — при помощи атрибутов align и valign соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor .
При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.
HTML Размеры таблицы
HTML таблицы могут иметь разные размеры для каждого столбца, строки или всей таблицы.
Используйте атрибут style с свойствами width и height для указания размера таблицы, строки или столбца.
Ширина таблицы
Пример
Установите ширину таблицы равной 100%:
Примечание: Использование процента в качестве единицы измерения ширины означает, насколько широким будет этот элемент по сравнению с его родительским элементом, которым в данном случае является элемент .
Ширина столбца таблицы
Пример
Установите ширину первого столбца равной 70%:
Высота строки таблицы
Чтобы задать высоту определенной строки, добавьте атрибут style к элементу строки таблицы:
Пример
Установите высоту второй строки равной 200 пикселям:
HTML Упражнения
Мы только что запустили
SchoolsW3 видео
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.