Выравнивание содержимого ячеек. HTML выравнивание по центру Выравнивание по левому краю в таблице html
Жаропонижающие средства для детей назначаются педиатром. Но бывают ситуации неотложной помощи при лихорадке, когда ребенку нужно дать лекарство немедленно. Тогда родители берут на себя ответственность и применяют жаропонижающие препараты.
Что разрешено давать детям грудного возраста? Чем можно сбить температуру у детей постарше? Какие лекарства самые безопасные?
информирует браузер о завершении таблицы.
Любая таблица состоит из столбцов и строк.
Тег
создает строку, а тег
ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.
Тег
также создает ячейку. Его отличие от тега
в том, что ячейка созданная тегом
является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.
Содержимое ячейки, созданной тегом
по умолчанию располагается в ее левой чаcти.
Тег
создает заголовок таблицы, он располагается внутри тега
- сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.
Для выравнивания таблицы используется атрибут align
тега
.
При помощи атрибут align
Вы можете разместить таблицу в левой или правой (align=
"left"
и align=
"right"
) части окна браузера (родительского элемента
) или по его центру (align=
"center"
).
Выравнивание содержимого строк (тег
) и ячеек (тег
) по горизонтали также осуществляется при помощи атрибута align
, а по вертикали при помощи атрибута valign
:
Атрибут align
принимает значения left
, right
, center
и justify
, которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;
Атрибут valign
, принимающий значения top
, bottom
и middle
, задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.
Атрибут align
служит также для выравнивания заголовка (тег
) по горизонтали и определения его расположения - над таблицей или под ней.
По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.
Высота и ширина таблицы и ячеек
По умолчанию размеры (высота и ширина
) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.
Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght
и width
соответственно.
Тег
, создающий строку таблицы не имеет атрибутов hieght
и width
. Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.
Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:
Указывается целое положительное число. В этом случае размер будет задан в пикселях;
Указывается целое положительное число с символом %.
Если содержимое таблицы или ячейки превышает заданные размеры - они будут проигнорированы браузером, а новые размеры автоматически подобраны в соответствии с размерами содержимого.
>
Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.
Границы таблицы и ячеек
Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.
Атрибут border
тега
позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.
Толщина границы (или рамки
) задается в пикселях. В качестве значения атрибута border
указывается целое положительное число. Если атрибут border
указан без значения, толщина рамки составит 1 пиксель.
Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует
).
По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.
Атрибут bordercolor
задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег
), строки (тег
) или ячейки (тег
).
Атрибут bordercolor
поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS
).
Атрибут border не указан.
Поэтому границы отсутствуют.
Толщина границы таблицы составляет 3 пикселя.
Ячейки имеют границы толщиной 1 пиксель!
Частичное отображение границ
Граница таблицы и рамка вокруг ячеек могут быть отображены частично.
Атрибут frame
тега
указывает, где рисовать границу таблицы. Атрибут rules
указывает, как отобразить границы ячеек.
"500px"
frame=
"hsides"
rules=
"cols"
>
Установлены
горизонтальные
границы таблицы
И
отображены границы
между колонками
Отступы внутри и снаружи ячеек
При форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек.
Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding
тега
.
Внешние отступы - расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing
тега
.
В качестве значений атрибутов указываются целые положительные числа, которые задают расстояние в пикселях.
Расстояние от содержимого ячеек
до их границ составляет 10 пикселей
Расстояние между ячейками и от ячеек
до границы таблицы составляет 25 пикселей
Объединение ячеек
При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan
и rowspan
тега
.
Атрибут colspan
указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan
устанавливает количество ячеек, объединяемых по вертикали.
Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
1
2
3
4
1
2
3
4
Фон таблицы. Фон ячеек таблицы
В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.
Атрибут background
тега
задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу ().
Атрибут bgcolor
тега
задает цвет фона таблицы. Цвет можно задать двумя способами ()
При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег
).
Темно-розовый - цвет фона таблицы.
Фоновый рисунок отдельной ячейки - небо!
Напомним также о существовании атрибута cols
тега
, который указывает браузеру количество столбцов в таблице.
Использование атрибута cols
позволяет браузеру быстрее отобразить содержимое таблицы.
Редактирование таблицы
В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.
К первой группе относятся теги
и
. Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.
Один из этих тегов располагают сразу после тега
. Допустим это тег
.
При помощи атрибута span
тега
указывают количество колонок, к которым будут применены атрибуты align
, valign
или width
(выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок
).
Если атрибут span
в теге
отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега
задаются свойства для следующих (следующей - если атрибут span
отсутствует
) колонок таблицы и т.д.
"2"
width=
"70px"
>
1
2
3
4
5
1
2
3
4
5
Ко второй группе тегов относятся также практически идентичные между собой теги
,
и
.
Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align
и valign
соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor
.
При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.
Теги
и
должны быть расположены перед тегом
, сразу после открывающего таблицу тега
. Строки, помещенные в тег
представлены вверху таблицы, а строки заключенные в тег
будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы.
Тег
допускается использовать несколько раз внутри тега
.
1
2
3
4
5
6
7
8
"right"
bgcolor=
"#00FF33"
>
9
10
1
2
3
4
5
6
7
8
9
10
Центрирование элементов по вертикали с помощью CSS является задачей, которая представляет определенную трудность для разработчиков. Однако имеется несколько методов ее решения, которые достаточно просты. В данном уроке представлено 6 вариантов вертикального центрирования содержания.
Начнем с общего описания задачи.
Задача вертикального центрирования
Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный - задаем ему ширину и автоматическую установку левого и правого полей.
Большинство людей, используя свойство text-align:
, обращаются к свойству vertical-align
для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign
, который укрепляет веру в то, что vertical-align
правильный путь к решению задачи.
Но атрибут valign
работает только в ячейках таблицы. А свойство vertical-align
очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.
Значение свойства vertical-align
действует по отношению к родительскому строчному элементу.
В строке текста выравнивание производится по отношению к высоте строки.
В ячейке таблицы используется выравнивание по отношению к величине, вычисляемой специальным алгоритмом (обычно получается высота строки).
Но, к сожалению, свойство vertical-align
не действует в блочных элементах (например, параграфах внутри элемента div
). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.
Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.
Метод line-height
Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать - это задать высоту строки больше, чем размер шрифта.
По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .
HTML:
Нужный текст
CSS:
#child {
line-height: 200px;
}
Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.
Центрирование изображения с помощью line-height
А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.
Значение свойства line-height
должно быть больше высоты изображения.
Метод таблиц CSS
Выше упоминалось, что свойство vertical-align
применяется для ячеек таблицы, где отлично действует. Мы можем вывести наш элемент как ячейку таблицы и использовать для него свойство vertical-align
для вертикального центрирования содержания.
Примечание:
Таблица CSS не является тем же, что и HTML таблица.
Мы устанавливаем табличный вывод для родительского элемента div
, а вложенный элемент div
выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align
для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.
В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div
будет изменять размер в соответствии со своим содержанием.
Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block
для вложенного контейнера.
Абсолютное позиционирование и отрицательные поля
Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.
В коде примера выполняется одновременное центрирование по горизонтали и вертикали:
Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div
устанавливаем значения свойств top
и left
равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.
Данный метод работает не во всех браузерах.
Абсолютное позиционирование и растягивание
В коде примера выполняется центрирование по вертикали и горизонтали.
Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right,
и left
значения 0.
Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div
по центру родительского элемента.
К сожалению, данный метод не работает в IE7 и ниже.
Равные отступы сверху и снизу
В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.
В коде CSS примера отступы сверху и снизу задаются для обоих элементов. Для вложенного элемента установка отступов будет служить для вертикального центрирования. А отступы родительского элемента будут центрировать вложенный элемент в нём.
Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.
Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.
150 + 150 + 100 = 400
Использование % позволяет расчеты оставить браузеру.
Данный метод работает везде. Обратной стороной является необходимость в расчетах.
Примечание:
Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.
Плавающий div
Данный метод использует пустой элемент div
, который плавает и помогает управлять положением нашего вложенного элемента в документе. Обратите внимание, что плавающий div
размещается до нашего вложенного элемента в коде HTML.
Мы смещаем пустой div
влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.
Так как данный div
является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both
, но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div
.
Верхняя граница вложенного элемента div
находится непосредственно под нижней границей пустого элемента div
. Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom
для плавающего пустого элемента div
.
Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div
и знаний о высоте вложенного элемента.
Заключение
Все описанные методы просты в использовании. Трудность заключается в том, что ни один из них не подходит для всех случаев. Нужно анализировать проект и выбирать тот, который подходит наилучшим образом под требования.
или свойства HTML таблицы и ячеек на примерах
Продолжаем изучать HTML таблицы
. Текущий урок научит вас устанавливать размер таблицы
, выравнивать по вертикали и по горизонтали ее содержимое, точнее содержимое ячеек. Также вы узнаете как определить заголовк HTML таблицы
.
Навигация по странице
HTML ширина ячейки таблицы и ее высота (размер ячеек)
HTML высота ячеек и их ширина, размер
определяется следующими атрибутами:
Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда
— ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы
.
Горизонтальное HTML выравнивание в таблице и в ячейке, текст
HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы
:
Результат:
Результат:
Результат:
Теги
определяют заголовок HTML таблицы
.
HTML таблица по центру, с левой, с правой стороны
Горизонтальное расположение HTML таблицы
внутри web-страницы:
Примеры HTML таблиц
align="center"
align="left"
align="right"
В примере выше показаны три отдельные таблицы
, каждая из которых состоит из одной ячейки. bgcolor - HTML
атрибут - определяет цвет фона. В предыдущем уроке мы использовали его CSS
аналог - background-color .
HTML таблица расположена внутри ячейки
Примеры HTML таблицы
Внутри второй ячейки находится еще одна таблица
со своими атрибутами, значениями и стилями.
Размеры и фон внутренней таблицы
, в отличае от внешней, заданы с помошью CSS
.
Для задания выравнивания таблицы по центру web-страницы или по одному из ее
краев предназначен параметр align
тега
.
Результат будет заметен только в том случае, если ширина таблицы не занимает
всю доступную область, другими словами, меньше, чем 100%.
Параметр align
может принимать следующие значения:
left
, right
, center
.
left
— выравнивание таблицы по левоой стороне. Этот
параметр используется по умолчанию, поэтому его обычно не указывают. right
— выравнивание таблицы по правой стороне web-страницы. center
— выравнивание таблицы по центру web-страницы.
В примере 1 показано, как задать выравнивание таблицы по центру.
Пример 1. Выравнивание таблицы по центру
Выравнивание таблицы
Содержимое таблицы
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание таблицы по центру
На самом деле align
не только устанавливает выравнивание,
но и заставляет контент обтекать таблицу с других сторон аналогично поведению
тега
. Но поскольку
не имеет параметра hspace
, задающего поле по горизонтали,
то эту роль необходимо переложить на стили, в частности, атрибут margin
.
В примере 2 показано выравнивание таблицы по правой стороне и ее обтекание
контентом.
Пример 2. Выравнивание таблицы по правой стороне
Выравнивание таблицы
Содержимое таблицы
Обтекающий таблицу контент...
Результат данного примера показан на рис. 2.
Рис. 2. Выравнивание таблицы по правой стороне
В текущем примере создается таблица с фоном серого цвета и выравниванием по правой стороне. Для разработки отступов от таблицы до контента используется параметр
margin
со значением 10 пикселов.
Чтобы запретить обтекание таблицы при ее выравнивании по одному из краев проще
всего добавляем после таблицы тег
с заданным
стилем clear: both
. Эта команда запрещает
обтекание, как с левого, так и с правого края (пример 3).
Пример 3. Отмена обтекания таблицы
Обтекание таблицы
Содержимое таблицы
контент...
Выравнивание таблицы по центру делается аналогично, через параметр align="center"
тега
, но в этом случае никакого обтекания
не происходит и контент после таблицы начинается всегда с новой строки.
Поговорим о том, как выровнять текст в таблице HTML в горизонтальном и в вертикальном направлениях.
Для того, чтобы выровнять по горизонтали следует использовать CSS-свойство text-align
. Ему присущи такие значения, как left
, center
и right
.
Чтобы выровнять по вертикали необходимо применять CSS-свойство vertical-align
. Ему, в свою очередь, характерны такие значения, как top
, middle
и bottom
.
Справедливости ради стоит отметить, что каждое из данных свойств имеет куда больше значений, чем мы перечислили. Но поскольку мы рассматриваем свойства в контексте выравнивания содержимого ячеек, то значения актуальны лишь эти.
На практике выравнивание содержимого ячеек выглядит вот так:
Результат в браузере для таблицы, которую мы создали в прошлом уроке:
Таким образом весь текст в ячейках прижался к правому нижнему углу.
Как выровнять текст в ячейке таблицы HTML
Если Вас интересует как выровнять текст в ячейке таблицы и эта ячейка конкретная, нужно задать свойство только для этой ячейки. Например, с помощью атрибута class
. В таблице присваиваете ячейке класс: