Κεφάλαιο 6

Εισαγωγή στους πίνακες



Εισαγωγή

Στο προηγούμενο κεφάλαιο αναφέραμε τον τρόπο με τον οποίο μπορούμε να εισάγουμε συνδέσμους και εικόνες σε ένα HTML έγγραφο. Αναφέραμε επίσης τον τρόπο με τον οποίο μπορούμε να τροποιήσουμε το μέγεθος μιας εικόνας καθώς και το σημείο που θα βρίσκονται σε μια ιστοσελίδα. Σε αυτό το κεφάλαιο θα κάνουμε μια εισαγωγή στους πίνακες, δηλαδή τον τρόπο με τον οποίο μπορούμε να δημιουργήσουμε κελιά, στήλες και να δημιουργήσουμε έναν πίνακα.


Δημιουργία πίνακα

Έστω ότι θέλουμε να φτιάξουμε τον παρακάτω πίνακα.

Κατάταξη Μηχανή αναζήτησης Σύνδεσμος (URL)
#1 Google Google
#2 Yahoo Yahoo
#3 Bing Bing


Πρωτού ξεκινήσουμε να φτιάξουμε τον πίνακα αυτόν είναι χρήσιμο να αναφέρουμε κάποια σημαντικά HTML tags για την δημιουργία ενός πίνακα.



HTML tag Περιγραφή
<table> </table> Είναι το βασικό HTML tag για δημιουργία πίνακα, οποιοδήποτε άλλο HTML tag που αφορά την δημιουργία ενός πίνακα θα πρέπει να περιέχεται εντός αυτού του HTML tag.
<tr></tr> Δημιουργία μιας σειράς. Οποιοδήποτε άλλο HTML tag που αφορά την δημιουργία κελιών θα πρέπει να περιέχονται εντός αυτού του tag.
<th> </th> Δημιουργία ενός κελιού επικεφαλίδας.
<td> </td> Δημιουργία ενός απλού κελιού.
<thead> </thead> Ένδειξη πρώτης σειράς πίνακα. Η χρήση του είναι προεραιτική και συνήθως χρησιμοποιείται για λόγους διευκόλυνσης. Μέσα σε αυτό το HTML tag πρέπει να μπει το περιεχόμενο της πρώτης σειράς του πίνακα.
<tbody> </tbody> Ένδειξη βασικών σειρών του πίνακα. Η χρήση του είναι προεραιτική και συνήθως χρησιμοποιείται για λόγους διευκόλυνσης. Μέσα σε αυτό το HTML tag πρέπει να μπει το περιεχόμενο των υπόλοιπων σειρών του πίνακα πλήν της αρχικής και της τελευταίας.
<tfoot> </tfoot> Ένδειξη τελευταίας σειράς πίνακα. Η χρήση του είναι προεραιτική και συνήθως χρησιμοποιείται για λόγους διευκόλυνσης. Μέσα σε αυτό το HTML tag πρέπει να μπει το περιεχόμενο της τελευταίας σειράς του πίνακα.

Διάφορα HTML tags για δημιουργία ενός πίνακα



<table border="1" width="400" >

<thead> <!-- Αρχή ένδειξης πρώτης σειράς πίνακα -->

<tr> <!-- Αρχή πρώτης σειράς πίνακα -->

<th> <!-- Αρχή πρώτου κελιού επικεφαλίδας -->

Επικεφαλίδα 1

</th> <!-- Τέλος πρώτου κελιού επικεφαλίδας -->


<th> <!-- Αρχή δεύτερου κελιού επικεφαλίδας -->

Επικεφαλίδα 2

</th> <!-- Τέλος δεύτερου κελιού επικεφαλίδας -->

<tr> <!-- Τέλος πρώτης σειράς πίνακα -->

</thead> <!-- Τέλος ένδειξης πρώτης σειράς πίνακα -->


