Σε αυτό το μάθημα θα μάθετε πως να δημιουργείτε πίνακες. Οι πίνακες είναι αρκετά χρήσιμοι, καθώς σας δίνουν την δυνατότητα να δημιουργήσετε το μενού της ιστοσελίδας σας καθώς και να τοποθετήσετε τα κείμενά σας σε διαφορετικά σημεία της σελίδας και όχι το ένα κάτω από το άλλο.
Οι πίνακες χρησιμοποιούνε το 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> </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>
