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 элементами черной границы:
Обратите внимание, что в приведенном выше примере, таблица имеет двойную границу. Это происходит потому, что таблица и й / TD элементы имеют отдельные границы.
Для отображения одного кадра таблицы, используйте свойство пограничного коллапса.
складная рама
атрибут пограничного коллапса установлен ли границы таблицы свернуты в одну границу или разделены:
примеров
{
границы коллапса: крах;
}
стол, й, тд
{
границы: 1px сплошного черного цвета;
}
Попробуйте »
Ширина стола и высота
Ширина и высота атрибуты задают ширину и высоту стола.
В следующем примере устанавливается на 100% ширины высота стола 50 пикселей й элемент:
Выравнивание формы текста
выравнивание текста таблицы и вертикального выравнивания свойства.
выравнивания текста свойство устанавливается горизонтальное выравнивание, как влево, вправо или по центру:
Вертикальные выравнивания Параметры свойств выравнивания по вертикали, такие как верх, низ, или посередине:
заполнение формы
Если пространство между пограничным контролем в таблице содержания, вы должны использовать атрибут TD заполнения и й элементы:
таблица цветов
Следующий пример определяет цвет границы, а й элементы цвета текста и фона:
примеров
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
Попробуйте »
Другие примеры
Сделать персональную форму
Этот пример демонстрирует, как создать персональную форму.
Установите положение заголовка таблицы
Этот пример демонстрирует, как позиционировать заголовок таблицы.