CSS Хүснэгт
HTML хүснэгтийг (<table>) цэвэрхэн, уншихад хялбар болгон хэлбэржүүлэх дүрмүүд:
border-collapse: collapse;— хүснэгтийн хүрээг нийлүүлж нэг зураас болгоно.th, td { padding: 12px; }— нүд бүрт дотор зай өгч уншихад хялбар болгоно.tr:nth-child(even)— сүлжилж өнгө өөрчлөх "зебра" хэв маяг үүсгэнэ.
Жишээ
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
border-bottom: 1px solid #ddd;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr><th>Нэр</th><th>Оноо</th></tr>
<tr><td>Бат</td><td>95</td></tr>
<tr><td>Сараа</td><td>88</td></tr>
<tr><td>Дорж</td><td>76</td></tr>
</table>
</body>
</html>