Tables
Οι πίνακες δίνουν τη δυνατότητα στον προγραμματιστή να ταξινομήσει τα δεδομένα του σε γραμμές και στήλες. Για τη δημιουργία του γίνεται χρήση της ετικέτας <table>. Ανάμεσα στα <table> και </table> προσθέτουμε κάθε γραμμή με το tag <tr>, την οποία χωρίζουμε σε κελιά (στήλες) με το tag <td>. Μπορούμε, επίσης, να δώσουμε έμφαση σε ένα κελί ως τίτλο μιας στήλης χρησιμοποιώντας το tag <th> αντί για το <td>. Δημιουργούμε έναν πίνακα με 3 σειρές και 2 στήλες, ορίζοντας τα κελιά της πρώτης σειράς ως τίτλους κάθε στήλης:
<table>
<tr>
<th>Τίτλος στήλης 1</th>
<th>Τίτλος στήλης 2</th>
</tr>
<tr>
<td>Σειρά 1, Κελί 1</td>
<td>Σειρά 1, Κελί 2</td>
</tr>
<tr>
<td>Σειρά 2, Κελί 1</td>
<td>Σειρά 2, Κελί 2</td>
</tr>
</table>
Δημιουργία απλού πίνακα
Οι παράμετροι που μπορεί να δεχτεί το στοιχείο table είναι:
- align (left, right, center): οριζόντια στοίχιση του πίνακα
- width (π.χ. 300, 90%): πλάτος του πίνακα σε pixel ή σε ποσοστό
- border (π.χ. 0, 1, 2 κλπ): μέγεθος του περιγράμματος των κελιών σε pixel
- cellspacing (π.χ. 0, 1, 2 κλπ): το περιθώριο σε pixel μεταξύ των κελιών
- cellpadding (π.χ. 0, 1, 2 κλπ): το περιθώριο σε pixel μεταξύ του περιεχομένου και του κελιού
- bgcolor (π.χ. red ή #FF0000): το χρώμα του φόντου του πίνακα
- background: ορισμός μίας εικόνας ως φόντο του πίνακα
Συνδυάζοντας κάποια από τα παραπάνω, μπορούμε να έχουμε:
<table align="center" width="400" border="1" cellpadding="5" cellspacing="10">
<tr>
<th>Τίτλος στήλης 1</th>
<th>Τίτλος στήλης 2</th>
</tr>
<tr>
<td>Σειρά 1, Κελί 1</td>
<td>Σειρά 1, Κελί 2</td>
</tr>
<tr>
<td>Σειρά 2, Κελί 1</td>
<td>Σειρά 2, Κελί 2</td>
</tr>
</table>
Δημιουργία πίνακα με χρήση βασικών ιδιοτήτων του
Οι παράμετροι που μπορούν να ενσωματωθούν στα tags tr, th και td είναι:
- nowrap: δεν επιτρέπει την αναδίπλωση του κειμένου σε ένα κελί
- rowspan (π.χ. 1, 2 κλπ): ο αριθμός των γραμμών που καταλαμβάνονται από ένα κελί
- colspan (π.χ. 1, 2 κλπ): ο αριθμός των στηλών που καταλαμβάνονται από ένα κελί
- width: πλάτος κελιού
- height: ύψος κελιού
- align: οριζόντια στοίχιση του περιεχομένου σε ένα κελί
- valign: κάθετη στοίχιση του περιεχομένου σε ένα κελί
- bgcolor: ορισμός του χρώματος του φόντου μιας σειράς ή ενός κελιού
<table align="center" width="400" border="1" cellpadding="5" cellspacing="10">
<tr>
<th>Τίτλος στήλης 1</th>
<th>Τίτλος στήλης 2</th>
</tr>
<tr>
<td colspan="2" align="center">Σειρά 1, Κελί 1 + 2</td>
</tr>
<tr>
<td>Σειρά 2, Κελί 1</td>
<td>Σειρά 2, Κελί 2</td>
</tr>
<tr >
<td rowspan="2" valign="top">Σειρά 3 + 4, Κελί 1</td>
<td>Σειρά 3, Κελί 2</td>
</tr>
<tr>
<td>Σειρά 4, Κελί 2</td>
</tr>
</table>
Δημιουργία πίνακα με χρήση ιδιοτήτων των κελιών