Εκμάθηση HTML/Πίνακες

Προηγούμενη Ενότητα	Περιεχόμενα	Επόμενη Ενότητα

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

Πως ορίζονται

Οι πίνακες χρησιμοποιούνε το tag <table> με τις ανάλογες παραμέτρους, και μέσα σε αυτό ανάλογα με το πως θέλουμε να εμφανίζεται τα κατάλληλα tags. Για μία γραμμή χρησιμοποιούμε το tag <tr>(table row), ενώ την γραμμή μπορούμε να την σπάσουμε σε κελιά με το tag <td>(table data). Ακολουθεί κώδικας για να τον δοκιμάσετε.

Παράδειγμα 4.1
γραμμή 1, κελί 1	γραμμή 1, κελί 2
γραμμή 2, κελί 1	γραμμή 2, κελί 2

<html>
 <body>
  <table>
   <tr>
    <td>γραμμή 1, κελί 1</td>
    <td>γραμμή 1, κελί 2</td>
   </tr>
   <tr>
    <td>γραμμή 2, κελί 1</td>
    <td>γραμμή 2, κελί 2</td>
   </tr>
  </table>
 </body>
</html>

Εάν σε μια γραμμή υπάρχουν περισσότερα κελιά από μια άλλη, τότε οι γραμμές που έχουν λιγότερα κελιά θα τα ευθυγραμμίσουν με την γραμμή που έχει τα περισσότερα, αφήνοντας κενά. Σε μερικούς φυλλομετρητές αυτό δείχνεται ως κενό, χωρίς καν κελί. Εάν θέλετε να το δείχνει ως κενό κελί τότε προσέξτε το επόμενο παράδειγμα στην γραμμή 2, κελί 2.

Παράμετροι

Εάν δοκιμάσατε τον προηγούμενο κώδικα θα προσέξατε πως τα κουτιά του πίνακα δεν ήταν εμφανή. Εάν θέλουμε να φαίνονται χρησιμοποιούμε την παράμετρο του <table>, <border="1">. O αριθμός υποδηλώνει τον αριθμό pixels που θα είναι το περίγραμμα. Ακολουθεί παράδειγμα.

Παράδειγμα 4.2
γραμμή 1, κελί 1	γραμμή 1, κελί 2
γραμμή 2, κελί 1

<html>
 <body>
  <table border="2">
   <tr>
    <td>γραμμή 1, κελί 1</td>
    <td>γραμμή 1, κελί 2</td>
   </tr>
   <tr>
    <td>γραμμή 2, κελί 1</td>
    <td>&nbsp;</td>
   </tr>
  </table>
 </body>
</html>

Άνισα κελιά

Εάν θέλουμε να κάνουμε ένα κελί μεγαλύτερο από τα υπόλοιπα επειδή απλά περιλαμβάνει δεδομένα που μπορούν να ενοποιηθούν χρησιμοποιούμε τις παραμέτρους colspan="2" και rowspan="2" ανάλογα.

Παράδειγμα 4.3
Όνομα	Τηλέφωνα
Βικιεπιστήμονας	28 65 228	28 65 229

<table border="1">
<tr>
  <td>Όνομα</th>
  <td colspan="2">Τηλέφωνα</th>
</tr>
<tr>
  <td>Βικιεπιστήμονας</td>
  <td>28 65 228</td>
  <td>28 65 229</td>
</tr>
</table>

Παράδειγμα 4.4
Όνομα:	Βικιεπιστήμονας
Τηλέφωνα:	28 65 228
Τηλέφωνα:	28 65 229

<table border="1">
 <tr>
  <td>Όνομα:</th>
  <td>Βικιεπιστήμονας</td>
 </tr>
 <tr>
  <td rowspan="2">Τηλέφωνα:</th>
  <td>28 65 228</td>
 </tr>
 <tr>
  <td>28 65 229</td>
 </tr>
</table>

Κεφαλίδες

Για να δώσουμε έμφαση σε ένα κελί ως τίτλος μιας στήλης, ως σύνολο κτλ. χρησιμοποιούμε αντί του <td> tag, το <th>.

Παράδειγμα 4.5
Τίτλος	Άλλος ένας τίτλος
γραμμή 1, κελί 1	γραμμή 1, κελί 2
γραμμή 2, κελί 1	γραμμή 2, κελί 2

<html>
 <body>
  <table border="1">
   <tr>
    <th>Τίτλος</th>
    <th>Άλλος ένας τίτλος</th>
   </tr>
   <tr>
    <td>γραμμή 1, κελί 1</td>
    <td>γραμμή 1, κελί 2</td>
   </tr>
   <tr>
    <td>γραμμή 2, κελί 1</td>
    <td>γραμμή 2, κελί 2</td>
   </tr>
  </table>
 </body>
</html>

Άλλες παράμετροι

<caption>Τίτλος πίνακα</caption><!-- Θα εμφανιστεί ακριβώς πάνω από τον πίνακα -->

<table border="1" cellpadding="10" bgcolor="purple">
<tr><!-- Ο πίνακας θα έχει φόντο μοβ χρώμα -->
  <td>Ένα κελί</td><!-- Ένα ευρύχωρο κελί -->
</tr>
</table>

<table border="1" cellspacing="10"> <!-- Ένα ευρύχωρο περίγραμμα -->
 <tr>
  <td bgcolor="purple">Ένα κελί</td> <!-- Μόνο το συγκεκριμένο κελί έχει μοβ χρώμα -->
  <td>Δεύτερο κελί</td>
 </tr>
</table>

<table border="1">
 <tr>
  <td>γραμμή 1, κελί 1, το ακριβώς από κάτω θα στοιχιστεί στα αριστερά</td>
  <td>γραμμή 1, κελί 2, το ακριβώς από κάτω θα στοιχιστεί στα δεξιά</td>
 </tr>
 <tr>
  <td align="left">γραμμή 2, κελί 1</td>
  <td align="right">γραμμή 2, κελί 2</td>
 </tr>
</table>

Έχετε την δυνατότητα το περίγραμμα να είναι προκαθορισμένο με τις εξής παραμέτρους: border, box, void, above, below, hsides, vsides, lhs, rhs.

<table frame="box">
<tr>
  <td>γραμμή 1, κελί 1</td>
  <td>γραμμή 1, κελί 2</td>
</tr>   
<tr>
  <td>γραμμή 2, κελί 1</td>
  <td>γραμμή 2, κελί 2</td>
</tr>
</table>

Προηγούμενη Ενότητα	Περιεχόμενα	Επόμενη Ενότητα