Table center align css: How To Center a Table

Leave a Comment / Css / By /

Выравнивание таблицы CSS

❮ Назад Далее ❯

Горизонтальное выравнивание

Свойство text-align задает горизонтальное выравнивание (например, по левому краю, по правому краю или по центру) содержимого в или.

По умолчанию содержимое элементов выравнивается по центру, а содержимое элементов выравнивается по левому краю.

Чтобы выровнять по центру содержимое элементов , используйте text-align: center :

Имя Фамилия Сбережения
Питер Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Пример

тд {
выравнивание текста: по центру;
}

Попробуйте сами »

Чтобы выровнять содержимое по левому краю, принудительно установите выравнивание элементов

выравнивание по левому краю, с выравнивание текста: по левому краю свойство:

Имя Фамилия Сбережения
Питер Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Пример

-й {
выравнивание текста: по левому краю;
}

Попробуйте сами »

Выравнивание по вертикали

Свойство vertical-align задает выравнивание по вертикали (например, сверху, снизу или посередине) содержимого в или.

По умолчанию вертикальное выравнивание содержимого в таблице по середине (как для и элементы).

В следующем примере задается вертикальное выравнивание текста по нижнему краю для элементов:

Имя Фамилия Экономия
Питер Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Пример

тд {
высота: 50 пикселей;
вертикальное выравнивание: снизу;
}

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как центрировать таблицу с помощью CSS?

Улучшить статью

Сохранить статью

  • Уровень сложности: Базовый
  • Последнее обновление: 17 мар, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Иногда возникают проблемы с центрированием таблиц на веб-странице. С помощью элемента CSS center мы можем центрировать таблицу на нашей веб-странице.

    Чтобы центрировать таблицу, установите для левого и правого полей значение auto . (Таблица не может быть центрирована, если ширина установлена ​​на 100%)

    Синтаксис: 

     .className {
 поле слева: авто;
 поле справа: авто;
}

    HTML

    < html >

    < head >

    < стиль >

    таблица, th, td {

       граница: 1 пиксель сплошной черный;

       граница-коллапс: коллапс;

    }

       

    table. center {

       margin-left: auto;

       поле справа: авто;

    }

    style >

    head >

    < body >

       

    < h3 >Center a Table h3 >

       

    < p >Чтобы центрировать таблицу, установите для полей слева и справа 9 p 9 значение auto:80009 >

       

       

    < table class = "center" >

        < thead >

    < TR >

    < TH > COL 1 TH >

    < TH > COL 2 TH >

    >

    < Tbody >

    < TR >

               < td >1. 1 td >

               < td >2.1 td >

             TR >

    < TR >

    < TD > 1,2 td >

               < td >2.2 td >

             tr >

             < TR >

    < TD > 1,3 TD >

    < td >2.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *