Οι πίνακες είναι μια δομή της HTML η οποία μας επιτρέπει να εμφανίσουμε κείμενα και γραφικά στοιχισμένα μέσα σε γραμμές και στήλες. Όταν μάθετε περισσότερα για τους πίνακες, θα καταλάβετε πόσο μεγάλη σημασία έχουν σε μια σελίδα.

Πίνακας 1Χ2
1,1 1,2

Πίνακας 2Χ3
1,1 1,2 1,3
2,1 2,2 2,3

Πίνακας 5Χ5
1,1 1,2 1,3 1,4 1,5
2,1 2,2 2,3 2,4 2,5
3,1 3,2 3,3 3,4 3,5
4,1 4,2 4,3 4,4 4,5
5,1 5,2 5,3 5,4 5,5

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

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

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

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

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

Εισαγωγή τίτλου σε πίνακα
<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>
Με την ετικέτα <caption> τοποθετούμε τίτλο στον πίνακα μας. Ο τίτλος τοποθετείται επάνω από τον πίνακα με στοίχιση στο κέντρο.

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

Εισαγωγή περιγράμματος σε πίνακα
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα.

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

Πως ορίζουμε μήκος (width) και ύψος (height) ενός πίνακα
<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>
Με την ιδιότητα width ορίζουμε το μήκος του πίνακα. Η ιδιότητα αυτή μπορεί να μπει επίσης στις ετικέτες <td> και <th>. Το παρακάτω παράδειγμα έχει το ίδιο αποτέλεσμα με το προηγούμενο όσο αφορά το σύνολο του μήκους του πίνακα. Στο επόμενο παράδειγμα ορίζουμε το μήκος για κάθε ένα κελί των γραμμών του πίνακα.
Πως ορίζουμε μήκος (width) και ύψος (height) ενός πίνακα
<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 στην τρίτη γραμμή του πίνακα, τότε θα γράφαμε :
Πως ορίζουμε μήκος (width) και ύψος (height) ενός πίνακα
<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 η οποία την τοποθετούμε μόνο στα κελιά της πρώτης γραμμής του πίνακα και αυτή εφαρμόζεται για όλα τα κελιά των επόμενων γραμμών του πίνακα.

Δοκίμασε το

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

Πως στοιχίζουμε έναν πίνακα μεσα στην σελίδα
<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 της ετικέτας <table> ορίζει την στοίχιση του πίνακα μέσα στην σελίδα. Οι τιμές που μπορεί να πάρει η ιδιότητα align είναι: left, center και right

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

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

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

Πως πρέπει να γράφουμε τα κενά κελιά
<table border="1" align="center">
<tr>
<td> </td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td> </td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
Σε μερικούς browsers δεν εμφανίζονται σωστά οι πίνακες με κενά κελιά. Γι' αυτό τον λόγο καλό είναι να χρησιμοποιήτε τον κωδικό διαφυγής & nbsp;

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

Πως βάζουμε χρώμα σε πίνακα
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>
Μπορούμε να βάλουμε χρώμα σε όλο τον πίνακα ή σε μια γραμμή του πίνακα ή σε ένα κελί του πίνακα, ανάλογα που θα τοποθετήσουμε την ιδιότητα bgcolor ( δηλαδή ή στην ετικέτα <table> ή στην <tr> ή στην <td> ).

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

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

Εικόνα σαν φόντο σε πίνακα
Background σε όλο τον πίνακα
<table border="1" background="bird.jpg">
<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 background="bird.jpg">
<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 background="bird.jpg">γραμμή 2, στήλη 2</td>
</tr>
</table>
Με την ιδιότητα background των ετικετών <table>, <tr> και <td> ορίζουμε μια εικόνα για φόντο σε ολόκληρο τον πίνακα ή σε μια γραμμή ή σε ένα κελί, ανάλογα σε ποια από τις τρεις ετικέτες θα το τοποθετήσουμε

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

Με την ιδιότητα cellspacing της ετικέτας <table> ορίζουμε το πάχος των σκιασμένων γραμμών που διαχωρίζουν τα κελιά, ενώ με την ιδιότητα 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>
Στην HTML5 έχουν καταργηθεί όλες οι ιδιότητες, εκτός την ιδιότητα summary. Ορίζουμε τις διάφορες ιδιότητες ενός πίνακα με CSS
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.