Парад ячеек и столбцов

УРОК «Как выровнять таблицу и её содержимое по центру/левому/правому краям»

Дорогие друзья!

Очень часто для выполнения замысла представления информации на странице и в таблице, нужно выравнивать саму таблицу или её содержимое по центру страницы или по правому/левому краям. Вообще, по умолчанию, выравнивание настроено по левому краю и если нужно изменить положение содержимого страницы, это нужно задавать явно, с помощью специальных атрибутов тегов.

Чтобы выровнять саму таблицу по центру веб-страницы или внутри блока, в котором она находится, используется атрибут тега table - align="значение" со значением center. Соответственно, если нужно выровнять таблицу по правому краю, то используется значение right, а если по левому - left. Всё просто, посмотрим на примере:

Результат (как видно, таблица находится в центре блока, в котором находится урок):

Теперь посмотрим, как выровнять содержимое ячеек таблицы по горизонтали и вертикали. Для того, чтобы выпровнять содержимое строк по горизонтали, используется тот же атрибут align с нужным значением для тега tr, а для ячеек он применяется для тега td, как здесь:

Результат (обратите внимание, что в верхней строке текст выровнен по правому краю, а в нижней правой ячейке - по центру:

Чтобы выровнять текст по вертикали, используется атрибут тегов tr и td - valign="значение" со значениями top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю) или baseline (по базовой линии). По умолчанию установлено значение этого атрибута middle. Посмотрим на примере:

Результат (для наглядности я увеличила высоту таблицы):

На этом всё. До встречи в следующем уроке!