СТИЛІЗАЦІЯ ТАБЛИЦЬ CSS
Задання стилю таблиці в цілому
table {border: 2px solid green; width: 100%;}
1 2 3
1 2 3
1 2 3
Задання стилю рядку
tr:hover {background-color: pink;}
1 2 3
1 2 3
1 2 3
Задання стилю коміркам
td {height: 20px; border: 2px solid gray;}
1 2 3
1 2 3
1 2 3
Вирівнювання тексту по горизонталі
td {height: 30px; text-align: right;}
left center right
1 2 3
1 2 3
Вирівнювання тексту по вертикалі
td {height: 30px; vertical-align: bottom;}
top middle bottom
1 2 3
1 2 3
Задання стилю останньому рядку
tr:last-child {color: red;}
1 2 3
1 2 3
1 2 3
Задання стилю першому стовпчику
td:first-child {border: 2px solid gray;}
1 2 3
1 2 3
1 2 3
Cтиль для непарних рядків
tr:nth-child(odd){background-color: RosyBrown;}
1 2 3
1 2 3
1 2 3
1 2 3
Cтиль для парних рядків
tr:nth-child(even){background-color: RosyBrown;}
1 2 3
1 2 3
1 2 3
1 2 3
Задання меж таблиці суцільною лінією
td{border: 2px solid gray;} table {border-collapse: collapse;}
1 2 3
1 2 3
1 2 3
Для кожної клітинки - окрема межа
td{border: 2px solid gray;} table {border-collapse: separate;}
1 2 3
1 2 3
1 2 3