Skip to content

Latest commit

 

History

History
417 lines (331 loc) · 16.4 KB

4. Πίνακες.md

File metadata and controls

417 lines (331 loc) · 16.4 KB

Πίνακες

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

Πίνακας με 1 γραμμή (row), 2 στήλες (columns), σύνολο κελιών 2.

1,1 1,2

Πίνακας με 2 γραμμές (rows), 3 στήλες (columns), σύνολο κελιών 6.

1,1 1,2 1,3
2,1 2,2 2,3

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

Εισαγωγή πίνακα στην σελίδα

<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).


Ιδιότητες πινάκων

Ιδιότητα Τιμή Περιγραφή
align left, center, right ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει την στοίχιση του πίνακα μέσα στην σελίδα
bgcolor rgb(x,x,x) ή #xxxxxx ή colorname ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει το χρώμα το φόντου του πίνακα
boder Αριθμός ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει το πάχος του περιγράμματος του πίνακα.
cellpadding Pixels ή % ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει το μέγεθος του κενού χώρου μεταξύ του πλαισίου των κελιών και του περιεχομένου αυτών
cellspacing Pixels ή % ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει το πάχος των σκιασμένων γραμμών που διαχωρίζουν τα κελιά
frame void above below hsides lhs rhs vsides box border ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει την εμφάνιση του εξωτερικού πλαισίου του πίνακα.
rules none groups rows cols all ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει την εμφάνιση των γραμμών που χωρίζουν τα κελιά μέσα στον πίνακα
summary κείμενο Ορίζει μια περιγραφή για τον πίνακα
width pixels ή % ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5. Ορίζει το μήκος του πίνακα

Border

Εισαγωγή περιγράμματος σε πίνακα. Η ιδιότητα 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 & Height

Με την ιδιότητα width ορίζουμε το μήκος του πίνακα. Η ιδιότητα αυτή μπορεί να χρησιμοποιηθεί επίσης στις ετικέτες <td> και <th>. Στο παρακάτω παράδειγμα, η width του πίνακα είναι 400 pixels.

<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>

Στο επόμενο παράδειγμα ορίζουμε το μήκος για κάθε ένα κελί των γραμμών του πίνακα.

<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 αλλαγές τιμών οι οποίες και θα παρασύρουν όλα τα κελιά των επόμενων γραμμών του πίνακα.

Με την ιδιότητα height ορίζουμε το ύψος των κελιών των γραμμών ενός πίνακα. Η συγκεκριμένη ιδιότητα μπορεί να τοποθετηθεί και στην ετικέτα <th>. Στο παρακάτω παράδειγμα θα ορίσουμε το ύψος της πρώτης γραμμής 100 pixes, της δεύτερης 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>

Παράδειγμα:

<!DOCTYPE html5>
<html>
<head>
  <meta content="text/html; charset=utf-8" />
  <title>Δοκίμασε το</title>
</head>

<body>

<table border="1" align="center">
  <caption>
  Πίνακας με στοίχιση στο κέντρο
  </caption>
  <tr>
    <td>γραμμή 1, στήλη 1</td>
    <td>γραμμή 1, στήλη 2</td>
  </tr>
  <tr>
    <td>γραμμή 2, στήλη 1</td>
    <td>γραμμή 2, στήλη 2</td>
  </tr>
</table>

<br />

<table border="1" align="left">
  <caption>
  Πίνακας με στοίχιση στα αριστερά
  </caption>
  <tr>
    <td>γραμμή 1, στήλη 1</td>
    <td>γραμμή 1, στήλη 2</td>
  </tr>
  <tr>
    <td>γραμμή 2, στήλη 1</td>
    <td>γραμμή 2, στήλη 2</td>
  </tr>
</table>

<br />
<br />
<br />
<br />
<br />

<table border="2" align="right">
  <caption>
      Πίνακας με στοίχιση στα δεξιά
  </caption>
  <tr>
    <td>γραμμή 1, στήλη 1</td>
    <td>γραμμή 1, στήλη 2</td>
  </tr>
  <tr>
    <td>γραμμή 2, στήλη 1</td>
    <td>γραμμή 2, στήλη 2</td>
  </tr>
</table>
</body>

</head>
</html>

Αποτέλεσμα:

tables


Στοίχιση κειμένου εντός των κελιών

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

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

Αποτέλεσμα:

tables1


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

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

<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>

Αποτέλεσμα:

tables_color


Εικόνα για φόντο

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

<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>

Αποτέλεσμα:

tables_bg


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

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

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

tables_cellspacing


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

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

Οριζόντια συγχώνευση κελιών:

<table width="264" border="1" cellspacing="0" cellpadding="0">
<tr>
  <td colspan="2" bgcolor="#66CCFF"> 
  Συγχώνευση κελιών
  </td>
</tr>
<tr>
  <td> κελί 2,1</td>
  <td> κελί 2,2</td>
  <td> κελί 2,3</td>

</tr>
<tr>
  <td> κελί 3,1</td>
  <td> κελί 3,2</td>
  <td> κελί 3,3</td>
</tr>
<tr>
  <td colspan="3" bgcolor="#66CCFF"> 
  <td>κελί 4</td>
</tr>
</table>

Αποτέλεσμα:

tables_colspan


Στην HTML5 έχουν καταργηθεί όλες οι ιδιότητες, εκτός από την ιδιότητα summary. Πλέον όπως θα δούμε στα επόμενα κεφάλαια, ορίζουμε τις διάφορες ιδιότητες ενός πίνακα με CSS (Cascading Style Sheets)