В CSS существует множество способов выравнивания текста в таблице. Рассмотрим несколько основных способов.
- Горизонтальное выравнивание текста
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center;
}
Здесь мы используем свойство text-align: center;
, которое выравнивает текст ячеек таблицы по центру. Вы также можете использовать значения left
и right
для выравнивания текста по левому или правому краю соответственно.
- Вертикальное выравнивание текста
td {
vertical-align: middle;
}
По умолчанию, текст в ячейках таблицы выравнивается по верхнему краю ячейки. С помощью свойства vertical-align
мы можем выровнять текст по центру или по нижнему краю ячейки.
- Выравнивание текста по границе ячейки
td {
padding: 10px;
border: 1px solid black;
}
td:first-child {
text-align: right;
}
td:last-child {
text-align: left;
}
С помощью css селекторов :first-child
и :last-child
, мы можем выравнивать текст по границе ячейки, например, для создания списка с отступом. Здесь мы выравниваем текст первой ячейки по правому краю, а последней — по левому краю.
Это лишь несколько примеров возможностей CSS для выравнивания текста в таблице. Вы можете комбинировать разные свойства и значение для создания нужного вам вида таблицы.