Skip to content

Як центрувати текст у комірці таблиці

15 de Липень de 2021

Якщо ви початківець веб-дизайнер, у вас можуть виникнути запитання про те, як відцентрувати текст усередині комірки таблиці. За допомогою цього посібника вивчіть цю техніку всього за кілька хвилин. Це легко – навіть якщо ви ніколи раніше цього не намагалися.

Починаємо

Центрування тексту всередині комірки найкраще робити за допомогою CSS, подібно до того, як ви центруєте текст в іншому елементі на своїй веб-сторінці. Однак перед тим, як почати, вам потрібно вирішити, що саме ви хочете, щоб бути зосередженим. З таблицею у вас є кілька варіантів, включаючи кожну клітинку таблиці; кожна клітинка заголовка таблиці кожна комірка головки таблиці, тіла таблиці або стопи таблиці. Ви також можете відцентрувати певну комірку або набір комірок у таблиці. Крім того, слід створити внутрішню таблицю стилів у голівці документа або прикріпити до документа як зовнішню таблицю стилів. Ви помістите стилі в центр комірок таблиці в цій таблиці стилів.

Як центрувати кожну клітинку в таблиці

Додайте наступні рядки до таблиці стилів: td, th {
вирівнювання тексту: по центру;
}

Як центрувати кожну комірку заголовка в таблиці

Додайте наступні рядки до таблиці стилів: th {
вирівнювання тексту: по центру;
}

Центрування кожної клітини в голові, тілі або стопі столу

Для того, щоб відцентрувати ці комірки, вам потрібно додати теги таблиці, які не завжди використовуються, наприклад thead th, thead td {
вирівнювання тексту: по центру;
}
tbody th, tbody td {
вирівнювання тексту: по центру;
}
tfoot th, tfoot td {
вирівнювання тексту: по центру;
}

Видаліть стилі для областей, які ви не хочете відцентрувати.

Як центрувати певну клітинку або клітини в таблиці

Для цього вам потрібно встановити клас у клітинках, які потрібно відцентрувати. Додайте наступний атрибут до комірок таблиці, які потрібно відцентрувати:

Потім додайте до таблиці стилів наступне: .centered-cell {
вирівнювання тексту: по центру;
}

Ви можете додати цей клас до будь-якої комірки вашої таблиці.

Підведенню

Не соромтеся використовувати ці стилі для будь-якої з комірок таблиці. Ви можете використовувати їх на об’єднаних клітинках або на окремих клітинках, і текст усередині буде відцентрований.

Формат mla apa chicago Ваше посилання

Кірнін, Дженніфер. “Як центрувати текст у комірці таблиці.” ThoughtCo, 10 червня 2021 р., Thinkco.com/center-text-in-table-cell-3469873.
Кірнін, Дженніфер. (2021, 10 червня). Як центрувати текст у комірці таблиці. Отримано з https://www.thoughtco.com/center-text-in-table-cell-3469873
Кірнін, Дженніфер. “Як центрувати текст у комірці таблиці.” ДумкаCo. https://www.thoughtco.com/center-text-in-table-cell-3469873 (доступ 15 липня 2021 р.).