Как покрасить ячейки таблицы в css?
2 ответа
от
bulah ,
2 года назад
@roma Покрасить ячейки таблицы в css можно через background-color, если нужно конкретную ячейку или же для таблиц с полосами используйте nth-child() и добавьте background-color ко всем четным (или нечетным) строкам таблицы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> table, tr, th { border: 2px solid; } </style> </head> <body> <table> <tr> <th>Животные</th> <th>Имя</th> </tr> <tr> <td>Кошка</td> <td style="background-color: red">Мурка</td> </tr> </table> </body> </html> |
от
vladimir ,
год назад
@roma
Чтобы покрасить ячейки таблицы в CSS, нужно использовать свойство background-color. Вот пример:
HTML код таблицы:
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table> |
CSS стили для таблицы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
table { border-collapse: collapse; /* Склеивает рамки ячеек */ } td { padding: 10px; /* Отступ внутри ячейки */ } /* Покрасим ячейки первого ряда в красный цвет */ tr:first-child td { background-color: red; } /* Покрасим ячейки второго ряда в синий цвет */ tr:nth-child(2) td { background-color: blue; } |
В этом примере мы использовали селекторы :first-child и :nth-child(), чтобы выбрать первый и второй ряды ячеек и применить к ним разные цвета фона. Также мы добавили свойство border-collapse: collapse; для склеивания рамок ячеек.
15