Пример 2. Выравнивание таблицы по правой стороне
Обтекающий таблицу контент...
Результат данного примера показан на рис. 2.
Рис. 2. Выравнивание таблицы по правой стороне
В текущем примере создается таблица с фоном серого цвета и выравниванием по правой стороне. Для разработки отступов от таблицы до контента используется параметр
margin
со значением 10 пикселов.
Чтобы запретить обтекание таблицы при ее выравнивании по одному из краев проще
всего добавляем после таблицы тег
с заданным
стилем clear: both
. Эта команда запрещает
обтекание, как с левого, так и с правого края (пример 3).
Пример 3. Отмена обтекания таблицы
контент...
Выравнивание таблицы по центру делается аналогично, через параметр align="center"
тега
, но в этом случае никакого обтекания
не происходит и контент после таблицы начинается всегда с новой строки.
Посетителю должно быть легко найти нужную информацию на странице. Для этого, а также для выражения некоторой экспрессии используются различные теги HTML. В данной статье будет рассмотрены нюансы работы с таблицами, в частности - их выравнивание.
Основные тонкости
В первую очередь следует заметить, что эта графическая форма представления данных позволяет структурировать информацию, что значительно облегчает ее усвоение. Внутри ячеек таблицы может находиться практически любой контент: от текста до видеоролика. При этом важно учесть не только размер, но и его расположение.
Как сделать саму таблицу по центру
Чаще всего нужно оформить таблицу по центру страницы, хотя изначально она прижата к левой стороне страницы. Для того чтобы выровнять её по центру, нужно задать ей свойство margin со значением auto.
Это приводит к тому, что отступы таблицы вычисляются автоматически. После этого таблица будет находиться по центру страницы.
Выравнивание по центру в ячейках
Не менее часто требуется выровнять данные по центру ячейки. При этом существует три способа: горизонтальный, вертикальный и абсолютный. Из их названия понятно, по какой оси будет происходить центрирование. В любом случае используется тег
, отвечающий за конкретную ячейку в строке. Далее необходимо присвоить его атрибутам valign (вертикаль) и/или align (горизонталь) значение "center", в зависимости от вашей задачи:
Если вы хотите сделать такое форматирование стандартным для всего сайта или страницы (чтобы не переписывать каждую таблицу), то следует использовать CSS-стили. Для этого допишите следующий код внутри тега :
С помощью этого способа также можно задать выравнивание как для конкретной ячейки, так и для столбца, строки или всей таблицы в целом. Как можно заметить, любой из способов весьма прост.
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру. Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью: - таблицы,
- отступов,
- line-height ,
- растягивания,
- отрицательного margin ,
- transform ,
- псевдоэлемента,
- flexbox .
В качестве иллюстрации рассмотрим следующий пример.
Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны
. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle . Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block . Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы. Outer {
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: #ffc;
}
.inner {
display: inline-block;
width: 100px;
height: 100px;
background-color: #fcc;
}
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/ Почему так произошло?
Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого
(кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок. Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них. Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
http://jsfiddle.net/c1bgfffq/1/ Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока. Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
.outer-wrapper {
display: table;
}
.outer {
display: table-cell;
}
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.Outer {
height: 200px;
}
.inner {
height: 100px;
margin: 50px 0;
}
http://jsfiddle.net/c1bgfffq/6/ Минус решения - оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков. Выравнивание с помощью line-height
Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .Outer {
height: 200px;
line-height: 200px;
}
.inner {
white-space: nowrap;
overflow: hidden;
}
http://jsfiddle.net/c1bgfffq/12/ Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle . Outer {
height: 200px;
line-height: 200px;
}
.inner {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/c1bgfffq/15/ Минус данного способа заключается в том, что должна быть известна высота внешнего блока. Выравнивание с помощью "растягивания"
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего. Для этого нужно: - задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
- добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
- установить значение auto для вертикальных отступов внутреннего блока.
.outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
http://jsfiddle.net/c1bgfffq/4/ Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto . Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего. Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2. Outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
http://jsfiddle.net/c1bgfffq/13/ Минус данного способа - должна быть известна высота внутреннего блока. Выравнивание с помощью transform
Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .Outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
http://jsfiddle.net/c1bgfffq/9/ Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform . Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование. Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда? Outer {
display: flex;
width: 200px;
height: 200px;
}
.inner {
width: 100px;
margin: auto;
}
http://jsfiddle.net/c1bgfffq/14/ Минус данного способа − Flexbox поддерживается только современными браузерами. Какой способ выбрать?
Нужно исходить из постановки задачи: - Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
- Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
- Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
- Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .
Теги:
Добавить метки
или свойства HTML таблицы и ячеек на примерах
Продолжаем изучать HTML таблицы
. Текущий урок научит вас устанавливать размер таблицы
, выравнивать по вертикали и по горизонтали ее содержимое, точнее содержимое ячеек. Также вы узнаете как определить заголовк HTML таблицы
.
Навигация по странице
HTML ширина ячейки таблицы и ее высота (размер ячеек)
HTML высота ячеек и их ширина, размер
определяется следующими атрибутами:
Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда
— ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы
.
Горизонтальное HTML выравнивание в таблице и в ячейке, текст
HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы
:
Результат:
Результат:
Результат:
Теги | | определяют заголовок HTML таблицы
.
HTML таблица по центру, с левой, с правой стороны
Горизонтальное расположение HTML таблицы
внутри web-страницы:
В примере выше показаны три отдельные таблицы
, каждая из которых состоит из одной ячейки. bgcolor - HTML
атрибут - определяет цвет фона. В предыдущем уроке мы использовали его CSS
аналог - background-color .
HTML таблица расположена внутри ячейки
Внутри второй ячейки находится еще одна таблица
со своими атрибутами, значениями и стилями.
Размеры и фон внутренней таблицы
, в отличае от внешней, заданы с помошью CSS
.
информирует браузер о завершении таблицы.
Любая таблица состоит из столбцов и строк.
Тег
создает строку, а тег |
ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.
Тег |
также создает ячейку. Его отличие от тега |
в том, что ячейка созданная тегом |
является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.
Содержимое ячейки, созданной тегом |
по умолчанию располагается в ее левой чаcти.
Тег
создает заголовок таблицы, он располагается внутри тега
- сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.
Заголовок таблицы
1-я ячейка 1-ой строки |
2-я ячейка 1-ой строки |
1-я ячейка 2-ой строки |
2-я ячейка 2-ой строки |
|
|
Выравнивание таблицы. Выравнивание содержимого ячеек
Для выравнивания таблицы используется атрибут 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
устанавливает количество ячеек, объединяемых по вертикали.
Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
Фон таблицы. Фон ячеек таблицы
В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.
Атрибут background
тега
задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу ().
Атрибут bgcolor
тега
задает цвет фона таблицы. Цвет можно задать двумя способами ()
При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег
).
|
Темно-розовый - цвет фона таблицы. |
Фоновый рисунок отдельной ячейки - небо! |
|
Напомним также о существовании атрибута cols
тега
, который указывает браузеру количество столбцов в таблице.
Использование атрибута cols
позволяет браузеру быстрее отобразить содержимое таблицы.
Редактирование таблицы
В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.
К первой группе относятся теги
и
. Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.
Один из этих тегов располагают сразу после тега
. Допустим это тег
.
При помощи атрибута span
тега
указывают количество колонок, к которым будут применены атрибуты align
, valign
или width
(выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок
).
Если атрибут span
в теге
отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега
задаются свойства для следующих (следующей - если атрибут span
отсутствует
) колонок таблицы и т.д.
"2"
width=
"70px"
>
1
|
2
|
3
|
4
|
5
|
Ко второй группе тегов относятся также практически идентичные между собой теги
,
и
.
Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align
и valign
соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor
.
При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.
Теги
и
должны быть расположены перед тегом
, сразу после открывающего таблицу тега
. Строки, помещенные в тег
представлены вверху таблицы, а строки заключенные в тег
будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы.
Тег
допускается использовать несколько раз внутри тега
.
|
1
|
2
|
|
3
|
4
|
|
5
|
6
|
|
7
|
8
|
"right"
bgcolor=
"#00FF33"
>
|
9
|
10
|
Лучшие статьи по теме
| | | |
Как настроить смартфоны и ПК. Информационный портал
