Πίνακες HTML
Εισαγωγή στους πίνακες HTML
Στο μάθημα αυτό θα κάνουμε μια εισαγωγή στους πίνακες html.
Οι πίνακες στην html ορίζονται με τις ετικέτες table, tr και td οι οποίες όλες μαζί έχουν την ακόλουθη δομή:
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
Οι ετικέτες <table> και </table> ορίζουν την αρχή και τον τερματισμό του πίνακα. Κάθε γραμμή του πίνακα ορίζεται από τις ετικέτες <tr> και </tr>. Στο συγκεκριμένο παράδειγμα βλέπουμε 2 ζευγάρια αυτών των ετικετών, δηλαδή 2 γραμμές. Σε κάθε μια γραμμή έχουμε 3 κελιά κάθε ένα από τα οποία ορίζεται με τις ετικέτες <td> και </td>. Στην ουσία οι ετικέτες αυτές ορίζουν τις στήλες του πίνακα. Για τον λόγο αυτόν βλέπουμε μεταξύ των ετικετών γραμμών, tr, να ορίζονται 3 κελιά με τις ετικέτες td.
Επικεφαλίδες σε πίνακες
Σε έναν πίνακα μπορούμε να ορίσουμε τα κελιά, td, μιας γραμμής, tr, ως επικεφαλίδες. Αυτό γίνεται με την χρήση της ετικέτας <th> στην θέση της ετικέτας <td>. Η μορφοποίηση της γραμμής-επικεφαλίδας είναι κεντραρισμένο κείμενο με έντονη γραφή. Στο ακόλουθο παράδειγμα παρατηρήστε την χρήση του th ως ετικέτα επικεφαλίδας:
<table>
<tr>
<th scope="col">Όνομα</th>
<th scope="col">Επίθετο</th>
<th scope="col">Βαθμός</th>
</tr>
<tr>
<td>Γιώργος</td>
<td>Γεωργόπουλος</td>
<td>14</td>
</tr>
<tr>
<td>Γιάννης</td>
<td>Γιαννόπουλος</td>
<td>16</td>
</tr>
</table>
Στο πρώτη γραμμή του πίνακα, η οποία ορίζεται από το πρώτο ζευγάρι tr, χρησιμοποιείται η ετικέτα th ως επικεφαλίδα.
Περίγραμμα στον πίνακα
Όταν ορίζονται οι πίνακες στη html, το περίγραμμα του πίνακα είναι εξ’ ορισμού ανενεργό, δηλαδή έχει τιμή=0. Για τον ορισμό του περιγράμματος στον χρησιμοποιούνται οι ιδιότητες html στην ετικέτα table:
<table border="1" bordercolor="blue">
<tr>
<th>Όνομα</th>
<th>Επίθετο</th>
<th>Βαθμός</th>
</tr>
<tr>
<td>Γιώργος</td>
<td>Γεωργόπουλος</td>
<td>14</td>
</tr>
<tr>
<td>Γιάννης</td>
<td>Γιαννόπουλος</td>
<td>16</td>
</tr>
</table>
Παρατηρούμε λοιπόν τον ορισμό ενός μπλε περιγράμματος πάχους 1pixel με χρήση των ιδιοτήτων border και bordercolor. Το αποτέλεσμα είναι ένα περίγραμμα τόσο γύρω από τον πίνακα όσο και γύρο από κάθε κελί.
Περίγραμμα με χρήση css style
Ο καλύτερος τρόπος ορισμού των ιδιοτήτων του πίνακα, όπως το περίγραμμα, είναι η χρήση των κανόνων css.
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Untitled Document</title>
<style>
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Όνομα</th>
<th>Επίθετο</th>
<th>Βαθμός</th>
</tr>
<tr>
<td>Γιώργος</td>
<td>Γεωργόπουλος</td>
<td>14</td>
</tr>
<tr>
<td>Γιάννης</td>
<td>Γιαννόπουλος</td>
<td>16</td>
</tr>
</table>
</body>
</html>
Στο παράδειγμα αυτό ορίσαμε με μια ετικέτα style στο head κομμάτι της σελίδας και για τις τρεις ετικέτες οι οποίες ορίζουν τον πίνακα, την ιδιότητα του περιγράμματος με έναν κανόνα css. Παρατηρούμε τον διαχωρισμό των ετικετών του πίνακα με κόμα «,».
Η ιδιότητα border-collapse
Αν προσέξουμε το περίγραμμα του πίνακα σε σχέση με αυτό των κελιών αλλά και των κελιών μεταξύ τους, βλέπουμε ότι υπάρχει ένα κενό. Το οπτικό αποτέλεσμα δεν είναι τόσο καλό. Αυτό διορθώνεται με την ιδιότητα border-collapse η οποία εξαλείφει το κενό αυτό κάνοντας τα περιγράμματα να φαίνονται σαν ένα ενιαίο περίγραμμα. Η ιδιότητα αυτή μπαίνει στον ορισμό του css κανόνα.
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Untitled Document</title>
<style>
table, th, td {
border: 1px solid blue;
border-collapse:collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Όνομα</th>
<th>Επίθετο</th>
<th>Βαθμός</th>
</tr>
<tr>
<td>Γιώργος</td>
<td>Γεωργόπουλος</td>
<td>14</td>
</tr>
<tr>
<td>Γιάννης</td>
<td>Γιαννόπουλος</td>
<td>16</td>
</tr>
</table>
</body>
</html>
Περιθώριο κελιών – cell padding
Με την ιδιότητα cell-padding βάζουμε περιθώριο μεταξύ του περιγράμματος του κελιού και του περιεχομένου μέσα σε αυτό. Με τον τρόπο αυτόν δίνουμε αέρα στα περιεχόμενα του πίνακα.
Στο ακόλουθο παράδειγμα ορίζουμε έναν κανόνα, cell-padding=5 pixels, css για τις ετικέτες κελιού και επικεφαλίδας:
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Untitled Document</title>
<style>
table, th, td {
border: 1px solid blue;
border-collapse:collapse;
}
th,td {
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Όνομα</th>
<th>Επίθετο</th>
<th>Βαθμός</th>
</tr>
<tr>
<td>Γιώργος</td>
<td>Γεωργόπουλος</td>
<td>14</td>
</tr>
<tr>
<td>Γιάννης</td>
<td>Γιαννόπουλος</td>
<td>16</td>
</tr>
</table>
</body>
</html>
Η ιδιότητα colspan στον πίνακα
Σε έναν πίνακα μπορεί να θελήσουμε να επεκτείνουμε μια στήλη σε περισσότερες από μια στήλες. Στην περίπτωση αυτή χρησιμοποιούμε την ιδιότητα colspan δίνοντας της τον αριθμό των στηλών που θέλουμε να επεκταθεί.
Στο επόμενο παράδειγμα την χρησιμοποιούμε μέσα στην ετικέτα ορισμού κεφαλίδας th. Ο λόγος είναι ότι θέλουμε η ιδιότητα αυτή να εφαρμοστή μόνο στην συγκεκριμένη ετικέτα. Εάν θέλαμε να την εφαρμόσουμε σε όλες τις th ετικέτες του πίνακα, θα χρησιμοποιούσαμε css κανόνα:
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Untitled Document</title>
<style>
table, th, td {
border: 1px solid blue;
border-collapse:collapse;
}
th,td {
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Ονοματεπώνυμο</th>
<th>Βαθμός</th>
</tr>
<tr>
<td>Γιώργος</td>
<td>Γεωργόπουλος</td>
<td>14</td>
</tr>
<tr>
<td>Γιάννης</td>
<td>Γιαννόπουλος</td>
<td>16</td>
</tr>
</table>
</body>
</html>
Τέλος, με την ίδια τεχνική μπορούμε να επεκτείνουμε μια γραμμή σε περισσότερες από μια γραμμές με χρήση της ιδιότητας rowspan.
Επίλογος
Στο μάθημα αυτό κάναμε μια εισαγωγή στους πίνακες html. Είδαμε πως με την χρήση των βασικών ιδιοτήτων τους μπορούμε να φτιάξουμε εμφανίσιμους πίνακες.
