• Coffee
• Tea
• Milk

Ορισμός πινάκων

Με την ετικέτα <table> ορίζουμε έναν πίνακα. Το ζεύγος των ετικετών <tr>...</tr> ορίζει μια γραμμή του πίνακα, ενώ το ζεύγος των ετικετών <td>...</td> ορίζουν ένα κελί στην γραμμή του πίνακα. Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα. Στο παρακάτω παράδειγμα δημιουργήσαμε πίνακα με δύο γραμμές που η κάθε μια από αυτές έχει δύο στήλες (2X2):

<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Δοκίμασέ το

Επικεφαλίδες του πίνακα

Με την ετικέτα <th> ορίζουμε μια επικεφαλίδα σε μια στήλη του πίνακα. Το κείμενο που βρίσκετε μέσα στις ετικέτες <th> και </th> εμφανίζεται με bold χαρακτήρες. Η ετικέτες <th>...</th> τοποθετούνται μέσα στις ετικέτες <tr>...</tr> όπως οι ετικέτες <td>...</td>:

<table border="1">
<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>

Δοκίμασέ το

Τίτλο σε πίνακα

Με την ετικέτα <caption> τοποθετούμε τίτλο στον πίνακα μας. Ο τίτλος τοποθετείται επάνω από τον πίνακα με στοίχιση στο κέντρο:

<table border="1">
<caption>Τίτλος του Πίνακα</caption>
<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>

Δοκίμασέ το

Περιγράμματα στον πίνακα

Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα:

<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Δοκίμασέ το

Μήκος και ύψος του πίνακα

Με την ιδιότητα width ορίζουμε το μήκος του πίνακα:

<table border="1" width="400">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 3, στήλη 1</td>
<td>γραμμή 3, στήλη 2</td>
</tr>
</table>

Η ιδιότητα αυτή μπορεί να μπει επίσης στις ετικέτες <td> και <th>. Το παρακάτω παράδειγμα έχει το ίδιο αποτέλεσμα με το προηγούμενο όσο αφορά το σύνολο του μήκους του πίνακα. Στο επόμενο παράδειγμα ορίζουμε το μήκος για κάθε ένα κελί των γραμμών του πίνακα.

<table border="1">
<tr>
<td width="150">γραμμή 1, στήλη 1</td>
<td width="250">γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 3, στήλη 1</td>
<td>γραμμή 3, στήλη 2</td>
</tr>
</table>

Στο παραπάνω παράδειγμα τοποθετήσαμε την ιδιότητα width στην ετικέτα <td> αντί στην ετικέτα <table>. Το πρώτο κελί κάθε γραμμής του πίνακα έχει μήκος 150 pixels, ενώ το δεύτερο κελί κάθε γραμμής του πίνακα έχει μήκος 250 pixels, οπότε το συνολικό μήκος της κάθε γραμμής, άρα και του πίνακα, είναι 400 pixels. Η ιδιότητα width τοποθετείται μόνο στα κελιά (<td> ή <th>) της πρώτης γραμμής και εφαρμόζετε για όλα τα κελιά του πίνακα. Με αυτόν τον τρόπο όταν θέλουμε να αλλάξουμε το μήκος των κελιών ενός πίνακα, αλλάζουμε μόνο το μήκος των κελιών της πρώτης γραμμής του. Δεν είναι λάθος να τοποθετούμε την ιδιότητα width σε όλα τα κελιά (<td>) όλων των γραμμών του πίνακα. Φανταστείτε όμως έναν πίνακα με 100 γραμμές και κάθε μια από αυτές να έχει 8 κελιά. Αν ποτέ θελήσουμε να αλλάξουμε διαστάσεις στα κελιά του πίνακα αυτού θα χρειαζόταν να κάνουμε 100*8=800 αλλαγές τιμών! Ενώ αν τοποθετήσουμε την ιδιότητα width μόνο στα 8 κελιά της πρώτης γραμμής, τότε θα χρειαζόταν να κάνουμε μόνο 8 αλλαγές τιμών οι οποίες θα παρασύρουν όλα τα κελιά των επόμενων γραμμών του πίνακα.

Είναι προτιμότερο και συνηθέστερο να ορίζουμε το μήκος των κελιών (η ιδιότητα width στις ετικέτες <td> ή <th>) και όχι του συνολικού πίνακα (η ιδιότητα width στην ετικέτα <table>).

Με την ιδιότητα height ορίζουμε το ύψος των κελιών των γραμμών ενός πίνακα. Η ιδιότητα αυτή μπαίνει και στην ετικέτα <th>. Αν στον παραπάνω πίνακα θέλουμε να ορίσουμε ύψος 100 pixels στην πρώτη γραμμή του πίνακα, ύψος 200 pixels στην δεύτερη γραμμή του πίνακα και ύψος 150 pixels στην τρίτη γραμμή του πίνακα, τότε θα γράφαμε:

<table border="1">
<tr>
<td width="150" height="100">γραμμή 1, στήλη 1</td>
<td width="250">γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td height="200">γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td height="150">γραμμή 3, στήλη 1</td>
<td>γραμμή 3, στήλη 2</td>
</tr>
</table>

