3.4 Οι πίνακες στην HTML

Οι πίνακες στην HTML επιτρέπουν στους web developers να παρουσιάζουν τα δεδομένα σε γραμμές και στήλες.

Για να δημιουργήσετε έναν πίνακα HTML, χρησιμοποιείτε την ετικέτα <table>. Ο πίνακας αποτελείται από τρεις βασικές ετικέτες:

<table>: Αυτή η ετικέτα περικλείει όλο τον πίνακα.
<tr>: Αυτή η ετικέτα δηλώνει μια γραμμή (σειρά) στον πίνακα. Περιέχει μια ή περισσότερες ετικέτες <td> ή <th>.
<td>: Αυτή η ετικέτα δηλώνει ένα κελί (στήλη) στον πίνακα και περιέχει τα πραγματικά δεδομένα του πίνακα.
<th>: Αυτή η ετικέτα δηλώνει έναν κεφαλίδα κελιού (στήλης) στον πίνακα. Χρησιμοποιείται συνήθως για την πρώτη σειρά του πίνακα, που περιέχει τους τίτλους των στηλών.
Ακολουθεί ένα απλό παράδειγμα ενός πίνακα HTML:

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
    <th>Πόλη</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td>25</td>
    <td>Αθήνα</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>32</td>
    <td>Θεσσαλονίκη</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, δημιουργείται ένας πίνακας με τρεις στήλες και τρεις γραμμές. Η πρώτη σειρά περιλαμβάνει τις ετικέτες <th> ως κεφαλίδες στην κορυφή των στηλών. Οι επόμενες γραμμές περιέχουν τα πραγματικά δεδομένα του πίνακα στις ετικέτες <td>.

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

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

Παρακάτω παρουσιάζεται το αποτέλεσμα του παραδείγματος πίνακα HTML που προαναφέρθηκε:

Σε αυτό τον πίνακα, έχουμε τρεις στήλες με τις επικεφαλίδες “Όνομα”, “Ηλικία” και “Πόλη”. Κάθε γραμμή περιλαμβάνει τα αντίστοιχα δεδομένα για κάθε στήλη.

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

[adinserter block=”2″]

Ένας πίνακας στο HTML αποτελείται από κελιά του πίνακα μέσα σε γραμμές και στήλες.

Για να δημιουργήσετε έναν πίνακα HTML, χρησιμοποιείτε την ετικέτα <table>. Εσωτερικά, ο πίνακας περιέχει τις ετικέτες <tr> για τις γραμμές (σειρές) και εντός των γραμμών, χρησιμοποιούμε τις ετικέτες <td> για τα κελιά (στήλες).

Εδώ είναι ένα απλό παράδειγμα ενός πίνακα HTML με τρεις γραμμές και τρεις στήλες:

<table>
  <tr>
    <td>Κελί 1</td>
    <td>Κελί 2</td>
    <td>Κελί 3</td>
  </tr>
  <tr>
    <td>Κελί 4</td>
    <td>Κελί 5</td>
    <td>Κελί 6</td>
  </tr>
  <tr>
    <td>Κελί 7</td>
    <td>Κελί 8</td>
    <td>Κελί 9</td>
  </tr>
</table>

Σε αυτό το παράδειγμα, ο πίνακας περιέχει τρεις γραμμές και τρεις στήλες. Κάθε γραμμή περιλαμβάνει τα αντίστοιχα κελιά του πίνακα στις ετικέτες <td>. Τα κελιά μπορούν να περιέχουν κείμενο, εικόνες, συνδέσμους ή οποιοδήποτε άλλο περιεχόμενο HTML που επιθυμείτε να εμφανιστεί μέσα στον πίνακα.

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

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

Κάθε κελί του πίνακα καθορίζεται από τις ετικέτες <td> και </td>.

Η ετικέτα <td> αναφέρεται στα δεδομένα του πίνακα (table data) που θα εμφανίζονται μέσα στο κελί. Ό,τι βρίσκεται μεταξύ των ετικετών <td> και </td> είναι το περιεχόμενο του κελιού του πίνακα.

Παράδειγμα:

<td>Περιεχόμενο κελιού</td>

