Лучший способ центрировать текст в ячейке таблицы

Если вы начинающий веб-дизайнер, у вас могут возникнуть вопросы о том, как центрировать текст внутри ячейки таблицы. С помощью этого руководства выучите эту технику всего за несколько минут. Это просто - даже если вы никогда раньше не пробовали.

Начиная

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

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

Как центрировать каждую ячейку в таблице

Добавьте в таблицу стилей следующие строки:

instagram viewer
td, th {
выравнивание текста: центр;
}

Как центрировать каждую ячейку заголовка в таблице

Добавьте в таблицу стилей следующие строки:

th {
выравнивание текста: центр;
}

Центрирование каждой ячейки в голове, теле или ноге стола

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

thead th, thead td {
выравнивание текста: центр;
}
tbody th, tbody td {
выравнивание текста: центр;
}
tfoot th, tfoot td {
выравнивание текста: центр;
}

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

Как центрировать определенную ячейку или ячейки в таблице

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

Добавьте следующий атрибут к ячейкам таблицы, которые вы хотите центрировать:

Затем добавьте в свою таблицу стилей следующее:

.centered-cell {
выравнивание текста: центр;
}

Вы можете добавить этот класс в любую ячейку вашей таблицы.

Заключение

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