Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

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

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS таблицы


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

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

Таблица Границы

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

В приведенном ниже примере определяет черную рамку для <table> , <th> и <td> элементы:

пример

table, th, td {
   border: 1px solid black;
}
Попробуй сам "

Обратите внимание на то, что таблица в приведенном выше примере имеет двойные границы. Это потому , что как таблица и <th> и <td> элементы имеют отдельные границы.


Collapse границы таблицы

border-collapse свойство устанавливает ли границы таблицы должны быть свернуты в одну границу:

пример

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Попробуй сам "

Если вы хотите только рамку вокруг таблицы, только указать border свойство для <table> :

пример

table {
    border: 1px solid black;
}
Попробуй сам "

Таблица Ширина и высота

Ширина и высота таблицы определяются width и height свойства.

В приведенном ниже примере задает ширину таблицы до 100%, а высота <th> элементы для 50px:

пример

table {
    width: 100%;
}

th {
    height: 50px;
}
Попробуй сам "

Горизонтальное выравнивание

text-align свойство задает горизонтальное выравнивание (например , влево, вправо, или центра) контента в <th> или <td> .

По умолчанию, содержание <th> элементы выравниваются по центру и содержание <td> элементы выравниваются по левому краю.

Следующий пример выравнивает влево текст в <th> элементы:

пример

th {
    text-align: left;
}
Попробуй сам "

Вертикальное выравнивание

vertical-align свойство устанавливает вертикальное выравнивание (например , сверху, снизу или посередине) контента в <th> или <td> .

По умолчанию вертикальное выравнивание содержимого в таблице средний (для обоих <th> и <td> элементы).

Следующий пример устанавливает вертикальное выравнивание текста в нижней части для <td> элементы:

пример

td {
    height: 50px;
    vertical-align: bottom;
}
Попробуй сам "

Таблица Перетяжка

Для того, чтобы контролировать пространство между границей и содержимым в таблице, используйте padding свойство на <td> и <th> элементы:

пример

th, td {
    padding: 15px;
    text-align: left;
}
Попробуй сам "

Горизонтальные разделители

Имя Фамилия экономия
Питер Грифон $ 100
Лоис Грифон $ 150
Джо Swanson $ 300

Добавьте border-bottom свойство <th> и <td> для горизонтальных разделителей:

пример

th, td {
    border-bottom: 1px solid #ddd;
}
Попробуй сам "

Hoverable Таблица

Используйте :hover селектор на <tr> , чтобы выделить строки таблицы при наведении мыши:

Имя Фамилия экономия
Питер Грифон $ 100
Лоис Грифон $ 150
Джо Swanson $ 300

пример

tr:hover {background-color: #f5f5f5}
Попробуй сам "

Полосатые Столы

Имя Фамилия экономия
Питер Грифон $ 100
Лоис Грифон $ 150
Джо Swanson $ 300

Для зебры полосатые таблиц, используйте nth-child() селектор и добавить background-color для всех четных (или нечетных) строк таблицы:

пример

tr:nth-child(even) {background-color: #f2f2f2}
Попробуй сам "

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

В приведенном ниже примере задает цвет фона и цвет текста <th> элементов:

Имя Фамилия экономия
Питер Грифон $ 100
Лоис Грифон $ 150
Джо Swanson $ 300

пример

th {
    background-color: #4CAF50;
    color: white;
}
Попробуй сам "

Отзывчивый Таблица

Чуткий таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал, чтобы отобразить полное содержание:

Имя Фамилия Точки Точки Точки Точки Точки Точки Точки Точки Точки Точки Точки Точки
Джил кузнец 50 50 50 50 50 50 50 50 50 50 50 50
Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94
Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67

Добавьте элемент контейнера (например , <div> ) с overflow-x:auto вокруг <table> элемент , чтобы сделать его отзывчивым:

пример

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Попробуй сам "

Примеры

Еще примеры

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

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


Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»


Свойства CSS Таблица

Имущество Описание
border Устанавливает все свойства рамки в одной декларации
border-collapse Указывает, должен ли быть свернуты границы таблицы
border-spacing Задает расстояние между границами соседних ячеек
caption-side Определяет размещение в заголовок таблицы
empty-cells Указывает, следует ли отображать или нет границ и фона на пустых ячеек в таблице
table-layout Задает алгоритм компоновки для использования таблицы