Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



HTML Таблицы моделирование



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


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

Если вы добавите цвет фона в каждую вторую строку таблицы, вы получите красивый эффект полосок зебры.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

Чтобы оформить любой другой элемент строки таблицы, используйте селектор :nth-child(even) следующим образом:

tr:nth-child(even) {
  background-color: #D6EEEE;
}
Попробуйте сами »

Примечание: Если вы используете (odd) вместо (even), стилизация будет происходить в строке 1,3,5 и т.д. вместо 2,4,6 и т.д.


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

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

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

Установите :nth-child(even) для элементов данных таблицы, подобных этому:

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}
Попробуйте сами »

Примечание: Поместите селектор :nth-child() на оба элемента th и td, если вы хотите использовать стиль как для заголовков, так и для обычных ячеек таблицы.



Комбинироване вертикальных и горизонтальных полос

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

Если вы используете прозрачный цвет, вы получите эффект перекрытия.

                 
                 
                 
                 
                 

Используйте rgba(), чтобы указать прозрачность цвета:

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
Попробуйте сами »

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

Имя Фамилия Сбережения
Андрей Щипунов $100
Сергей Щипунов $150
Татьяна Щипунова $300

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

Добавьте свойство border-bottom ко всем элементам tr для получения горизонтальных разделителей:

tr {
  border-bottom: 1px solid #ddd;
}
Попробуйте сами »

Таблица с возможностью перемещения

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

Имя Фамилия Сбережения
Андрей Щипунов $100
Сергей Щипунов $150
Татьяна Щипунова $300
tr:hover {background-color: #D6EEEE;}
Попробуйте сами »



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.