<tbody> <!-- Αρχή ένδειξης υπόλοιπων σειρών πίνακα -->

<tr> <!-- Αρχή δεύτερης σειράς πίνακα -->

<td> <!-- Αρχή πρώτου κελιού -->

Περιεχόμενο 1

</td> <!-- Τέλος πρώτου κελιού -->


<td> <!-- Αρχή δεύτερου κελιού -->

Περιεχόμενο 2

</td> <!-- Τέλος δεύτερου κελιού -->

<tr> <!-- Τέλος δεύτερης σειράς πίνακα -->


<tr> <!-- Αρχή τρίτης σειράς πίνακα -->

<td> <!-- Αρχή πρώτου κελιού -->

Περιεχόμενο 3

</td> <!-- Τέλος πρώτου κελιού -->


<td> <!-- Αρχή δεύτερου κελιού -->

Περιεχόμενο 4

</td> <!-- Τέλος δεύτερου κελιού -->

<tr> <!-- Τέλος τρίτης σειράς πίνακα -->

</tbody> <!-- Τέλος ένδειξης υπόλοιπων σειρών πίνακα -->


<tfoot> <!-- Αρχή ένδειξης τελευταίας σειράς πίνακα -->

<tr> <!-- Αρχή τέταρτης σειράς πίνακα -->

<td> <!-- Αρχή πρώτου κελιού -->

Συμπέρασμα 1

</td> <!-- Τέλος πρώτου κελιού -->


<td> <!-- Αρχή δεύτερου κελιού -->

Συμπέρασμα 2

</td> <!-- Τέλος δεύτερου κελιού -->

<tr> <!-- Τέλος τέταρτης σειράς πίνακα -->

</tfoot> <!-- Τέλος ένδειξης τελευταίας σειράς πίνακα -->

</table>

Βασική δομή δημιουργίας πίνακα


  1. Το HTML tag <table> </table>. Όπως βλέπουμε μέσα σε αυτό βρίσκεται όλη η πληροφορία που περιέχει ο πίνακας. Χωρίς το tag αυτο ο brwoser δεν θα μπορέσει να εμφανίσει τον πίνακα αυτόν.

  2. Τα HTML tag <thead> <tbody> και <tfoot> είναι προεραιτικά και χρησιμοποιούνται για δική μας διευκόλυνση. Αν θέλετε μπορείτε να μην τα χρησιμοποιήσετε.

  3. Το HTML tag <tr> σχεδιάζει μια σειρά πίνακα χωρίς τα κελιά. Η χρήση του είναι απαραίτητη.

  4. Το HTML tag <th> σχεδιάζει ένα κελί επικεφαλίδας σε μια σειρά πίνακα. Χρησιμοποιούνται κυρίως στην πρώτη σειρά ενός πίνακα όπου θέλουμε να τονίσουμε με έντονα γράμματα τις διάφορες κατηγορίες που μπορεί να έχει ένας πίνακα. Τοποθετούνται πάντα εντός ενός <tr> tag

  5. Το HTML tag <td> σχεδιάζει ένα απλό κελί σε μια σειρά πίνακα. Έχουν γενική χρήση σε έναν πίνακα και τοποθετούνται πάντα εντός ενός <tr> tag

Είδαμε λοιπόν τον τρόπο με τον οποίο μπορούμε να δημιουργήσουμε έναν πίνακα με HTML tags. Οπότε σε αυτό το σημείο ας δούμε πως μπορούμε να φτιάξουμε τον πίνακα που είδαμε στην αρχή. Για να το κάνουμε αυτό θα γράψουμε τα εξής στον text editor μας.



Text Editor
<html>
   <head>
      <title> Πίνακες </title>
   </head>

   <body>

<p> Πίνακες </p>

<table border="1" width="400" >

<thead>

<tr>

<th> Κατάταξη </th>

<th> Μηχανή αναζήτησης </th>

<th> Σύνδεσμος (URL) </th>

