How to Center the Text in the HTML Table Row
If you need to align the text of a <td> element to the center of each table row (<tr>), you’re in the right place.
Earlier, it was possible to do this using the align attribute, however, it is deprecated in HTML5. Instead of using that attribute, use the CSS text-align property, or specify it through the inline style attributes.
In this snippet, we’ll show and explain examples with the text-align property and style attribute.
Create HTML
- Use a <table> element.
- Add two <tr> elements and use two <td> elements inside each of them.
Add CSS
- Set the border for the <table> and <td> elements.
- Add the height and width properties for the <td> tag.
- Set the text-align property to «center», and the vertical-align to «middle» for the <td> tag.
Now, you can see the full example.
Example of centering the text in table row using the CSS text-align property:
Result
| Text | Text |
| Text | Text |
In our next example, we specify the text-align and vertical-align properties through the style inline attribute.
Example of centering the text in table row using the style attributes:
In our last example, we use the <thead> and <tbody> elements. Here, you can see that our <th> elements are aligned to the right, while the <td> elements are at the center.
How to center the contents of an HTML table?
I am using an HTML <table> and I want to align the text of <td> to the center in each cell.
How do I center align the text horizontally and vertically?
9 Answers 9
Here is an example with CSS and inline style attributes:
EDIT: The valign attribute is deprecated in HTML5 and should not be used.
The CSS to center text in your td elements is
HTML in line styling example:
CSS file example:
Try to put this in your CSS file.
Is the only correct answer imho, since you’re working with tables which is old functionality most common used for e-mail formatting. So your best bet is to not use just style but inline style and known table tags.
If you are using Bootstrap, you can use inbuilt class
The following worked for me to vertically align content (multi-line) in a list-table
Using theme overrides .css option I defined:
In the theme that I use ‘python-docs-theme’, the cell entry is defined as ‘stub’ class. Use your browser development menu to inspect what your theme class is for cell content and update that accordingly.
Как выровнять текст в ячейке таблицы html
Для выравнивания элементов таблиц по горизонтали и вертикали в элементах TABLE, TR, TH и TD используют атрибуты align и valign.
Атрибут align применяется ко всем элементам таблицы и определяет общее горизонтальное выравнивание:
Атрибут valign также применяется ко всем элементам таблицы и определяет общее вертикальное выравнивание:
В листинге 3.6 приведен пример использования в различных комбинациях описанных выше атрибутов форматирования таблицы и содержимого ячеек (рис. 3.11).
Листинг 3.6. Пример использования выравнивания таблицы и содержимого ячеек
Как выровнять текст в таблице?
По умолчанию текст в ячейке заголовка (th) и в ячейках тела таблицы (td) выровнен следующим образом:
по высоте — по середине,
по ширине — по левому краю ячейки.
Выровнять текст первого столбца по центру/правому краю можно при помощи конструкции
Выровнять текст в ячейке по вертикали по верхней/нижней границе ячейки можно только в случае, если для ячейки задана высота:
Как выровнять таблицу по центру страницы/блока?
Выровнять таблицу по центру можно при помощи конструкции
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега
Рис. 1. Выравнивание элементов по горизонтали
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
Пример 2. Использование valign
В данном примере характеристики ячеек управляются с помощью параметров тега
Пример 3. Применение стилей для выравнивания
Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
Рис. 2. Добавление формулы в документ
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Рис 3. Расположение полей формы и текста
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).
Пример 5. Выравнивание полей формы
В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .
Таблицы — Основы верстки контента
Таблицы — страшный сон верстальщика. Они громоздкие в своей верстке и в них очень легко запутаться. Важно «набить руку» и вы сможете достаточно быстро и без боли верстать даже самые сложные варианты таблиц.
Базовая верстка таблиц
Таблица — составной элемент, который формируется сразу из нескольких вложенных друг в друга тегов. Это похоже на то, как верстаются списки — имеется контейнер и внутри него специальные теги-элементы. Таблицы имеют похожие структуры, только контейнеров и элементов немного больше.
Любая таблица начинается с парного тега <table> . Одного этого контейнера уже достаточно, чтобы получить первую работающую таблицу.
В отличие от списков, таблицы можно назвать двухмерной системой. Здесь есть строки и столбцы. Именно в таком порядке они и обозначаются.
Для создания строки используется тег <tr> (от англ. Table Row). Количество строк и регулируется количеством этих тегов внутри <table> . Попробуем создать три строки:
Сейчас эта разметка почти ничего не сообщает браузеру. Если вставить текст в тегах <tr> , то браузер посчитает такой код неверным и постарается обработать его самостоятельно. Например, некоторые браузеры автоматически «вытащат» весь этот текст и переместят его за пределы тега <table> .
Для добавления данных нужны колонки. Их можно добавить с помощью тега <td> (от англ. Table Data). Количество колонок вы так же регулируете самостоятельно. Сколько тегов <td> , столько колонок в таблице и будет.
Важно: количество колонок должно совпадать в каждой строке. Если количество колонок будет не совпадать, то таблица может банально «сломаться». Следите за этим.
Заметьте, что по умолчанию таблицы не имеют никаких границ между строками и ячейками. Для их добавления можно пойти двумя путями:
- Указать атрибут border для тега <table> . Это сразу установит все возможные границы, как для строк, так и для столбцов. Данный метод считается устаревшим и не рекомендуется к использованию.
- Использовать свойство border для необходимых тегов.
Лучший вариант — использование CSS. Так вы будете хранить стили в одном месте, и не будет нужды вспоминать об атрибутах.
Главная неприятность — возникновение двойных границ. Это может быть дизайнерской «фишкой», но чаще всего такое не требуется. Нужно «схлопнуть» отступы и для этого используется свойство border-collapse со значением collapse . Для возвращения в исходное состояние используется значение separate .
Выравнивание контента по вертикали
Помимо знакомого вам свойства text-align , таблицы позволяют выравнивать контент по вертикали. Это простая операция, которая постоянно использовалась во времена табличной верстки. Главное, не пытайтесь найти такие макеты. Выровнять по вертикали можно любой контент, будь то просто текст или какой-то блок.
Для выравнивания по вертикали используется свойство vertical-align , которое принимает одно из четырех значений:
- baseline — выравнивание по базовой линии шрифта. Подробнее с таким выравниванием и его принципами вы познакомитесь в курсе CSS: Flex.
- top — выравнивание по верхнему краю ячейки.
- middle — выравнивание по центру. Стандартное поведение для контента внутри ячеек.
- bottom — выравнивание по нижнему краю ячейки.
Заголовки таблицы
Сложно представить себе таблицу, которая не имеет заголовков. Без них понять, какая ячейка относится к какой информации, почти невозможно. Можно визуально задать стили заголовков и для некоторых ячеек ввести свои стили. Но семантически таких заголовков не будет существовать, что плохо для доступности.
Создать секцию с заголовками можно с помощью тега <thead> . Строки и ячейки внутри такой обертки будут являться заголовками колонок нашей таблицы. Есть и еще небольшое изменение: вместо тега <td> внутри шапки используется тег <th> (от англ. Table Head). Это, помимо семантической нагрузки, позволяет проще определять стили.
Хорошей практикой является добавление тега <tbody> для основного контента. Если этого не сделать, то браузер подставит его сам, но лучше доверять собственной разметке, чем работе браузера.
В качестве заголовка самой таблицы используется текст, обрамленный в тег <caption> . По умолчанию он располагается вверху всей таблицы, вне зависимости от того, где вы расположите тег. Это поведение можно контролировать с помощью свойства caption-side . Оно принимает одно из двух значений:
- top — позиция по умолчанию. Заголовок располагается до таблицы.
- bottom — расположение заголовка после таблицы.
Пример таблицы с использованием новых тегов и свойств:
Объединение строк и столбцов
Не все таблицы имеют простую структуру из ровных столбцов и строк. Объединение нескольких строк или столбцов — распространенная практика при верстке таблиц. Рассмотрим базовые правила на примере табеля выплаты зарплаты сотрудников.
Сама по себе таблица является достаточно простой и не должна вызвать у вас никаких проблем. Попробуйте сверстать ее самостоятельно. После этого продолжите урок. Чем больше таблиц вы сверстаете, тем меньше ошибок в них будете допускать.
Создадим базовый каркас всей таблицы, без объединения строк или столбцов:
Обратите внимание на пустые ячейки. Они не нужны в данной таблице и от них нужно избавиться таким образом, чтобы информация в соседних ячейках получила правильный перенос и начала занимать все доступное пространство.
В HTML для этой операции существуют два атрибута:
- colspan — объединение столбцов.
- rowspan — объединения строк.
Принцип работы достаточно прост — в качестве значения атрибута указывается количество строк/столбцов, которое должен занять элемент. Например,
- <td colspan="3"> — ячейка должна занять пространство трех столбцов.
- <td rowspan="2"> — ячейка должна занять пространство в две строки.
Важно: ячейки, на месте которых будут расположены ячейки с colspan и rowspan, должны быть удалены из таблицы.
Попробуем объединить данные о менеджере первых двух сотрудников. Для этого нужно у ячейки с нужным менеджером установить атрибут rowspan со значением 2. Обязательно нужно удалить последнюю ячейку в строке ниже.
Проделаем то же самое для последней строки, только теперь нужно объединить столбцы. Для этого используем атрибут colspan со значением 4.
Итоговый вид таблиц:
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно