Αρχικά θα ήθελα να σας δείξω πώς μπορούν να συνδεθούν οι κελιές σε μια γραμμή κάθετα μεταξύ τους. Με αυτό τον τρόπο, μια στήλη μπορεί να επεκταθεί σε διάφορες στήλες εντός της αντίστοιχης γραμμής.
Ένα παράδειγμα:
<table border="1">
<tr>
<th colspan="2">Ραντεβού</th>
</tr>
<tr>
<td>11.4.2014</td>
<td>12.4.2012</td>
</tr>
<tr>
<td>13.4.2014</td>
<td>14.4.2014</td>
</tr>
<tr>
<td>15.4.2014</td>
<td>16.4.2014</td>
</tr>
</table>Πριν προχωρήσουμε, μια λέξη για το th-Στοιχείο που χρησιμοποιείται εδώ. Με αυτό το στοιχείο σημειώνονται οι επικεφαλίδες των κελιών. Τα προγράμματα περιήγησης εμφανίζουν τα κελιά αυτά συνήθως με έντονη γραφή και κεντραρισμένα. Και εδώ το αποτέλεσμα στον περιηγητή:
Μέσα στο εισαγωγικό th τίθεται το χαρακτηριστικό colspan. Ως τιμή αναμένεται ο αριθμός των στηλών που θα πρέπει να επεκταθεί το τρέχον κελί. Σε κάθε περίπτωση, πρέπει να προσέξετε να είναι σωστός ο αριθμός των στηλών που δηλώνετε, διότι αλλιώς μπορεί να έχετε αποτελέσματα που δεν είναι όμορφα. Στο παρόν παράδειγμα, η επικεφαλίδα στην οποία αναφέρεται το th θα πρέπει να επεκτείνεται σε δύο στήλες. Μέσα στις άλλες δύο γραμμές περιέχονται και πάλι ανά δύο γραμμές.
Ένα υπόδειγμα ακόμα σχετικά με τη σύνδεση γραμμών. Κατά τη διάρκεια της φάσης ανάπτυξης αναθέστε στους πίνακες ένα πλαίσιο (border). Έτσι μπορείτε πάντα να δείτε αμέσως εάν η σύνδεση που έχετε κάνει λειτουργεί πραγματικά όπως επιθυμείτε.
Σύνδεση κελιών σε μια στήλη κατά γραμμές
Με το χαρακτηριστικό rowspan μπορούν να συνδεθούν πολλά κελιά σε μια στήλη μεταξύ τους. Το αντίστοιχο κελί θα επεκτείνεται τότε εντός της στήλης πάνω από πολλές γραμμές. Και εδώ ένα παράδειγμα:
<table border="1">
<tr>
<th rowspan="2">Χρώμα</th>
<td>Μπλε</td>
</tr>
<tr>
<td>Πράσινο</td>
</tr>
<tr>
<th rowspan="2">Μέγεθος</th>
<td>1,70</td>
</tr>
<tr>
<td>1,80</td>
</tr>
</table>Στον περιηγητή εμφανίζεται ως εξής:
Στην ιδιότητα rowspan αναθέτετε έναν αριθμητικό τιμή. Αυτή ουσιαστικά καθορίζει τον αριθμό των γραμμών εντός μιας στήλης πάνω στις οποίες θα πρέπει να επεκτείνεται ένα κελί. Εδώ ισχύει πάντα ότι η πληθώρα των δηλωμένων γραμμών πρέπει να είναι σωστή.
Σύνδεση κελιών ταυτόχρονα κατά γραμμές και στήλες
Τα δύο χαρακτηριστικά rowspan και colspan μπορούν να συνδυαστούν επίσης μεταξύ τους. Με αυτό τον τρόπο μπορούν να οριστούν κελιά που επεκτείνονται ταυτόχρονα πάνω από πολλές γραμμές και στήλες. Και αυτό μπορεί να εξηγηθεί καλύτερα μέσω ενός παραδείγματος.
<table border="1">
<tr>
<th colspan="2" rowspan="2">Διαμέρισμα</th>
<td>5 Δωμάτια</td>
</tr>
<tr>
<td>154 τ.μ.</td>
</tr>
<tr>
<td>Σαρλότενμπουργκ</td>
<td>Θέση στάθμευσης</td>
<td>Ενδοδαπέδια θέρμανση</td>
</tr>
</table>
Μια ματιά στον περιηγητή παράγει τα ακόλουθα αποτελέσματα:
Κατά τη συνδυασμό των δύο χαρακτηριστικών, φυσικά πρέπει επίσης να είστε προσεκτικοί, ώστε στο τέλος να είναι σωστός ο αριθμός των κελιών.
Επισήμανση πινάκων
Ένα πολύ ενδιαφέρον τρόπο για να γίνουν κατανοητοί οι πίνακες είναι μέσω του στοιχείου caption. Μέσω αυτού του στοιχείου μπορεί να προστεθεί ένας τίτλος ή μια λεζάντα σε έναν πίνακα. Ο περιεχόμενος του caption εμφανίζεται έξω από τον πίνακα, αν και ο ορισμός του γίνεται μέσα στον πίνακα.
Εδώ ένα τυπικό παράδειγμα για το caption:
Εμφανίζεται ένας τίτλος πίνακα πάνω από τον πίνακα. Προεπιλεγμένα, ο τίτλος είναι κεντραρισμένος πάνω από τον πίνακα. Φυσικά μπορείτε να το προσαρμόσετε ανάλογα με τις ανάγκες σας μέσω CSS.
Το στοιχείο caption ορίζεται αμέσως πίσω από την εισαγωγική <table>.
Εδώ η πλήρης σύνταξη του προηγούμενου παραδείγματος που παρουσιάστηκε:
<table border="1">
<caption>Δεδομένα Μέσων</caption>
<colgroup><col /><col /><col /><colgroup>
<thead>
<tr>
<th>Θέμα</th>
<th>Προβολές</th>
<th>Τάση</th>
</tr>
<thead>
<tfoot>
<tr>
<td colspan="3">Κατάσταση Ιουνίου 2014</td>
</tr>
<tfoot>
<tbody>
<tr>
<td>HTML5</td>
<td>12.245</td>
<td>+</td>
</tr>
<tr>
<td>CSS3</td>
<td>12123</td>
<td>+</td>
</tr>
<tr>
<td>JavaScript</td>
<td>11.546</td>
<td>+</td>
</tr>
</tbody>
</table>Διαμορφώνοντας πίνακες
Για τη διαμόρφωση πινάκων, σε προηγούμενες εκδόσεις HTML υπήρχαν πολλά γνωρίσματα. Εδώ μερικά παραδείγματα πραγμάτων που ρυθμίζονταν με γνωρίσματα (φυσικά, οι περιηγητές υποστηρίζουν ακόμα αυτά τα γνωρίσματα σήμερα. Ωστόσο, στο HTML5 δεν πρέπει πλέον να χρησιμοποιούνται).
• Εξωτερικό πλαίσιο
• Εσωτερικά πλαίσια πινάκων
• Πλάτος και ύψος
• Κελιά πλέγματος
• Προσανατολισμός των περιεχομένων των κελιών
• Χρώματα
• Εικόνες φόντου
Βλέπετε ότι πράγματι μπορεί να ρυθμιστεί τα πάντα μέσω των αντίστοιχων γνωρισμάτων HTML. Το ακόλουθο παράδειγμα δείχνει έναν πίνακα στον οποίο χρησιμοποιήθηκαν εκτενώς αυτές οι δυνατότητες:
<table border="1">
<tr>
<td width="200" height="100" bgcolor="#999933">Ένα</td>
<td width="200" bgcolor="#00ffff">Δύο</td>
<td width="200">Τρία</td>
</tr>
<tr bgcolor="#ff00ff">
<td height="100">Τέσσερα<</td>
<td bgcolor="#996666">Πέντε</td>
<td bgcolor="#003333">Έξι</td>
</tr>
</table>
Η ματιά στο αποτέλεσμα μας δίνει το επιθυμητό αποτέλεσμα.
Αλλά αν και φαίνεται όπως θα έπρεπε, η σύνταξη που κρύβεται πίσω από αυτό είναι όλα άλλα παρά αποτελεσματική. Είναι καλύτερο να ελέγχουμε τα γνωρίσματα του πίνακα μέσω CSS. Χάρη στα νέα γνωρίσματα CSS, μπορούμε όχι μόνο να αντικαταστήσουμε τα παλιά γνωρίσματα με σύγχρονη σύνταξη, αλλά μπορούμε επίσης να υλοποιήσουμε επιπλέον λειτουργικότητες. Για παράδειγμα, μπορούμε τώρα να χρωματίσουμε ανταλλάξ τις γραμμές του πίνακα.
Στο παρελθόν, σε εποχές HTML και CSS, ήταν αναγκαίο να κάνουμε μερικές φοβερές περιπλοκές με τον κώδικα για ένα τέτοιο αποτέλεσμα. Αν τώρα χρησιμοποιούμε συνεπώς αποφασιστικά τις δυνατότητες που παρέχει το CSS, μπορούμε πλέον να υλοποιήσουμε κάτι τέτοιο εύκολα.
tr:nth-child(even) {
background-color: #fd9d5d;
}
tr:nth-child(odd) {
background-color: #c0f390;
}
table {
border-spacing: 0px;
}
Όπως έχει αναφερθεί ήδη πολλές φορές, θα αναλύσω εκτενώς το CSS στο πλαίσιο αυτής της σειράς.