<tr>

</thead>

<tbody>

<tr>

<td> #1 </td>

<td> Google </td>

<td> <a href="https://www.google.com/"> Google </a> </td>

</tr>

<tr>

<td> #2 </td>

<td> Yahoo </td>

<td> <a href="https://gr.yahoo.com/"> Yahoo </a> </td>

</tr>

</tr>

<td> #3 </td>

<td> Bing </td>

<td> <a href="https://www.bing.com/?cc=gr"> Bing </a> </td>

</tr>

</tbody>

<table>

   </body>
</html>


Όταν ανοίξουμε αυτό το HTML αρχείο θα μας εμφανήσει τα εξής.





Μορφοποίηση πινάκων

Μπορούμε επίσης να αποδώσουμε διάφορους χρωματισμούς στον πίνακα μας. Για παράδειγμα έστω ότι στο προηγούμενο παράδειγμα που είδαμε θέλουμε να δώσουμε έναν χρωματισμό στο background όπως φαίνεται παρακάτω.


Κατάταξη Μηχανή αναζήτησης Σύνδεσμος (URL)
#1
 Google Google
#2
 Yahoo Yahoo
#3
 Bing Bing

Για να το κάνουμε αυτό θα χρησιμοποιήσουμε ένα επιπλέον HTML tag εντός του tag <table> το οποίο είναι το <colgroup>. Το tag <colgroup> έχει την εξής δομή.



<colgroup>

<col Επιλογή 1    Επιλογή 2   Επιλογή 3 >
<col Επιλογή 1    Επιλογή 2   Επιλογή 3 >
<col Επιλογή 1    Επιλογή 2   Επιλογή 3 >

</colgroup>



Σε αυτό το σημείο ας αναλύσουμε την δομή του tag αυτού. Το tag colgroup αποτελεί την ένδειξη ότι αρχίζει η μορφοποίηση στηλών ενός πίνακα. Είναι δηλαδή σαν να λέμε στον browser πως οτιδήποτε υπάρχει εντός αυτού του tag αφορά καθαρά την μορφοποίηση ενός πίνακα. Το HTML tag <col> αποτελεί μια ένδειξη πως ότι επιλογές προστεθούν σε αυτό θα επιρεάσουν μια ή περισσότερες στήλες του πίνακα. Το προκαθορισμένο είναι να επηρεάζει μόνο μια στήλη αν εφόσων δεν υπάρχει κάποια span επιλογή που να είναι μεγαλύτερη του 1. Ο παρακάτω πίνακας δίνει όλες τις επιλογές που παίρνει το HTML tag <col>.



Επιλογή Τιμή Περιγραφή
span #αριθμός στηλών Ορίζει το σύνολο στηλών που θα επιρεαστούν
width #Αριθμός pixels Όρίζει το πλάτος μιας στήλης πίνακα
*Δεν υποστηρίζεται σε HTML5
height #Αριθμός pixels Όρίζει το ύψος μιας στήλης πίνακα
*Δεν υποστηρίζεται σε HTML5
bgcolor #Κωδικός χρώματος Ορίζει το background χρώμα μιας στήλης πίνακα

Οπότε λοιπόν στον text editor μας θα επεξεργαστούμε ως εξής το HTML έγγραφο μας.



Text Editor
<html>
   <head>
      <title> Μορφοποίηση πίνακα </title>
   </head>

   <body>

<p> Μορφοποίηση πίνακα </p>

<table border="1" width="400" >

<colgroup>

<col bgcolor= "#e6e6Fa" >
<col bgcolor= "#42d7f4" >
<col bgcolor= "#a6d8ae" >

</colgroup>

<thead>

<tr>

<th> Κατάταξη </th>

<th> Μηχανή αναζήτησης </th>

<th> Σύνδεσμος (URL) </th>

</tr>

</thead>

<tbody>

<tr align= "center">

<td> #1 </td>

