HTML CSS Упражнение: таблица Зебра
Решение:
HTML-код:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML CSS exercise - CSS3 Zebra Striping a Table</title>
<style type="text/css">
table {
border:1px solid silver
}
th {
background-color: #ccc;
}
tbody tr:nth-child(even) {
background-color: #abe113;
}
</style>
</head>
<body>
<table>
<tr><th>Id</th><th>Name</th><th>Major</th></tr>
<tr><td>1001</td><td>Gopl Murthy</td><td>Physics</td></tr>
<tr><td>1002</td><td>Joy Sen</td><td>Economics</td></tr>
<tr><td>1003</td><td>Chandu Yadav</td><td>Chemistry</td></tr>
<tr><td>1004</td><td>Shalini Gupta</td><td>Zoology</td></tr>
<tr><td>1004</td><td>Vivek Kumar</td><td>Math</td></tr>
<tr><td>1004</td><td>Sameer Ali</td><td>Botany</td></tr>
</table>
</body>
</html>
Демонстрация в реальном времени:
См. Зебра-таблица-ответ Pen по w3resource ( @ w3resource ) на CodePen .
Поддерживаемый браузер
 |  |  |  |  |
| да | да | да | да | да |
Каков уровень сложности этого упражнения?
Новый контент: Composer: менеджер зависимостей для PHP , R программирования
disqus2code