Στο παραπάνω παράδειγμα, η φράση “Περιεχόμενο κελιού” αναπαρίσταται ως περιεχόμενο του κελιού του πίνακα. Μπορείτε να προσθέσετε κείμενο, εικόνες, συνδέσμους ή οποιοδήποτε άλλο HTML περιεχόμενο μέσα στις ετικέτες <td> και </td> για να προσαρμόσετε το περιεχόμενο των κελιών του πίνακα.

Οι ετικέτες <td> χρησιμοποιούνται εσωτερικά στην ετικέτα <tr> (table row), η οποία αναπαριστά μια γραμμή (σειρά) του πίνακα. Κάθε γραμμή περιέχει μια σειρά κελιών που ορίζονται με τις ετικέτες <td>.

Κάθε γραμμή (σειρά) του πίνακα ξεκινά με την ετικέτα <tr> και τελειώνει με την ετικέτα </tr>.

Η ετικέτα <tr> αναφέρεται στην γραμμή του πίνακα (table row) και περικλείει τα κελιά (στήλες) της γραμμής. Όλα τα κελιά που ανήκουν στην ίδια γραμμή του πίνακα πρέπει να τοποθετηθούν μέσα στις ετικέτες <tr> και </tr>.

Παράδειγμα:

<tr>
  <td>Περιεχόμενο κελιού 1</td>
  <td>Περιεχόμενο κελιού 2</td>
</tr>

[adinserter block=”3″]

Στο παραπάνω παράδειγμα, έχουμε μια γραμμή (σειρά) του πίνακα που περιλαμβάνει δύο κελιά. Το κελί 1 περιέχει το κείμενο “Περιεχόμενο κελιού 1” και το κελί 2 περιέχει το κείμενο “Περιεχόμενο κελιού 2”. Κάθε κελί τοποθετείται μέσα στις αντίστοιχες ετικέτες <td>. Όλα τα κελιά που ανήκουν στην ίδια γραμμή του πίνακα περικλείονται με τις ετικέτες <tr> και </tr>.

Μπορείτε να προσθέσετε περισσότερες γραμμές στον πίνακα, με τον ίδιο τρόπο, προσθέτοντας επιπλέον ετικέτες <tr> και </tr> και τα αντίστοιχα κελιά σε κάθε γραμμή του πίνακα.

Εδώ είναι ένα παράδειγμα με δύο γραμμές (σειρές) και τρία κελιά ανά γραμμή:

<table>
  <tr>
    <td>Περιεχόμενο κελιού 1</td>
    <td>Περιεχόμενο κελιού 2</td>
    <td>Περιεχόμενο κελιού 3</td>
  </tr>
  <tr>
    <td>Περιεχόμενο κελιού 4</td>
    <td>Περιεχόμενο κελιού 5</td>
    <td>Περιεχόμενο κελιού 6</td>
  </tr>
</table>

Σε αυτό το παράδειγμα, έχουμε δύο γραμμές (σειρές) με τρία κελιά ανά γραμμή. Κάθε γραμμή περιέχει τα αντίστοιχα κελιά που ορίζονται με τις ετικέτες <td>. Μπορείτε να προσθέσετε περισσότερες γραμμές και κελιά ανάλογα με τις ανάγκες σας.

Οι ετικέτες <td> πρέπει να βρίσκονται μέσα σε μια ετικέτα <tr>, ενώ οι ετικέτες <tr> πρέπει να βρίσκονται μέσα σε μια ετικέτα <table>. Αυτή η ιεραρχία ετικετών είναι απαραίτητη για τη σωστή δομή του πίνακα HTML.

Μερικές φορές θέλετε τα κελιά να είναι κελιά επικεφαλίδας. Σε αυτές τις περιπτώσεις χρησιμοποιείτε την ετικέτα <th> αντί για την ετικέτα <td>:

<table>
  <tr>
    <th>Επικεφαλίδα 1</th>
    <th>Επικεφαλίδα 2</th>
    <th>Επικεφαλίδα 3</th>
  </tr>
  <tr>
    <td>Περιεχόμενο κελιού 1</td>
    <td>Περιεχόμενο κελιού 2</td>
    <td>Περιεχόμενο κελιού 3</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, οι ετικέτες <th> χρησιμοποιούνται για να ορίσουν τα κελιά ως κελιά επικεφαλίδας. Οι ετικέτες <th> έχουν την ίδια λειτουργία με τις ετικέτες <td>, αλλά χρησιμοποιούνται για να δηλώσουν ότι το περιεχόμενο του κελιού είναι μια επικεφαλίδα.