<td> Google </td>

<td> <a href="https://www.google.com/"> Google </a> </td>

</tr>

<tr align= "center">

<td> #2 </td>

<td> Yahoo </td>

<td> <a href="https://gr.yahoo.com/"> Yahoo </a> </td>

</tr>

<tr align= "center">

<td> #3 </td>

<td> Bing </td>

<td> <a href="https://www.bing.com/?cc=gr"> Bing </a> </td>

</tr>

</tbody>

<table>

   </body>
</html>


Ας δούμε τώρα ένα άλλο παράδειγμα, έστω λοιπόν ο παρακάτω πίνακας και πρέπει να τον υλοποιήσουμε με γλώσσα σήμανσης HTML.


Κατάταξη Μηχανή αναζήτησης Σύνδεσμος (URL)
#1 Google Google
#2 Yahoo Yahoo
#3 Bing Bing
Σύνολλο μηχανών αναζήτησης: 3

Για να το κάνουμε αυτό θα τροποποιήσουμε ως εξής το HTML έγγραφο μας



Text Editor
<html>
   <head>
      <title> Μορφοποίηση πίνακα </title>
   </head>

   <body>

<p> Μορφοποίηση πίνακα </p>

<table border="1" width="400" >

<colgroup>

<col bgcolor= "#e6e6Fa" >
<col bgcolor= "#42d7f4" >
<col bgcolor= "#a6d8ae" >

</colgroup>

<thead>

<tr>

<th> Κατάταξη </th>

<th> Μηχανή αναζήτησης </th>

<th> Σύνδεσμος (URL) </th>

</tr>

</thead>

<tbody>

<tr align= "center">

<td> #1 </td>

<td> Google </td>

<td> <a href="https://www.google.com/"> Google </a> </td>

</tr>

<tr align= "center">

<td> #2 </td>

<td> Yahoo </td>

<td> <a href="https://gr.yahoo.com/"> Yahoo </a> </td>

</tr>

<tr align= "center">

<td> #3 </td>

<td> Bing </td>

<td> <a href="https://www.bing.com/?cc=gr"> Bing </a> </td>

</tr>

<tr>

<td colspan= "3"> #3 </td>

</tr>

</tbody>

<table>

   </body>
</html>


Σε αυτό το σημείο ας δούμε κι ένα άλλο παράδειγμα. Έστω ο παρακάτω πίνακας.



Λίστα 1 Λίστα 2 Λίστα 3
Αντικείμενο 1 Αντικείμενο 1 Αντικείμενο 1
Αντικείμενο 2 Αντικείμενο 2

Προσέξτε πως σε αυτόν τον πίνακα έχουμε ένα κελί που καταλαμβάνει μια ολόκληρη στήλη. Για να το κάνουμε αυτό χρησιμοποιούμε το HTML tag <rowspan>. Ας δούμε λοιπόν πως θα το φτιάξουμε αυτό στον text editor μας.



Text Editor
<html>
   <head>
      <title> Rowpsan </title>
   </head>

   <body>

<p> Rowspan </p>

<table border="1" width="400" >

<colgroup>

<col bgcolor= "#e6e6Fa" >
<col bgcolor= "#42d7f4" >
<col bgcolor= "#a6d8ae" >

</colgroup>

<thead>

<tr>

<th> Λίστα 1 </th>

<th> Λίστα 2 </th>

<th> Λίστα 3 </th>

</tr>

</thead>

<tbody>

<tr align= "center">

<td> Αντικείμενο 1 </td>

<td> Αντικείμενο 1 </td>

<td rowspan= "2"> Αντικείμενο 1 </td>

</tr>

<tr align= "center">

<td> Αντικείμενο 2 </td>

<td> Αντικείμενο 2 </td>

</tr>

</tbody>

<table>

   </body>
</html>


Τελευταία ενημέρωση: 19/08/2018





Follow us
 ☰