Η ιδιότητα height τοποθετείτε μόνο στο πρώτο κελί μιας γραμμής του πίνακα και εφαρμόζετε για όλα τα κελιά της γραμμής αυτής, κάτι ανάλογο δηλαδή με την ιδιότητα width η οποία την τοποθετούμε μόνο στα κελιά της πρώτης γραμμής του πίνακα και αυτή εφαρμόζεται για όλα τα κελιά των επόμενων γραμμών του πίνακα.

Δοκίμασε το

Στοίχιση του πίνακα μέσα στην σελίδα

Η ιδιότητα align της ετικέτας <table> ορίζει την στοίχιση του πίνακα μέσα στην σελίδα. Οι τιμές που μπορεί να πάρει η ιδιότητα align είναι: left, center και right:

<table border="1" align="center">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Δοκίμασέ το

Στοίχιση κειμένου μέσα στα κελιά

Με την ιδιότητα align των ετικετών <td> και <tr> καθορίζουμε την στοίχιση του κειμένου μέσα στα κελιά. Αν η ιδιότητα είναι στην ετικέτα <td> τότε η στοίχιση που καθορίσαμε θα ισχύει μόνο για το συγκεκριμένο κελί, ενώ αν είναι στην ετικέτα <tr> τότε η στοίχιση θα ισχύσει για όλα τα κελιά της γραμμής:

<table border="1">
<tr>
<td align="left">γραμμή 1, στήλη 1</td>
<td align="left">γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td align="right">γραμμή 2, στήλη 1</td>
<td align="right">γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td align="center">γραμμή 3, στήλη 1</td>
<td align="center">γραμμή 3, στήλη 2</td>
</tr>
<tr align="center">
<td>γραμμή 4, στήλη 1</td>
<td>γραμμή 4, στήλη 2</td>
</tr>
</table>

Δοκίμασέ το

Κελιά χωρίς περιεχόμενο

Σε μερικούς browsers δεν εμφανίζονται σωστά οι πίνακες με κενά κελιά. Γι' αυτό τον λόγο καλό είναι να χρησιμοποιήτε τον κωδικό διαφυγής &nbsp; :

<table border="1" align="center">
<tr>
<td> </td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td> </td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Δοκίμασέ το

Χρώμα σε όλο τον πίνακα, στην γραμμή, στο κελί

Μπορούμε να βάλουμε χρώμα σε όλο τον πίνακα ή σε μια γραμμή του πίνακα ή σε ένα κελί του πίνακα, ανάλογα που θα τοποθετήσουμε την ιδιότητα bgcolor ( δηλαδή ή στην ετικέτα <table> ή στην <tr> ή στην <td> ):

Background σε όλο τον πίνακα
<table border="1" bgcolor="red">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

<br />
Background σε μια γραμμή του πίνακα
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr bgcolor="red">
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

<br />
Background σε ένα κελί του πίνακα
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td bgcolor="red">γραμμή 2, στήλη 2</td>
</tr>
</table>

Δοκίμασέ το

Μάθετε περισσότερα για τα Χρώματα

Εικόνα σαν φόντο σε όλο τον πίνακα, στην γραμμή, στο κελί

 

Οι ιδιότητες cellspacing και cellpadding της ετικέτας <table>

Με την ιδιότητα cellspacing της ετικέτας <table> ορίζουμε το πάχος των σκιασμένων γραμμών που διαχωρίζουν τα κελιά, ενώ με την ιδιότητα cellpadding της ετικέτας ορίζουμε τον κενό χώρο μεταξύ του πλαισίου των κελιών και του περιεχομένου αυτών

Με την μπλε γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellspacing, ενώ με την κόκκινη γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellpadding

Με την μπλε γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellspacing, ενώ με την κόκκινη γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellpadding



Ο παρακάτω πίνακας έχει cellspacing 10

1,1	1,2
2,1	2,2

Ο παρακάτω πίνακας έχει cellpadding 10

1,1	1,2
2,1	2,2

Ο παρακάτω πίνακας έχει cellpadding 10 ΚΑΙ cellspacing 10

1,1	1,2
2,1	2,2

Δοκίμασε το

 

Συγχώνευση κελιών

Οριζόντια συγχώνευση κελιών : Όταν θέλουμε ένα κελί να επεκτείνεται σε πολλές κολόνες, χρησιμοποιούμε την ιδιότητα colspan η οποία ορίζει τον αριθμό των κολόνων που επεκτείνεται. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>:

 

<table width="264" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" bgcolor="#66CCFF"> 
  
</tr>
<tr>

</tr>
<tr>
 
</tr>
<tr>
 
<td colspan="3" bgcolor="#66CCFF"> 
</tr>
<tr>
 
</tr>
</table>

 

Δοκίμασέ το

 

Κάθετη συγχώνευση κελιών : Πολλές φορές θέλουμε ορισμένα κελιά στον πίνακα να επεκτείνονται σε πολλές γραμμές. Αυτό γίνετε με την ιδιότητα rowspan της ετικέτας <td>. Η ιδιότητα rowspan ορίζει τον αριθμό των γραμμών που θα επεκτείνεται το κελί. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>:

 

<table width="264" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" bgcolor="#66CCFF"> 
 
</tr>
<tr>
 
</tr>
<tr>
 
<td rowspan="3" bgcolor="#66CCFF"> 
</tr>
<tr>
 
</tr>
<tr>
 
</tr>
</table>

 

Δοκίμασέ το