Лучшее руководство по CSS таблица (таблица) в 2024 году. В этом руководстве вы можете изучить Таблица Border,примеров,складная рама,примеров,Ширина стола и высота,примеров,Выравнивание формы текста,примеров,примеров,заполнение формы,примеров,таблица цветов,примеров,Другие примеры,

CSS таблица (таблица)

Использование CSS может значительно улучшить внешний вид HTML-таблиц.

компания контакт страна
Alfreds Futterkiste Мария Андерс Германия
Berglunds snabbkop Кристина Берглунд Швеция
Centro Comercial Moctezuma Франциско Чанг Мексика
Ernst Handel Roland Мендель Австрия
Остров Торговый Хелен Беннетт Великобритания
Koniglich Эссен Филипп Крамер Германия
Laughing Вакх винными погребами Йоши Tannamuri Канада
Magazzini Alimentari Риунити Джованни Ровелли Италия
Север / Юг Саймон Кроутэр Великобритания
Париж специальности по своему характеру Мари Бертран Франция
Big Cheese Лиз Никсон США
Vaffeljernet Палле Ибсен Дания

Таблица Border

Определяет CSS границы таблицы, используйте свойство границы.

Следующий пример определяет таблицу Th и TD элементами черной границы:

примеров

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

Попробуйте »

Обратите внимание, что в приведенном выше примере, таблица имеет двойную границу. Это происходит потому, что таблица и й / TD элементы имеют отдельные границы.

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

складная рама

атрибут пограничного коллапса установлен ли границы таблицы свернуты в одну границу или разделены:

примеров

таблица
{
границы коллапса: крах;
}
стол, й, тд
{
границы: 1px сплошного черного цвета;
}

Попробуйте »


Ширина стола и высота

Ширина и высота атрибуты задают ширину и высоту стола.

В следующем примере устанавливается на 100% ширины высота стола 50 пикселей й элемент:

примеров

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

Попробуйте »


Выравнивание формы текста

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

выравнивания текста свойство устанавливается горизонтальное выравнивание, как влево, вправо или по центру:

примеров

td
{
text-align:right;
}

Попробуйте »

Вертикальные выравнивания Параметры свойств выравнивания по вертикали, такие как верх, низ, или посередине:

примеров

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

Попробуйте »


заполнение формы

Если пространство между пограничным контролем в таблице содержания, вы должны использовать атрибут TD заполнения и й элементы:

примеров

td
{
padding:15px;
}

Попробуйте »


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

Следующий пример определяет цвет границы, а й элементы цвета текста и фона:

примеров

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

Попробуйте »


примеров

Другие примеры

Сделать персональную форму
Этот пример демонстрирует, как создать персональную форму.

Установите положение заголовка таблицы
Этот пример демонстрирует, как позиционировать заголовок таблицы.

CSS таблица (таблица)
10/30