HTML-010 — Προηγμένοι HTML Tables: Προσβασιμότητα, σύνθετες κεφαλίδες και Responsive πίνακες

HTML-010 — Προηγμένοι HTML Tables: Προσβασιμότητα, σύνθετες κεφαλίδες και Responsive πίνακες

Καλώς ήρθες σε ένα ακόμη μάθημα του Jerry's CodeLab!

Στο HTML-006 γνωρίσαμε τα βασικά στοιχεία των πινάκων: <table>, <tr>, <td>, <th>, καθώς και τα <thead>, <tbody>, <tfoot> και τις ιδιότητες colspan και rowspan.

Τώρα θα προχωρήσουμε ένα βήμα παραπέρα. Θα μάθουμε πώς να δημιουργούμε πίνακες που δεν είναι μόνο σωστά οργανωμένοι, αλλά και πιο κατανοητοί για όλους τους χρήστες, πιο εύκολοι στη συντήρηση και πιο λειτουργικοί σε μικρές οθόνες.

1. Το στοιχείο caption — Τίτλος πίνακα

Το στοιχείο <caption> προσθέτει έναν τίτλο ή μια σύντομη περιγραφή στον πίνακα.

Τοποθετείται αμέσως μετά το άνοιγμα του <table> και βοηθά τον χρήστη να καταλάβει τι παρουσιάζουν τα δεδομένα.

<table>
  <caption>Βαθμολογίες μαθητών</caption>

  <tr>
    <th>Όνομα</th>
    <th>Βαθμός</th>
  </tr>

  <tr>
    <td>Μαρία</td>
    <td>19</td>
  </tr>
</table>

2. Η ιδιότητα scope — Συσχέτιση επικεφαλίδων

Το <th> δηλώνει μια επικεφαλίδα. Με την ιδιότητα scope μπορούμε να προσδιορίσουμε αν αυτή η επικεφαλίδα αφορά μια στήλη ή μια γραμμή.

scope="col"

Χρησιμοποιείται όταν η επικεφαλίδα περιγράφει τα δεδομένα μιας στήλης.

scope="row"

Χρησιμοποιείται όταν η επικεφαλίδα περιγράφει τα δεδομένα μιας γραμμής.

<table>
  <caption>Βαθμολογίες μαθητών</caption>

  <thead>
    <tr>
      <th scope="col">Μαθητής</th>
      <th scope="col">HTML</th>
      <th scope="col">CSS</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Μαρία</th>
      <td>19</td>
      <td>18</td>
    </tr>

    <tr>
      <th scope="row">Νίκος</th>
      <td>17</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

Με αυτόν τον τρόπο οι υποστηρικτικές τεχνολογίες μπορούν να κατανοήσουν καλύτερα ποια επικεφαλίδα αντιστοιχεί σε κάθε κελί.

3. Σύνθετες επικεφαλίδες με id και headers

Σε έναν απλό πίνακα, το scope συνήθως αρκεί. Σε πιο σύνθετους πίνακες, όμως, ένα κελί μπορεί να σχετίζεται με περισσότερες από μία επικεφαλίδες.

Εκεί μπορούμε να χρησιμοποιήσουμε:

• id: δίνει ένα μοναδικό αναγνωριστικό σε μια επικεφαλίδα.
• headers: συνδέει ένα κελί δεδομένων με μία ή περισσότερες επικεφαλίδες, αναφέροντας τα αντίστοιχα id.

<table>
  <caption>Αποτελέσματα ανά μάθημα και τρίμηνο</caption>

  <thead>
    <tr>
      <th id="student">Μαθητής</th>
      <th id="first-term">Α' Τρίμηνο</th>
      <th id="second-term">Β' Τρίμηνο</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th id="maria" headers="student">Μαρία</th>
      <td headers="maria first-term">18</td>
      <td headers="maria second-term">20</td>
    </tr>
  </tbody>
</table>

4. Ομαδοποίηση στηλών με colgroup και col

Τα στοιχεία <colgroup> και <col> μάς επιτρέπουν να ομαδοποιούμε στήλες και να εφαρμόζουμε συγκεκριμένες ιδιότητες σε αυτές.

• <colgroup>: ορίζει μια ομάδα στηλών.
• <col>: αντιπροσωπεύει μία ή περισσότερες στήλες μέσα στην ομάδα.
• span: καθορίζει πόσες συνεχόμενες στήλες καλύπτει το στοιχείο <col>.

<table>
  <colgroup>
    <col span="1" class="student-column">
    <col span="2" class="grade-columns">
  </colgroup>

  <thead>
    <tr>
      <th>Μαθητής</th>
      <th>HTML</th>
      <th>CSS</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Μαρία</td>
      <td>19</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

Μπορούμε να χρησιμοποιήσουμε CSS για να δώσουμε διαφορετική εμφάνιση σε ολόκληρες στήλες.

col.student-column {
  background-color: #e8f5f3;
}

col.grade-columns {
  background-color: #f1f5f9;
}

5. Responsive πίνακες — Προσαρμογή σε κινητά

Ένας μεγάλος πίνακας μπορεί να μην χωράει σε μια μικρή οθόνη κινητού. Αντί να αφήνουμε το περιεχόμενο να ξεχειλίζει και να χαλάει τη διάταξη της σελίδας, μπορούμε να επιτρέψουμε οριζόντια κύλιση μόνο στην περιοχή του πίνακα.

