HTML-верстка: инструменты и приемы профессиональной front-end разработки

Заголовок.


назад вперед

Внешний вид таблиц можно значительно улучшить с помощью CSS.

Имя Фамилия Сбережения
Петр Сидоров $100
Алексей Выхухолев $150
Женя Вдрызг $300
Леонид Оксолинин $120

Границы ячеек в таблице

Для настройки оформления границ в таблице используется свойство border.

В следующем примере элементам table, th и td задается черная граница:

Пример

table, th, td
{
border: 1px solid black;
}

Посмотреть

Обратите внимание, что в приведенном примере таблица имеет двойную границу. Это связано с тем, что элементы table, th и td имеют свою границу.

Для того, чтобы в местах соприкосновения границ отображать одну границу, надо использовать свойство border-collapse.

Свойство border-collapse определяет то, будут ли границы в местах их соприкосновения с другими границами отображаться отдельно или сливаться в одну границу:

Пример

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

Посмотреть


Высота и ширина таблицы

Высота и ширина таблицы задаются с помощью свойств width и height.

В примере ниже ширина таблица равна 100%, а высота элемента th — 50px:

Пример

table
{
width:100%;
}
th
{
height:50px;
}

Посмотреть


Выравнивание текста в таблице

Текст в таблице выравнивается с помощью свойств text-align (выравнивание по горизонтали) и vertical-align (выравнивание по вертикали).

Свойство text-align выравнивает текст по центру, по левому/правому краю или по ширине:

Пример

td
{
text-align:right;
}

Посмотреть

Свойство vertical-align выравнивает текст по верхнему/нижнему краю или по центру:

Пример

td
{
height:50px;
vertical-align:bottom;
}

Посмотреть


Поля в таблице

Для управления отступами от границ ячеек до их содержимого используется свойство padding. Его можно использовать для элементов td и th:

Пример

td
{
padding:15px;
}

Посмотреть


Цвет

Пример ниже демонстрирует, как задать цвет границ таблицы, текста в таблице и фонового цвета элемента th:

Пример

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Посмотреть


Примеры

Создание красивой таблицы

Положение подписи таблицы



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта