Πρώτα βήματα στην HTML: table

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

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

Το πρώτο tag μέσα στον πίνακα μπορεί να είναι το <caption> και χρησιμοποιείται είτε σαν επικεφαλίδα είτε σαν υποσημείωση στον πίνακα. Μπορεί να είναι μια σύντομη περιγραφή των στοιχείων, περίληψη ή επεξήγηση ή ακόμα και να απουσιάζει εντελώς αν ο πίνακας είναι μικρός και κατανοητός. Μετά το <caption> ακολουθούν τα <thead>, <tfoot> και <tbody>, με αυτή τη σειρά, και οριοθετούν τα αντίστοιχα κομμάτια του πίνακα. Ωστόσο, δεν είναι υποχρεωτικά και χρησιμοποιούνται συνήθως όταν ο πίνακας έχει πολλές σειρές, για να βοηθήσει τον browser να εκτυπώσει σωστά τον πίνακα. Κάθε σειρά του πίνακα οριοθετείται με το <tr>, μέσα στο οποίο έχουμε τα «κουτάκια» με <th> ή <td>. Εδώ, ένα πρόγραμμα WYSIWYG ομολογουμένως μπορεί να βοηθήσει αλλά καλό είναι να γνωρίζουμε το τι συμβαίνει «από πίσω» για να μπορέσουμε να εντοπίσουμε (και να λύσουμε) διάφορα προβλήματα συμβατότητας που ίσως προκύψουν. Ας δούμε έναν ολοκληρωμένο πίνακα με τον κώδικα και να το αναλύσουμε.


Τιμές εξαρτημάτων στις 21/12/2007
  Πλαίσιο MG Manager e-shop
Online Στο κατάστημα
Σύνολα 597 € 621 € 622 € 576 €
Intel Core 2 Duo E6850 240 € 250 € 253 € 230 €
Asus P5E3 215 € 223 € 217 € 215 €
WD Raptor 75GB 142 € 148 € 152 € 131 € 

<table border="1" summary="Οι τιμές των προϊόντων ισχύουν για την συγκεκριμένη ημερομηνία, ενώ η επιλογή τους είναι εντελώς τυχαία!">
	<caption>Τιμές εξαρτημάτων στις 21/12/2007</caption>
	<thead>
		<tr>
			<th rowspan="2"> </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, οπότε καλό είναι να το αποφεύγετε. Το summary δεν εμφανίζεται πουθενά (εκτός από τα properties, με δεξί κλικ, στον Firefox). Το <caption> βλέπουμε ότι ο browser αναλαμβάνει να το εμφανίσει κεντραρισμένο πάνω από τον πίκακα μας – και πάλι, αυτή τη συμπεριφορά θα μπρέσετε να την αλλάξετε με CSS. Το <thead> περικλείει τα κουτάκια (<th>) που έχω ορίσει σαν επικεφαλίδες στις κολώνες του πίνακα ενώ το <tfoot> οριοθετεί την τελευταία σειρά του πίνακα – παρόλο που εμφανίζεται πριν από το <tbody>. Το rowspan="2" δηλώνει πως το συγκεκριμένο κελί πιάνει 2 σειρές ενώ το colspan="2" δηλώνει πως αυτό το κελί θα είναι ενωμένο με το επόμενο του στη σειρά. Τέλος, μπορούμε να παρατηρήσουμε την βασική μορφοποίηση που ήδη κάνει ο browser, στο <caption> όπως είπαμε αλλά και στα <th> που είναι με έντονα γράμματα και στοιχισμένα στο κέντρο.

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