Stilizarea tabelelor în CSS: Ghid Practic și Exemple

~/blog/assets/css.png

1024×683 · PNG

Tabelele sunt folosite pe scară largă pentru organizarea datelor în web design, dar, prin natura lor, ele pot părea învechite sau monotone. Cu ajutorul CSS, poți transforma tabelele într-un element vizual atractiv și funcțional. În acest articol, vom explora diferite tehnici de stilizare a tabelelor folosind CSS.

1. Structura de Bază a unei Tabele

Înainte de a trece la stilizare, este esențial să înțelegem structura de bază a unei tabele HTML:

<table>
  <thead>
    <tr>
      <th>Coloana 1</th>
      <th>Coloana 2</th>
      <th>Coloana 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Date 1</td>
      <td>Date 2</td>
      <td>Date 3</td>
    </tr>
    <tr>
      <td>Date 4</td>
      <td>Date 5</td>
      <td>Date 6</td>
    </tr>
  </tbody>
</table>

Aceasta este structura standard a unei tabele cu un header (thead) și un corp (tbody) care conține rândurile de date.

2. Stilizare de Bază a Tabelelor în CSS

Pentru început, poți adăuga o stilizare de bază pentru a îmbunătăți lizibilitatea și aspectul tabelei.

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #f4f4f4;
  font-weight: bold;
}

Explicație:

• border-collapse: collapse; elimină spațiile dintre bordurile celulelor.
• padding: 12px; adaugă spațiu interior pentru a face conținutul mai lizibil.
• text-align: left; aliniază textul la stânga în celule.
• border: 1px solid #ddd; aplică un chenar discret între celule.
• background-color: #f4f4f4; oferă un fundal ușor gri pentru anteturi.

3. Alternarea Culorilor pe Rânduri CSS

Un efect vizual popular pentru tabele este alternarea culorilor pe rânduri, cunoscut și sub numele de „zebra striping”. Acest lucru face mai ușoară urmărirea datelor pe rânduri.

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
  background-color: #ffffff;
}

4. Stilizarea pe Hover

Adăugarea unui efect de hover poate îmbunătăți experiența utilizatorului, permițându-i să evidențieze rândul pe care se află cursorul.

tbody tr:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

5. Stilizarea Headerului

Poți personaliza și mai mult headerul pentru a-l face distinct vizual față de restul tabelei.

th {
  background-color: #007bff;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
}

6. Coloane Fixe și Scroll Orizontal CSS

Dacă ai tabele cu multe coloane, poate fi util să fixezi prima coloană și să permiți scroll orizontal pentru restul datelor.

.table-container {
  overflow-x: auto;
}

table {
  min-width: 600px;
}

7. Îmbunătățiri Vizuale cu Borduri Personalizate

Folosirea unor borduri personalizate poate adăuga un efect rafinat:

th, td {
  border-bottom: 2px solid #ddd;
}

th {
  border-bottom: 3px solid #007bff;
}

8. Responsive Design pentru Tabele

Pentru a face tabelele responsive, poți adăuga stiluri speciale pentru ecrane mici, ascunzând coloanele neesențiale sau transformând datele în liste:

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th, td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }

  th::before, td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    text-align: left;
    font-weight: bold;
  }
}

9. Exemple Practice și Inspirație

Există numeroase stiluri creative pe care le poți aplica tabelelor tale, de la tabele minimaliste până la tabele cu accente moderne și animații subtile. Fii creativ și adaptează stilul tabelei la identitatea vizuală a site-ului tău!