Για αυτόν τον σκοπό χρησιμοποιούμε ένα περιβάλλον στοιχείο, όπως ένα <div>, με την ιδιότητα CSS overflow-x: auto.

<div class="table-wrapper">
  <table>
    <!-- Περιεχόμενο πίνακα -->
  </table>
</div>

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table-wrapper table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

Σε μικρές οθόνες, ο χρήστης μπορεί να μετακινήσει οριζόντια τον πίνακα χωρίς να επηρεάζεται ολόκληρη η σελίδα.

6. Ολοκληρωμένο παράδειγμα — Πίνακας μαθημάτων

Ας συνδυάσουμε όσα μάθαμε. Θα δημιουργήσουμε έναν πίνακα με μαθητές, βαθμολογίες και δύο ομάδες μαθημάτων.

Στο παράδειγμα χρησιμοποιήσαμε:

• caption για τον τίτλο.
• rowspan για την επικεφαλίδα «Μαθητής» και «Μέσος όρος».
• colspan για την ομαδική επικεφαλίδα «Web Development».
• scope="colgroup" για την επικεφαλίδα της ομάδας στηλών.
• scope="row" για τα ονόματα των μαθητών.
• thead, tbody και tfoot για τη δομή του πίνακα.

7. Συνηθισμένα λάθη και καλές πρακτικές

• Παραλείπουμε το <caption> και ο χρήστης δεν καταλαβαίνει αμέσως τον σκοπό του πίνακα.
• Χρησιμοποιούμε απλά <td> αντί για <th> στις επικεφαλίδες.
• Ξεχνάμε να συνδέσουμε σωστά τις επικεφαλίδες με τα δεδομένα μέσω scope ή, όπου χρειάζεται, id και headers.
• Δημιουργούμε πίνακες που ξεχειλίζουν σε μικρές οθόνες.
• Χρησιμοποιούμε πίνακες για τη διάταξη ολόκληρης της ιστοσελίδας. Για layout προτιμάμε CSS Flexbox ή Grid.
• Ξεχνάμε ότι οι τιμές των id πρέπει να είναι μοναδικές.

8. Ώρα για εξάσκηση!

Ήρθε η στιγμή να περάσουμε από τη θεωρία στην πράξη!

Στην Παιδική Χαρά θα βρεις έναν έτοιμο πίνακα μαθημάτων. Δοκίμασε να κάνεις τις παρακάτω αλλαγές:

1. Άλλαξε τον τίτλο του πίνακα.
2. Πρόσθεσε έναν ακόμη μαθητή.
3. Πρόσθεσε μια νέα στήλη για JavaScript.
4. Χρησιμοποίησε scope στις επικεφαλίδες.
5. Δημιούργησε μια ομαδική επικεφαλίδα με colspan.
6. Δοκίμασε να μικρύνεις το πλάτος της προεπισκόπησης και παρατήρησε πώς λειτουργεί η οριζόντια κύλιση.

9. Έλεγχος γνώσεων

1. Ποιο στοιχείο προσθέτει τίτλο σε έναν πίνακα;

• α) title
• β) caption
• γ) label

2. Τι δηλώνει το scope="col";

• α) Ότι η επικεφαλίδα αφορά μια στήλη.
• β) Ότι η επικεφαλίδα αφορά μια γραμμή.
• γ) Ότι το κελί καλύπτει δύο στήλες.

3. Ποια ιδιότητα συνδέει ένα κελί με επικεφαλίδες μέσω των id τους;

• α) class
• β) headers
• γ) colspan

4. Ποιο CSS επιτρέπει οριζόντια κύλιση όταν ο πίνακας δεν χωράει;

• α) overflow-x: auto
• β) position: fixed
• γ) display: none

5. Για ποιο σκοπό χρησιμοποιούμε το <colgroup>;

• α) Για να δημιουργούμε νέες γραμμές.
• β) Για να ομαδοποιούμε στήλες.
• γ) Για να προσθέτουμε τίτλο.

Απαντήσεις: 1-β, 2-α, 3-β, 4-α, 5-β.

10. Τι μάθαμε σήμερα;

Σε αυτό το μάθημα προχωρήσαμε πέρα από τα βασικά των HTML Tables και γνωρίσαμε:

• Το <caption> για την περιγραφή ενός πίνακα.
• Το scope για τη συσχέτιση επικεφαλίδων και δεδομένων.
• Τα id και headers για σύνθετες σχέσεις επικεφαλίδων.
• Τα <colgroup> και <col> για την ομαδοποίηση στηλών.
• Τη χρήση του overflow-x: auto για responsive πίνακες.
• Καλές πρακτικές προσβασιμότητας και οργάνωσης δεδομένων.

Επόμενο μάθημα

Στο HTML-011 θα συνεχίσουμε με HTML Media: θα γνωρίσουμε τα στοιχεία <audio> και <video>, τις βασικές τους ιδιότητες και τον τρόπο ενσωμάτωσης πολυμέσων στις ιστοσελίδες μας.

Συνεχίζουμε να μαθαίνουμε, να πειραματιζόμαστε και να δημιουργούμε!

Jerry's CodeLab
LEARN · EXPERIMENT · CREATE