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

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

Начиная

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

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

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

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

 td, th {
 text-align: center; 
} 
 

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

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

 th {
 text-align: center; 
} 
 

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

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

 thead th, thead td {
 text-align: center; 
} 
 tbody th, tbody t 
 text-align: center; 
} < br /> tfoot th, tfoot td {
 выравнивание текста: по центру; 
} 
 

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

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

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

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

  class = "centtered-cell" > 
 

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

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

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

Завершение

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