Οι πίνακες HTML μπορούν να έχουν επικεφαλίδες για κάθε στήλη ή γραμμή, ή για πολλές στήλες/γραμμές.
Για να ορίσετε επικεφαλίδες στον πίνακα σας, μπορείτε να χρησιμοποιήσετε το στοιχείο <th> στην πρώτη σειρά του πίνακα (συνήθως) ή στην πρώτη στήλη του πίνακα (εναλλακτικά).
Ας δούμε ένα παράδειγμα χρησιμοποιώντας επικεφαλίδες στην πρώτη σειρά του πίνακα:
<table>
<tr>
<th>Όνομα</th>
<th>Ηλικία</th>
<th>Επάγγελμα</th>
</tr>
<tr>
<td>Αλέξανδρος</td>
<td>25</td>
<td>Προγραμματιστής</td>
</tr>
<tr>
<td>Μαρία</td>
<td>30</td>
<td>Σχεδιάστρια</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, η πρώτη σειρά του πίνακα περιλαμβάνει τις επικεφαλίδες “Όνομα”, “Ηλικία” και “Επάγγελμα”. Οι υπόλοιπες γραμμές του πίνακα περιέχουν τα δεδομένα των κατάλληλων στηλών.
Μπορείτε να προσθέσετε επικεφαλίδες και στην πρώτη στήλη του πίνακα, ανάλογα με τις ανάγκες σας.
Για να χρησιμοποιήσετε την πρώτη στήλη ως επικεφαλίδες στον πίνακα, μπορείτε να ορίσετε το πρώτο κελί σε κάθε γραμμή ως στοιχείο <th>:
<table>
<tr>
<th>Όνομα</th>
<td>Αλέξανδρος</td>
<td>Μαρία</td>
</tr>
<tr>
<th>Ηλικία</th>
<td>25</td>
<td>30</td>
</tr>
<tr>
<th>Επάγγελμα</th>
<td>Προγραμματιστής</td>
<td>Σχεδιάστρια</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, το πρώτο κελί σε κάθε γραμμή ορίζεται ως στοιχείο <th>, το οποίο αντιπροσωπεύει μια επικεφαλίδα στον πίνακα. Οι υπόλοιπες γραμμές του πίνακα περιέχουν τα αντίστοιχα δεδομένα στη δεύτερη και τρίτη στήλη.
Με αυτόν τον τρόπο, μπορείτε να χρησιμοποιήσετε την πρώτη στήλη του πίνακα ως επικεφαλίδες για κάθε στήλη δεδομένων.
Προεπιλεγμένα, οι επικεφαλίδες του πίνακα είναι έντονες και κεντραρισμένες (ανακεφαλαιομένες). Αυτή η εμφάνιση επιτυγχάνεται από την προεπιλεγμένη στιλιστική κάθετη φύλλωσης (CSS) που συνοδεύει το HTML.
[adinserter block=”2″]
Αν θέλετε να προσαρμόσετε την εμφάνιση των επικεφαλίδων του πίνακα, μπορείτε να χρησιμοποιήσετε πρόσθετο CSS για να αλλάξετε τον στυλ των επικεφαλίδων.
Για παράδειγμα, ας πούμε ότι θέλετε να αλλάξετε την ευθυγράμμιση των επικεφαλίδων σε αριστερά και να αλλάξετε το χρώμα τους σε μπλε. Μπορείτε να χρησιμοποιήσετε την ακόλουθη CSS κανόνα για να επιτύχετε αυτό:
<style>
th {
text-align: left;
color: blue;
}
</style>
<table>
<tr>
<th>Όνομα</th>
<th>Ηλικία</th>
<th>Επάγγελμα</th>
</tr>
<tr>
<td>Αλέξανδρος</td>
<td>25</td>
<td>Προγραμματιστής</td>
</tr>
<tr>
<td>Μαρία</td>
<td>30</td>
<td>Σχεδιάστρια</td>
</tr>
</table>
Στο παράδειγμα που σας έδωσα, ο κανόνας CSS th επιλέγει όλα τα στοιχεία <th> και τους εφαρμόζει τις ιδιότητες text-align: left; και color: blue;. Με την ιδιότητα text-align: left;, οι επικεφαλίδες θα ευθυγραμμιστούν στα αριστερά, ενώ με την ιδιότητα color: blue;, οι επικεφαλίδες θα έχουν μπλε χρώμα.
Μπορείτε να προσαρμόσετε τις ιδιότητες του κανόνα CSS σύμφωνα με τις ανάγκες σας για την εμφάνιση των επικεφαλίδων του πίνακα. Επιπλέον, μπορείτε να προσθέσετε περισσότερες ιδιότητες CSS, όπως το font-weight για να αλλάξετε την πάχυνση των επικεφαλίδων, ή το background-color για να αλλάξετε το χρώμα του φόντου των επικεφαλίδων.
Μπορείτε να έχετε μια επικεφαλίδα που εκτείνεται πάνω από δύο ή περισσότερες στήλες στον πίνακα.
Για να δημιουργήσετε μια επικεφαλίδα που εκτείνεται πάνω από πολλές στήλες, μπορείτε να χρησιμοποιήσετε την ιδιότητα colspan στο στοιχείο <th>. Η τιμή της ιδιότητας colspan δηλώνει πόσες στήλες θα καλύπτει η επικεφαλίδα.
Ας δούμε ένα παράδειγμα:
<table>
<tr>
<th colspan="2">Προσωπικά Στοιχεία</th>
<th>Στοιχεία Επικοινωνίας</th>
</tr>
<tr>
<td>Όνομα</td>
<td>Επίθετο</td>
<td>Email</td>
<td>Τηλέφωνο</td>
</tr>
<tr>
<td>Αλέξανδρος</td>
<td>Παπαδόπουλος</td>
<td>alex@example.com</td>
<td>1234567890</td>
</tr>
</table>
Συνεχίζω:
Στο προηγούμενο παράδειγμα, η πρώτη επικεφαλίδα εκτείνεται πάνω από δύο στήλες (colspan="2"). Αν θέλετε να δημιουργήσετε μια επικεφαλίδα που εκτείνεται πάνω από περισσότερες από δύο στήλες, μπορείτε να αυξήσετε την τιμή του colspan αντίστοιχα.
[adinserter block=”3″]
Ας δούμε ένα παράδειγμα όπου η επικεφαλίδα εκτείνεται πάνω από τρεις στήλες:
<table>
<tr>
<th colspan="3">Στοιχεία Προϊόντος</th>
</tr>
<tr>
<td>Όνομα</td>
<td>Τιμή</td>
<td>Ποσότητα</td>
</tr>
<tr>
<td>Προϊόν 1</td>
<td>$10</td>
<td>5</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, η επικεφαλίδα Στοιχεία Προϊόντος ορίζεται με colspan="3", καθιστώντας την να εκτείνεται πάνω από τρεις στήλες.
Μπορείτε να προσαρμόσετε την τιμή του colspan ανάλογα με τον αριθμό των στηλών που θέλετε η επικεφαλίδα να καλύπτει.
Μπορείτε να προσθέσετε μια λεζάντα (caption) που λειτουργεί ως τίτλος για τον πίνακα σας.
Για να προσθέσετε μια λεζάντα σε έναν πίνακα HTML, χρησιμοποιήστε το στοιχείο <caption> αμέσως μετά την ανοίγουσα ετικέτα <table>. Η λεζάντα θα εμφανιστεί κάτω από τον τίτλο του πίνακα και πάνω από τα δεδομένα του.
Ας δούμε ένα παράδειγμα:
<table>
<caption>Αξιολόγηση Φοιτητών</caption>
<tr>
<th>Όνομα</th>
<th>Βαθμός</th>
</tr>
<tr>
<td>Αλέξανδρος</td>
<td>8.5</td>
</tr>
<tr>
<td>Μαρία</td>
<td>9.2</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, η ετικέτα <caption> περικλείει τον τίτλο “Αξιολόγηση Φοιτητών”. Η λεζάντα αυτή θα εμφανιστεί κάτω από τον τίτλο του πίνακα και πάνω από τα δεδομένα του.
Μπορείτε να προσαρμόσετε το περιεχόμενο της λεζάντας (<caption>) στον δικό σας τίτλο για τον πίνακα.
Σωστά! Οι πίνακες HTML μπορούν να προσαρμόσουν το padding εντός των κελιών και επίσης τον χώρο μεταξύ των κελιών.
Για να προσαρμόσετε το padding εντός των κελιών, μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS padding για τα στοιχεία <td> και <th>. Μπορείτε να ορίσετε τιμές για το padding στα επάνω, δεξιά, κάτω και αριστερά μέρος του κελιού.
Ας δούμε ένα παράδειγμα:
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
}
</style>
<table>
<tr>
<th>Όνομα</th>
<th>Ηλικία</th>
</tr>
<tr>
<td>Αλέξανδρος</td>
<td>25</td>
</tr>
<tr>
<td>Μαρία</td>
<td>30</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, οι ιδιότητες CSS border-collapse: separate; και border-spacing: 10px; ορίζουν έναν χώρο 10 pixels μεταξύ των κελιών του πίνακα. Το border-collapse: separate; δηλώνει ότι τα σύνορα των κελιών δεν θα συγχωνευτούν, ενώ το border-spacing: 10px; ορίζει το πάχος του χώρου μεταξύ των κελιών.
[adinserter block=”4″]
Μπορείτε να προσαρμόσετε τις τιμές του padding και του border-spacing σύμφωνα με τις ανάγκες σας για τον ενδιάμεσο χώρο και τον χώρο μεταξύ των κελιών του πίνακα.
Το cell padding αναφέρεται στον χώρο μεταξύ των ακραίων άκρων του κελιού και του περιεχομένου του κελιού.
Προεπιλεγμένα, το padding έχει οριστεί σε 0 (μηδέν).
Για να προσθέσετε padding στα κελιά του πίνακα, μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS padding. Μπορείτε να ορίσετε το padding για τα στοιχεία <td> και <th>, όπως παρακάτω:
<style>
td, th {
padding: 10px;
}
</style>
<table>
<tr>
<th>Όνομα</th>
<th>Ηλικία</th>
</tr>
<tr>
<td>Αλέξανδρος</td>
<td>25</td>
</tr>
<tr>
<td>Μαρία</td>
<td>30</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, οι ιδιότητες CSS padding: 10px; ορίζουν ένα padding 10 pixels για τα κελιά του πίνακα. Αυτό σημαίνει ότι θα υπάρχει ένας κενός χώρος 10 pixels ανάμεσα στις άκρες του κελιού και το περιεχόμενό του.
Μπορείτε να προσαρμόσετε την τιμή του padding σύμφωνα με τις ανάγκες σας για τον χώρο padding στα κελιά του πίνακα.
Το cell spacing αναφέρεται στον χώρο μεταξύ κάθε κελιού.
Προεπιλεγμένα, ο χώρος είναι ορισμένος σε 2 pixels.
Για να αλλάξετε τον χώρο μεταξύ των κελιών του πίνακα, μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS border-spacing στο στοιχείο του πίνακα. Ακολουθεί ένα παράδειγμα:
<style>
table {
border-collapse: separate;
border-spacing: 10px;
}
</style>
<table>
<tr>
<td>Κελί 1</td>
<td>Κελί 2</td>
</tr>
<tr>
<td>Κελί 3</td>
<td>Κελί 4</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, η ιδιότητα CSS border-spacing: 10px; ορίζει έναν χώρο 10 pixels μεταξύ των κελιών του πίνακα. Το border-collapse: separate; δηλώνει ότι τα σύνορα των κελιών δεν θα συγχωνευτούν και ο κενός χώρος θα εφαρμοστεί.
Μπορείτε να προσαρμόσετε την τιμή του border-spacing σύμφωνα με τις ανάγκες σας για τον χώρο μεταξύ των κελιών του πίνακα.