• Css выравнивание в ячейке таблицы. Все способы вертикального выравнивания в CSS

    22.11.2021

    Содержимое ячеек может быть выровнено по левому краю, по правому краю или по центру. На новом рабочем листе все ячейки имеют формат Обычный , в котором числа, даты и время выравниваются по правому краю ячейки, текст – по левому, а логические значения ИСТИНА и ЛОЖЬ – центрируются. Изменение выравнивания не влияет на тип данных. Для выравнивания содержимого ячеек необходимо:

      выделить ячейки, которые следует отформатировать;

      в менюФормат выбрать команду Ячейки ;

      выбрать вкладыш Выравнивание (рис.22);

      в поле списка по горизонтали выбирается тип выравнивания по горизонтали:

    по значению – выравнивание по умолчанию в зависимости от типа данных;

    по левому краю (отступ) – содержимое ячейки выравнивается по левому краю с отступом, указанным в поле справа;

    по центру – содержимое ячейки центрируется;

    по правому краю – содержимое ячейки выравнивается по правому краю;

    с заполнением – содержимое выделенного диапазона заполняется символами, указанными в левой ячейке выбранного диапазона;

    по ширине – содержимое ячейки разбивается на несколько строк, а пробелы между словами устанавливаются так, чтобы ширина строк соответствовала ширине ячейки;

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

      в поле списка по вертикали выбирается тип выравнивания по вертикали:

    по верхнему краю – содержимое ячейки выравнивается по верхнему краю;

    по центру – по центру;

    по нижнему краю – по нижнему краю;

    по высоте – содержимое ячейки разбивается на несколько строк, первая и последняя строки выравниваются по верхней и нижней границе ячейки;

      в группе флажков Отображение можно включить следующие режимы:

    переносить по словам – по достижению правой границы ячейки текст будет переноситься на новую строку;

    автоподбор ширины – размер символов уменьшается так, что содержимое ячейки помещается в границах ячейки;

    объединение ячеек – выделенные ячейки объединяются в одну;

      в рамке Ориентация выбирается направление расположения текста в ячейке – текст можно расположить вертикально или под углом.

    Для быстрого выравнивания данных в ячейках используются кнопки .

    Чтобы выровнять текст по центру нескольких столбцов, необходимо:

    Установление шрифта

    Для установления шрифта необходимо:

      выделить группу ячеек;

      в меню Формат выбрать команду Ячейки ;

      выбрать вкладыш Шрифт (рис.23);

      в списке Шрифт выбирается тип шрифта;

      в поле Начертание выбирается начертание шрифта:

    обычный – обычное начертание;

    курсив – курсивное начертание ;

    полужирный – жирное начертание ;

    полужирный курсив – жирное курсивное начертание .

      в поле Размер – размер шрифта в пунктах (1 пункт = 0,375мм).

      в поле Подчеркивание тип линии подчеркивания:

    Нет – подчеркивание не используется;

    Одинарное, по значению подчеркивание символов одинарной линией;

    Двойное, по значению подчеркивание символов двойной линией;

    Одинарное, по ячейке подчеркивание одинарной линией по ширине ячейки;

    Двойное, по ячейке подчеркивание двойной линией по ширине ячейки;

      в поле Цвет цвет символов;

      в рамке Эффекты можно установить флажки:

    зачеркнутый зачеркивание текста одинарной линией;

    верхний индекс размер символов уменьшается, текст располагается выше;

    нижний индекс размер символов уменьшается, текст располагается ниже;

      если установить флажок Обычный , то в ячейке установится шрифт по умолчанию;

      щелкнутьОК .

    Для быстрого форматирования символов используется панель инструментов Форматирование .

    Задача

    Выровнять содержимое ячеек таблицы по их верхнему краю.

    Решение

    По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной ячейке текст начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью стилевого свойства vertical-align со значением top , добавляя его к селектору td , как показано в примере 1.

    Пример 1. Применение vertical-align

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    Выравнивание содержимого ячеек

    Углерод Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества.

    В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.

    Для задания выравнивания таблицы по центру 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" тега

    , но в этом случае никакого обтекания не происходит и контент после таблицы начинается всегда с новой строки.

    Похожие статьи