Τα tables (πίνακες) είναι ίσως τα πιο κακομεταχειρισμένα tags της HTML. Τα περισσότερα sites που υπάρχουν στο διαδίκτυο και είναι φτιαγμένα μέχρι πριν από 4-5 χρόνια χρησιμοποιούν πίνακες για το design ενώ δεν είναι αυτή η δουλειά για την οποία προορίζονται — τα tables είναι για την πληροφορία εκείνη που πρέπει να παρουσιαστεί σε πίνακα για να είναι ευανάγνωστη: αριθμοί, στατιστικές, σύγκριση χαρακτηριστικών κ.α.

Ένας πίνακας ορίζεται από το <table> (και κλείνει με </table>). Τα tags που δημιουργούν τον πίνακα χρησιμοποιούν αρκετά attributes (ιδιότητες), με τα οποία δεν έχω ασχοληθεί ιδιαίτερα, εκτός από το υποχρεωτικό href του <a> και το, επίσης υποχρεωτικό, src του <img>. Π.χ. <table summary="Περίληψη των περιεχομένων του πίνακα"> — προσοχή παρακαλώ, στην HTML5 το summary attribute καταργείται, <th colspan="2">, <td scope="col"> — ατυχία, στην HTML5 καταργείται και αυτό! Τα πράγματα αρχίζουν και δυσκολεύουν λίγο! Για να δούμε τι θα μείνει τελικά…

Το πρώτο tag μέσα στον πίνακα μπορεί να είναι το <caption> και χρησιμοποιείται είτε σαν επικεφαλίδα είτε σαν υποσημείωση στον πίνακα. Μπορεί να είναι μια σύντομη περιγραφή των στοιχείων, περίληψη ή επεξήγηση ή ακόμα και να απουσιάζει εντελώς αν ο πίνακας είναι μικρός και κατανοητός. Μετά το <caption> ακολουθούν τα <thead>, <tfoot> και <tbody>, με αυτή τη σειρά, και οριοθετούν τα αντίστοιχα κομμάτια του πίνακα. Ωστόσο, δεν είναι υποχρεωτικά και χρησιμοποιούνται συνήθως όταν ο πίνακας έχει πολλές σειρές, για να βοηθήσει τον browser να εκτυπώσει σωστά τον πίνακα ή για την μορφοποίηση των αντίστοιχων περιοχών με CSS. Παρεπιπτόντως, στην HTML5 δεν επιτρέπεται πλέον να έχουμε <td> μέσα σε <thead>.

Κάθε σειρά του πίνακα οριοθετείται με το <tr>, μέσα στο οποίο έχουμε τα «κουτάκια» με <th> ή <td>. Εδώ, ένα πρόγραμμα WYSIWYG ομολογουμένως βοηθάει αλλά καλό είναι να γνωρίζουμε και τι συμβαίνει «από πίσω». Ας δούμε έναν ολοκληρωμένο πίνακα με τον κώδικα και να το αναλύσουμε.

<table border="1" summary="Οι τιμές των προϊόντων ισχύουν για την συγκεκριμένη ημερομηνία, ενώ η επιλογή τους είναι εντελώς τυχαία!">
<caption>Τιμές εξαρτημάτων στις 21/12/2007 (ναι, είναι παλιό το άρθρο!)</caption>
<thead>
	<tr>
		<th rowspan="2">&amp;amp;nbsp;</th>
		<th colspan="2">Πλαίσιο</th>
		<th rowspan="2">MG Manager</th>
		<th rowspan="2">e-shop</th>
	</tr>
	<tr>
		<th>Online</th>
		<th>Στο κατάστημα</th>
	</tr>
</thead>
<tfoot>
	<tr>
		<th>Σύνολα</th>
		<th>597 €</th>
		<th>621 €</th>
		<th>622 €</th>
		<th>576 €</th>
	</tr>
</tfoot>
<tbody>
	<tr>
		<td>Intel Core 2 Duo E6850</td>
		<td>240 €</td>
		<td>250 €</td>
		<td>253 €</td>
		<td>230 €</td>
	</tr>
	<tr>
		<td>Asus P5E3</td>
		<td>215 €</td>
		<td>223 €</td>
		<td>217 €</td>
		<td>215 €</td>
	</tr>
	<tr>
		<td>WD Raptor 75GB</td>
		<td>142 €</td>
		<td>148 €</td>
		<td>152 €</td>
		<td>131 €</td>
	</tr>
</tbody>
</table>

Χρησιμοποίησα το border attribute κατ' εξαίρεση, για να δείτε το περίγραμμα του πίνακα — η παρουσίαση όπως είπαμε είναι δουλειά των CSS, οπότε καλό είναι να το αποφεύγετε. Επιπλέον, το border attribute δεν επιτρέπεται για το <table> στην HTML5. Το summary δεν εμφανίζεται πουθενά (εκτός από τα properties, με δεξί κλικ, στον Firefox). Το <caption> βλέπουμε ότι ο browser αναλαμβάνει να το εμφανίσει κεντραρισμένο πάνω από τον πίκακα μας – και πάλι, αυτή τη μπορείτε (και πρέπει) να την ελένξετε με CSS. Το <thead> περικλείει τα κουτάκια (<th>) που έχω ορίσει σαν επικεφαλίδες στις κολώνες του πίνακα ενώ το <tfoot> οριοθετεί την τελευταία σειρά του πίνακα – παρόλο που εμφανίζεται πριν από το <tbody>. Το rowspan="2" δηλώνει πως το συγκεκριμένο κελί πιάνει 2 σειρές ενώ το colspan="2" δηλώνει πως αυτό το κελί θα είναι ενωμένο με το επόμενο του στη σειρά. Τέλος, μπορούμε να παρατηρήσουμε την βασική μορφοποίηση που ήδη κάνει ο browser, στο <caption> όπως είπαμε αλλά και στα <th> που είναι με έντονα γράμματα και στοιχισμένα στο κέντρο.

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

(Καμία ψήφος)

 Loading ...

TrackBack URL