Стилизация Таблицы HTML
Используйте CSS, чтобы улучшить внешний вид таблиц.
Таблица HTML - Полосы Зебры
Задание фонового цвета через один ряд создаёт эффект полос зебры. Используйте селектор tr:nth-child(even).
Примечание: Использование (odd) вместо этого раскрашивает ряды 1, 3, 5 и так далее, а не 2, 4, 6.
Пример
Каждый второй ряд окрашен.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
<tr><td>17</td><td>18</td><td>19</td><td>20</td></tr>
</table>
</body>
</html>
Таблица HTML - Вертикальные Полосы Зебры
Для вертикальных полос раскрашивайте каждый второй столбец вместо каждого второго ряда, используя :nth-child(even) на ячейках.
Примечание: Примените селектор и к th, и к td, если хотите полосы и на заголовках, и на обычных ячейках.
Пример
Каждый второй столбец окрашен.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
<tr><td>17</td><td>18</td><td>19</td><td>20</td></tr>
</table>
</body>
</html>
Комбинирование Вертикальных и Горизонтальных Полос Зебры
Вы можете комбинировать оба варианта, чтобы полосами были и каждый второй ряд, и каждый второй столбец. Использование прозрачного цвета rgba() заставляет пересечения сливаться в эффект наложения.
Пример
Полосы и на рядах, и на столбцах с прозрачностью.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
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);
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
<tr><td>17</td><td>18</td><td>19</td><td>20</td></tr>
</table>
</body>
</html>
Горизонтальные Разделители
Добавление границы только снизу каждого ряда даёт таблицу с горизонтальными разделителями. Добавьте свойство border-bottom всем элементам tr.
Пример
Таблица с горизонтальными разделительными линиями.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr {
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
</body>
</html>
Таблица с Наведением
Используйте селектор :hover на tr, чтобы подсвечивать ряд при наведении мыши.
Пример
Ряды, подсвечивающиеся при наведении мыши.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:hover {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
</body>
</html>