Lecția 6: Tabele - date structurate

Tabelele sunt folosite pentru a organiza și afișa date structurate în rânduri și coloane. Ele sunt foarte utile în paginile web pentru a prezenta informații clare și ușor de înțeles.

1. Tabel simplu

Note elevi la Matematică

Nume	Clasa	Notă
Ion Popescu	VIII A	9
Maria Ionescu	VIII B	10
Andrei Vasilescu	VIII A	8

2. Tabel cu rânduri alternative colorate

Orar săptămânal

Ziua	Materie	Profesor
Luni	Matematică	Prof. Roman
Marți	Română	Prof. Ionescu
Miercuri	Istorie	Prof. Popa
Joi	Fizică	Prof. Marinescu
Vineri	Biologie	Prof. Georgescu

3. Tabel cu îmbinare celule (colspan și rowspan)

Program eveniment

Oră	Activitate	Locație
09:00 - 10:00	Deschiderea oficială
10:00 - 11:30	Workshop programare	Sala 1
11:30 - 12:00	Pauză cafea	Spațiu comun
12:00 - 13:30	Prezentare proiecte	Sala 2
	Dezbatere	Sala 3

Codul sursă complet (HTML + CSS)

<style>
  table {
    border-collapse: collapse;
    margin-bottom: 20px;
    width: 100%;
    max-width: 600px;
  }
  th, td {
    border: 1px solid #CC0000;
    padding: 8px 12px;
    text-align: left;
  }
  th {
    background-color: #CC0000;
    color: #FFF8DC;
  }
  caption {
    caption-side: top;
    font-weight: bold;
    margin-bottom: 8px;
    color: #CC0000;
  }
  tr:nth-child(even) {
    background-color: #FFF8DC;
  }
</style>

<!-- Tabel simplu -->
<table>
  <caption>Note elevi la Matematică</caption>
  <tr>
    <th>Nume</th>
    <th>Clasa</th>
    <th>Notă</th>
  </tr>
  <tr>
    <td>Ion Popescu</td>
    <td>VIII A</td>
    <td>9</td>
  </tr>
  <tr>
    <td>Maria Ionescu</td>
    <td>VIII B</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Andrei Vasilescu</td>
    <td>VIII A</td>
    <td>8</td>
  </tr>
</table>

<!-- Tabel cu rânduri alternative colorate -->
<style>
  tr:nth-child(even) {
    background-color: #FFF8DC;
  }
</style>
<table>
  <caption>Orar săptămânal</caption>
  <tr>
    <th>Ziua</th>
    <th>Materie</th>
    <th>Profesor</th>
  </tr>
  <tr>
    <td>Luni</td>
    <td>Matematică</td>
    <td>Prof. Roman</td>
  </tr>
  <tr>
    <td>Marți</td>
    <td>Română</td>
    <td>Prof. Ionescu</td>
  </tr>
  <tr>
    <td>Miercuri</td>
    <td>Istorie</td>
    <td>Prof. Popa</td>
  </tr>
  <tr>
    <td>Joi</td>
    <td>Fizică</td>
    <td>Prof. Marinescu</td>
  </tr>
  <tr>
    <td>Vineri</td>
    <td>Biologie</td>
    <td>Prof. Georgescu</td>
  </tr>
</table>

<!-- Tabel cu colspan și rowspan -->
<table>
  <caption>Program eveniment</caption>
  <tr>
    <th>Oră</th>
    <th>Activitate</th>
    <th>Locație</th>
  </tr>
  <tr>
    <td>09:00 - 10:00</td>
    <td colspan="2">Deschiderea oficială</td>
  </tr>
  <tr>
    <td>10:00 - 11:30</td>
    <td>Workshop programare</td>
    <td>Sala 1</td>
  </tr>
  <tr>
    <td>11:30 - 12:00</td>
    <td>Pauză cafea</td>
    <td>Spațiu comun</td>
  </tr>
  <tr>
    <td rowspan="2">12:00 - 13:30</td>
    <td>Prezentare proiecte</td>
    <td>Sala 2</td>
  </tr>
  <tr>
    <td>Dezbatere</td>
    <td>Sala 3</td>
  </tr>
</table>
  

Explicații

• <table> – marchează începutul și sfârșitul tabelului.
• <tr> – reprezintă un rând din tabel.
• <th> – celulă de antet, de obicei scrisă îngroșat și centrată.
• <td> – celulă de date, conține conținutul tabelului.
• colspan și rowspan permit combinarea celulelor pe coloane sau rânduri.
• Stilul CSS aplicat oferă culoare, margini și alternanță pentru o mai bună lizibilitate.