HTML-006 — HTML Πίνακες: Γραμμές, Στήλες και Κελιά

HTML-006 — HTML Πίνακες: Γραμμές, Στήλες και Κελιά

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

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

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

1. Τι είναι οι πίνακες στην HTML;

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

Το βασικό στοιχείο δημιουργίας ενός πίνακα είναι το <table>.

<table>
  Περιεχόμενο πίνακα
</table>

Ας γνωρίσουμε τα βασικά στοιχεία που χρησιμοποιούμε μέσα σε έναν πίνακα.

2. Οι γραμμές με το στοιχείο tr

Το στοιχείο <tr> (table row) δημιουργεί μια γραμμή στον πίνακα.

<table>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
</table>

Στο παράδειγμα δημιουργήσαμε έναν πίνακα με μία γραμμή και δύο κελιά.

3. Τα κελιά με το στοιχείο td

Το στοιχείο <td> (table data) δημιουργεί ένα απλό κελί δεδομένων.

<table>
  <tr>
    <td>Γιάννης</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>20</td>
  </tr>
</table>

Έχουμε δημιουργήσει δύο γραμμές και δύο στήλες. Κάθε γραμμή περιέχει δύο κελιά.

4. Οι επικεφαλίδες με το στοιχείο th

Το στοιχείο <th> (table header) δημιουργεί ένα κελί επικεφαλίδας.

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

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
  </tr>
  <tr>
    <td>Γιάννης</td>
    <td>25</td>
  </tr>
</table>

Συνήθως οι επικεφαλίδες εμφανίζονται με έντονα γράμματα και κεντραρισμένο κείμενο από τον browser.

5. Οργάνωση πίνακα με thead, tbody και tfoot

Η HTML μάς επιτρέπει να οργανώνουμε έναν πίνακα σε τρεις βασικές ενότητες:

• <thead>: Περιέχει τις επικεφαλίδες του πίνακα.
• <tbody>: Περιέχει τα κύρια δεδομένα.
• <tfoot>: Περιέχει συνοπτικά ή συγκεντρωτικά στοιχεία.

<table>
  <thead>
    <tr>
      <th>Προϊόν</th>
      <th>Τιμή</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Πληκτρολόγιο</td>
      <td>30€</td>
    </tr>
    <tr>
      <td>Ποντίκι</td>
      <td>15€</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Σύνολο</th>
      <td>45€</td>
    </tr>
  </tfoot>
</table>

Με αυτόν τον τρόπο ο κώδικάς μας γίνεται πιο οργανωμένος και κατανοητός.

6. Συγχώνευση κελιών με colspan και rowspan

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

Η ιδιότητα colspan

Η ιδιότητα colspan καθορίζει πόσες στήλες θα καλύπτει ένα κελί.

<table border="1">
  <tr>
    <th colspan="2">Στοιχεία μαθητή</th>
  </tr>
  <tr>
    <td>Γιάννης</td>
    <td>18</td>
  </tr>
</table>

Η ιδιότητα rowspan

Η ιδιότητα rowspan καθορίζει πόσες γραμμές θα καλύπτει ένα κελί.

<table border="1">
  <tr>
    <th rowspan="2">Μάθημα</th>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

Οι ιδιότητες αυτές μάς βοηθούν να δημιουργούμε πιο σύνθετους πίνακες.

7. Μορφοποίηση πινάκων με CSS

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

Ας δούμε ένα παράδειγμα:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

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

  th {
    background-color: #00bfa5;
    color: white;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>

Με τις παραπάνω ιδιότητες:

• Το width: 100% κάνει τον πίνακα να καταλαμβάνει όλο το διαθέσιμο πλάτος.
• Το border-collapse: collapse ενώνει τα περιγράμματα των κελιών.
• Το padding προσθέτει εσωτερικό κενό στα κελιά.
• Το text-align καθορίζει τη στοίχιση του κειμένου.
• Το nth-child(even) επιλέγει τις ζυγές γραμμές.

8. Ένα ολοκληρωμένο παράδειγμα

Ας δημιουργήσουμε μια μικρή ιστοσελίδα με έναν πίνακα βαθμολογιών.

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Ο πρώτος μου πίνακας</title>

  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

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

    th {
      background-color: #00bfa5;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>

<body>

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

  <table>
    <thead>
      <tr>
        <th>Όνομα</th>
        <th>Μάθημα</th>
        <th>Βαθμός</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Γιάννης</td>
        <td>HTML</td>
        <td>18</td>
      </tr>

      <tr>
        <td>Μαρία</td>
        <td>CSS</td>
        <td>20</td>
      </tr>

      <tr>
        <td>Νίκος</td>
        <td>JavaScript</td>
        <td>17</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

9. Συνηθισμένα λάθη

• Ξεχνάμε να κλείσουμε τα στοιχεία <tr>, <td> ή <th>.
• Τοποθετούμε κελιά έξω από μια γραμμή <tr>.
• Χρησιμοποιούμε το <td> αντί για <th> στις επικεφαλίδες.
• Δίνουμε λανθασμένη τιμή στα colspan και rowspan.
• Χρησιμοποιούμε πίνακες για τη διάταξη ολόκληρης της ιστοσελίδας αντί για CSS layout.

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

Τώρα είναι η σειρά σου! Δοκίμασε τις παρακάτω ασκήσεις:

1. Δημιούργησε έναν πίνακα με δύο γραμμές και δύο στήλες.
2. Πρόσθεσε επικεφαλίδες με το στοιχείο <th>.
3. Δημιούργησε έναν πίνακα με τρεις μαθητές και τους βαθμούς τους.
4. Χρησιμοποίησε την ιδιότητα colspan για να συγχωνεύσεις δύο στήλες.
5. Πρόσθεσε CSS για να αλλάξεις το χρώμα της επικεφαλίδας και το φόντο των γραμμών.

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

Σε αυτό το μάθημα γνωρίσαμε:

• Το στοιχείο <table> για τη δημιουργία πινάκων.
• Το στοιχείο <tr> για τις γραμμές.
• Τα στοιχεία <td> και <th> για τα κελιά και τις επικεφαλίδες.
• Τα στοιχεία <thead>, <tbody> και <tfoot>.
• Τις ιδιότητες colspan και rowspan.
• Τη μορφοποίηση πινάκων με CSS.

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

12. Δοκίμασε τον κώδικά σου στην Παιδική Χαρά!

Άνοιξε το Playground του Jerry's CodeLab και πειραματίσου με τους πίνακες HTML:

Jerry's CodeLab
LEARN · EXPERIMENT · CREATE