Stilizarea Tabelului HTML
Folosiți CSS pentru a face tabelele să arate mai bine.
Tabel HTML - Dungi Zebră
Dând fiecărui al doilea rând o culoare de fundal se creează un efect de dungi zebră. Folosiți selectorul tr:nth-child(even).
Notă: Folosirea lui (odd) în schimb colorează rândurile 1, 3, 5 și așa mai departe, în loc de 2, 4, 6.
Exemplu
Fiecare al doilea rând colorat.
Rezultat: pagină HTML completă
<!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>
Tabel HTML - Dungi Zebră Verticale
Pentru dungi verticale, colorați fiecare a doua coloană în loc de fiecare al doilea rând, folosind :nth-child(even) pe celule.
Notă: Puneți selectorul atât pe th, cât și pe td, dacă doriți dungi și pe antete, și pe celulele obișnuite.
Exemplu
Fiecare a doua coloană colorată.
Rezultat: pagină HTML completă
<!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>
Combinarea Dungilor Zebră Verticale și Orizontale
Puteți combina ambele pentru a dunga fiecare al doilea rând și fiecare a doua coloană. Folosirea unei culori transparente rgba() face ca suprapunerile să se contopească într-un efect de suprapunere.
Exemplu
Dungi atât pe rânduri, cât și pe coloane, cu transparență.
Rezultat: pagină HTML completă
<!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>
Delimitatoare Orizontale
Adăugarea unui chenar doar în partea de jos a fiecărui rând dă un tabel cu delimitatoare orizontale. Adăugați proprietatea border-bottom tuturor elementelor tr.
Exemplu
Un tabel cu linii delimitatoare orizontale.
Rezultat: pagină HTML completă
<!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>Prenume</th>
<th>Nume</th>
<th>Economii</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>
Tabel cu Efect Hover
Folosiți selectorul :hover pe tr pentru a evidenția un rând când mouse-ul trece peste el.
Exemplu
Rânduri care se evidențiază la trecerea mouse-ului.
Rezultat: pagină HTML completă
<!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>Prenume</th>
<th>Nume</th>
<th>Economii</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>