Η χρήση των ετικετών <th> μπορεί να δώσει έναν ξεχωριστό στιλ ή μορφοποίηση στα κελιά επικεφαλίδας, για να τα ξεχωρίσετε από τα κανονικά κελιά του πίνακα.

Σημειώστε ότι οι ετικέτες <th> πρέπει να τοποθετηθούν μέσα στην ετικέτα <tr> και πριν από τις ετικέτες <td> στην ίδια γραμμή.

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
    <th>Πόλη</th>
  </tr>
  <tr>
    <td>Αλέξης</td>
    <td>35</td>
    <td>Αθήνα</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>28</td>
    <td>Θεσσαλονίκη</td>
  </tr>
</table>

Σε αυτό το παράδειγμα, οι ετικέτες <th> χρησιμοποιούνται για να ορίσουν τις επικεφαλίδες του πίνακα. Οι επικεφαλίδες εμφανίζονται στην πρώτη γραμμή του πίνακα και έχουν ένα ξεχωριστό στιλ ή μορφοποίηση που τις ξεχωρίζει από τα κανονικά κελιά του πίνακα (που ορίζονται με τις ετικέτες <td>).

Η χρήση των ετικετών <th> είναι σημαντική για την αναγνωρισιμότητα των επικεφαλίδων από τις οθόνες ανάγνωσης ή άλλες συσκευές που χρησιμοποιούνται για προβολή ιστοσελίδων.

[adinserter block=”4″]

Aκολουθεί ένα πλήρες παράδειγμα ενός HTML πίνακα που διατάσσει τα δεδομένα σε γραμμές και στήλες:

<!DOCTYPE html>
<html>
<head>
    <title>Παράδειγμα Πίνακα HTML</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>Παράδειγμα Πίνακα</h2>

<table>
  <tr>
    <th>Κωδικός</th>
    <th>Περιγραφή</th>
    <th>Τιμή</th>
  </tr>
  <tr>
    <td>ΠΡΟΪΟΝ01</td>
    <td>Προϊόν 1</td>
    <td>50€</td>
  </tr>
  <tr>
    <td>ΠΡΟΪΟΝ02</td>
    <td>Προϊόν 2</td>
    <td>65€</td>
  </tr>
  <tr>
    <td>ΠΡΟΪΟΝ03</td>
    <td>Προϊόν 3</td>
    <td>80€</td>
  </tr>
</table>

</body>
</html>

Σε αυτό το παράδειγμα, χρησιμοποιούμε τα εξής HTML tags:

<table>: Δημιουργεί έναν πίνακα.
<tr>: Ορίζει μια γραμμή στον πίνακα.
<th>: Ορίζει μια επικεφαλίδα στήλης στον πίνακα. Συνήθως, έχει έμφαση και διαφορετικό χρώμα ή στυλ από τα κελιά των δεδομένων.
<td>: Ορίζει ένα κελί δεδομένων στον πίνακα.

CSS (Cascading Style Sheets) χρησιμοποιείται για να διαμορφώσει την εμφάνιση του πίνακα. Στο παράδειγμά μας, το CSS χρησιμοποιείται για να ορίσει το πλάτος του πίνακα (width: 100%;), να δημιουργήσει περιθώρια μεταξύ των κελιών (border-collapse: collapse;), να προσθέσει περιθώρια εσωτερικά σε κάθε κελί (padding: 8px;), να ορίσει την ευθυγράμμιση του κειμένου (text-align: left;) και να αλλάξει το χρώμα του φόντου των επικεφαλίδων (background-color: #f2f2f2;).

Ο πίνακας που δημιουργήσαμε έχει τρεις στήλες (“Κωδικός”, “Περιγραφή”, “Τιμή”) και τρεις γραμμές δεδομένων, καθεμία από τις οποίες περιέχει τις πληροφορίες για ένα διαφορετικό προϊόν.