Table align css center: How To Center a Table

Как центрировать таблицу в CSS

В отличие от таблиц HTML, которые создаются с помощью тега

, таблицы CSS представляют собой отображение элементов, расположенных в виде таблицы.

CSS предоставляет больше возможностей для настройки стиля и макета, а также предпочтительнее для целей SEO .

Вот как вы можете создать и центрировать таблицу в CSS.

  • Создать таблицу в CSS
  • Центрировать таблицу в CSS
  • Центрировать текст в таблице
  • FAQ
  • Важное сообщение: мы гордимся тем, что являемся аффилированными лицами некоторых инструментов, упомянутых в этом руководстве. Если вы нажмете на партнерскую ссылку и впоследствии совершите покупку, мы получим небольшую комиссию без каких-либо дополнительных затрат для вас (вы ничего не платите дополнительно). Для получения дополнительной информации ознакомьтесь с раскрытием информации об аффилированных лицах.

    Создание таблицы в CSS

    Чтобы создать базовую структуру таблицы в CSS, вы можете использовать следующий код:

     . table {
      дисплей: таблица;
      ширина: 100%;
    }
    .ряд {
      отображение: таблица-строка;
    }
    .клетка {
      отображение: таблица-ячейка;
      отступ: 10 пикселей;
      граница: 1px сплошной черный;
    }
     

    Класс .table определяет общий контейнер таблицы, класс .row определяет строку таблицы, а класс .cell определяет ячейку таблицы.

    👉 У вас также есть стиля для ячеек , таких как отступы и граница для видимости.

    Центрировать таблицу в CSS

    Чтобы централизовать таблицу, вам нужно обернуть ее в элемент-контейнер, такой как

    , и применить элементы стиля к центр ит. Код будет выглядеть так:

     .table-container {
      ширина: 50%;
      поле: 0 авто;
      выравнивание текста: по центру;
    }
     

    Затем примените стили таблицы

    к элементу таблицы в контейнере .

     таблица {
      граница коллапса: коллапс;
      ширина: 100%;
    }
     

    Наконец, стиль ячейки таблицы, как вам нравится:

     td, th {
      граница: 1px сплошной черный;
      отступ: 10 пикселей;
    }
     

    Ознакомьтесь с этим курсом CSS, чтобы узнать больше 👈

    Центрировать текст в таблице

    Если вы хотите, чтобы текст в вашей таблице CSS был централизованным, вам нужно использовать свойство text-align и установить для него значение по центру.

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

    Центрирует весь текст в таблице.

    Однако, если вы хотите центрировать только определенные ячейки, вы можете использовать класс и установить свойство text-align. 👇

     
    <стиль> .центр { выравнивание текста: по центру; }

    Часто задаваемые вопросы

    Как центрировать таблицу внутри блока div в CSS?
    Вы можете центрировать таблицу внутри блока div в CSS, установив для свойства поля таблицы значение auto.

     <дел>
      <таблица>
        
      
    
    <стиль>
      .таблица-контейнер {
        ширина: 50%;
        поле: 0 авто;
        выравнивание текста: по центру;
      }
      
      стол {
        граница коллапса: коллапс;
        ширина: 100%;
      }
    
     

    Как центрировать таблицу в CSS?
    Свойство «margin: 0 auto» центрирует таблицу по горизонтали в CSS.

     таблица {
      поле: 0 авто;
      дисплей: таблица;
    }
     

    Почему я не могу центрировать таблицу в CSS?
    Возможно, у вас неправильная структура HTML. Убедитесь, что таблица заключена в элемент-контейнер, например div, и элемент-контейнер имеет правильные стили.

    Отлично! Вы центрировали таблицу. Если вам нужно еще советов по CSS и руководств? Посмотрите остальные наши уроки.

    Ссылка скопирована!

    Создание таблицы и центрирование объектов в ней с помощью HTML и CSS

    Как и большинство наших постов с ответами на ваши вопросы, мы возвращаемся к основам. Мы получаем всевозможные вопросы от наших пользователей на наших форумах, в Twitter и Facebook. Один вопрос, который возник, и который мы рассмотрим в этом посте, касается создания таблицы и центрирования объектов с использованием HTML и CSS.
    Пользователям, которые ранее оформляли таблицы с помощью HTML, этот учебник покажется относительно простым. Однако, если вы новичок в HTML и CSS, вы все равно можете создать эту таблицу без особых усилий. В этом руководстве мы используем Dreamweaver CC.

    Начнем.

    Создать новую страницу

    1. Открыть Dreamweaver
    2. Выберите «Файл» > «Новый»
    3. Убедитесь, что в диалоговом окне «Новый документ» в качестве типа страницы выбран HTML.
    4. Нажмите «Создать».
    5. В представлении «Код» найдите тег «. Между открывающим и закрывающим тегом заголовка введите «Центрирование объектов в таблице».
    6. Выберите «Файл» > «Сохранить как» и сохраните файл как centering_tables.html.

    Создание контейнера для таблицы

    Прежде чем приступить к созданию таблицы, мы создадим тег div-контейнера (containerDiv) для хранения содержимого страницы, а также еще один контейнер, в который мы поместим таблицу (tableDiv ). В редакторе кода между тегами body введите следующий код:

    Теперь у нас есть контейнер для содержимого страницы и собственный DIV для таблицы, которую мы сейчас создадим.

    Создайте таблицу с помощью HTML

    Внутри контейнера tableDiv создайте таблицу. Введите «Привет» в каждую из ячеек, чтобы мы могли четко видеть таблицу в представлении «Дизайн» или «Интерактивный просмотр».

    Привет
    Привет
    Привет
    Привет
    Привет
    Привет
     

    В интерактивном представлении или представлении «Дизайн» теперь вы сможете увидеть таблицу 2 × 2 с надписью «Hello» в каждой из ячеек. Вы также должны увидеть div-контейнер, в который заключена таблица.

    https://blog.adobe.com/media_a1ee32218eebff8f6035eaec1ccc039f8d9ee285.gif

    Стиль таблицы

    Ниже закрывающего тега заголовка создайте открывающий и закрывающий теги стиля. Затем используйте этот фрагмент кода для стилизации таблицы. В следующем фрагменте кода свойство border-collapse создает единую непрерывную границу для таблицы. Остальные свойства говорят сами за себя.

     .табличный стиль {
    граница: тонкая сплошная #EFEFEF;
    граница коллапса: коллапс;
    ширина: 800 пикселей;
    поле: 0 авто;
    выравнивание текста: по центру;
    выровнять элементы: по центру;
    }
     

    В теле примените стиль к тегу таблицы.

    Предварительный просмотр файла в браузере с помощью меню «Файл» > «Просмотр в браузере». Теперь вы должны увидеть таблицу по центру страницы со светло-серой рамкой.


    http://blogs.adobe.com/creativecloud/files/2015/03/hello_cod2e.png

    Стиль ячеек в таблице

    Теперь нам нужны разделители для каждой из ячеек в таблице. Давайте работать над этим.
    Прямо под tableStyle в разделе Style кода введите этот фрагмент кода.
    Заполнение гарантирует, что текст внутри ячейки получит передышку.

     .таблица {
    выровнять содержимое: по центру;
    ширина границы: тонкая;
    граница: тонкая сплошная #EFEFEF;
    отступ: 5px;
    }
     

    Убедитесь, что стиль применен ко всем ячейкам в таблице.

    Предварительный просмотр страницы в браузере. Это выглядит так?


    http://blogs.adobe.com/creativecloud/files/2015/03/hello_code3.png

    Страница центрируется в своем контейнере, и содержимое таблицы также центрируется.

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

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

    Этот текст будет центрирован