Τι σημαίνει πίνακας μεταβλητού μεγέθους
Στην HTML ορίζουμε έναν πίνακα με την ετικέτα, tag, <table>. Στην συνέχεια ακολουθεί ο ορισμός των γραμμών και των πεδίων με τις ετικέτες <tr> και <td> αντίστοιχα. Πως ορίζεται στην HTML ένας πίνακας μεταβλητού μεγέθους ανάλογα δηλαδή με το μέγεθος του φυλλομετρητή;
Ανάλυση του html πίνακα
Εάν φτιάξουμε από την αρχή έναν πίνακα, αυτός θα πάρει τις εξορισμού ιδιότητες της html δίνοντας το αποτέλεσμα που βλέπουμε στην εικόνα. Ο πίνακας προσαρμόζεται στα περιεχόμενα του αγνοώντας το περιθώριο το οποίο ενδεχόμενα υπάρχει.
Ο κώδικας htmlγια τον πίνακα σε μια περίπτωση αποτελείται από μια επικεφαλίδα με τα κελιά της.
Ενώ για κάθε μια γραμμή <tr> υπάρχει μια σειρά από απλά κελιά <td> κάθε ένα από τα οποία περιέχει το αντίστοιχο δεδομένο.
Για να αντιμετωπίσουμε το πρόβλημα αυτό, χρειαζόμαστε κανόνες css οι οποίοι θα ορίσουν τόσο στον τρόπο εμφάνισης του πίνακα αλλά και την συμπεριφορά του σε σχέση με την σελίδα. Το τελευταίο σημαίνει ότι πρέπει να είναι ο html πίνακας μεταβλητού μεγέθους ώστε να προσαρμόζεται ανάλογα με το πλάτος της σελίδας.
Οι κανόνες CSS
Φτιάχνουμε λοιπόν μια κλάση την οποία θα χρησιμοποιήσουμε σε ολόκληρο τον πίνακα. Στην κλάση αυτή υπάρχει ο css κανόνας table-layout: fixed; ο οποίος ορίζει ότι η διάταξη του πίνακα προσαρμόζεται αυτόματα με βάση τα πλάτη της κάθε στήλης, όχι του φυλλομετρητή. Το πλάτος του πίνακα σε σχέση με τον φυλλομετρητή ορίζεται από την ιδιότητα width: 100%;, ενώ με την ιδιότητα white-space: nowrap; ορίζεται η μη αναδίπλωση του κειμένου.
Στην συνέχεια, για κάθε μια στήλη ορίζουμε μια ξεχωριστή κλάση css για αυτή με τον ανάλογο κανόνα ο οποίος ορίζει ένα συγκεκριμένο πλάτος σε ποσοστό, με χρήση της ιδιότητας width. Στην συνέχεια φτιάχνουμε μια κλάση για την επικεφαλίδα, header, η οποία ορίζει ένα χρώμα παρασκηνίου. Για κάθε ένα κελί του πίνακα ορίζουμε μια ενιαία κλάση στην οποίο ορίζουμε την απόσταση του κειμένου από τα περιθώρια του κελιού με χρήση της ιδιότητας padding.
Τέλος, κάνουμε ένα εφέ αλλαγής χρώματος ανά δυο γραμμές. Για να το πετύχουμε αυτό, ορίζουμε μια κλάση .όνομα-κλάσης tr:nth-child(even). Αυτό που λέει είναι: δες τον αριθμό της γραμμής η οποία είναι παιδί του πίνακα. Εάν είναι ζυγός αριθμός, τότε όρισε το χρώμα παρασκηνίου της με την ιδιότητα background.
Εφαρμογή στον πίνακα
Ας δούμε πως εφαρμόζεται ο πίνακας μεταβλητού μεγέθους. Πηγαίνουμε στον κώδικα του πίνακα και ορίζουμε την αρχική κλάση του <table class=”users”>. Στην συνέχεια ορίζουμε στο header του πίνακα τον αντίστοιχο κανόνα ανάλογα με την οριζόντια θέση του κελιού. Για παράδειγμα, το <th class=”row-3 row-job”>Θέση</th> ορίζει την στήλη εργασία. Η εμφάνιση των υπόλοιπων κελιών και γραμμών του πίνακα, θα οριστούν αυτόματα από τους προηγούμενους κανόνες. Αυτό θα συμβεί επειδή οι ετικέτες td και tr είναι παιδιά του πίνακα.
Στην ακόλουθη εικόνα βλέπουμε ότι ο πίνακας προσαρμόστηκε στο πλάτος του φυλλομετρητή. Η προσαρμογή αυτή γίνεται ανάλογα με την οριζόντια αυξομείωση του. Δηλαδή έχουμε έναν html πίνακα μεταβλητού μεγέθους. Επιπλέον βλέπουμε ότι ανά δύο γραμμές αλλάζει αυτόματα το χρώμα παρασκηνίου της γραμμής.
Επίλογος
Για να εφαρμόσουμε όλα αυτά πρέπει να είμαστε γνώστες των τεχνολογιών HTML και CSS και της εφαρμογής Dreamweaver.
Ακολουθεί ο κώδικας CSS
<style type="text/css">
.users {
table-layout: fixed;
width: 100%;
white-space: nowrap;
}
/* Column widths are based on these cells */
.row-ID {
width: 10%;
}
.row-name {
width: 20%;
}
.row-job {
width: 30%;
}
.row-email {
width: 40%;
}
.users td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.users th {
background: darkblue;
color: white;
text-align:center;
}
.users td,
{
text-align: left;
padding: 5px 10px;
}
.users tr:nth-child(even) {
background: lightblue;
}
</style>
Ακολουθεί ο κώδικας HTML του πίνακα
<table class="users"><thead><tr><th class="row-1 row-ID">ΑΑ</th> <th class="row-2 row-name">Όνομα</th> <th class="row-3 row-job">Θέση</th> <th class="row-4 row-email">Email</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Γιώργος</td> <td>Μηχανικός</td> <td>george@mycompany.com</td> </tr> <tr> <td>0002</td> <td>Γιάννης</td> <td>Λογιστικά</td> <td>giannis@mycompany.com</td> </tr> <tr> <td>0003</td> <td>Κώστας</td> <td>Αποθήκη</td> <td>kostas@mycompany.com</td> </tr> <tr> <td>0004</td> <td>Μαρία</td> <td>Γραμματεία</td> <td>mary@mycompany.com</td> </tr> </tbody> </table>
Πηγή άρθρου: http://css-tricks.com
