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

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

Начиная

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

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

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

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

td, th {text-align: center;}

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

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

th {text-align: center;}

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

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

thead th, thead td {text-align: center;}tbody th, tbody td {text-align: center;}tfoot th, tfoot td {text-align: center;}

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

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

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

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

класс = «центрированная ячейка» >

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

.centered-cell {text-align: center;}

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

Завершение

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