Σε αυτό το άρθρο παρουσιάζουμε τη χρήση των πινάκων στη γλώσσα HTML.
Δημιουργία πίνακα στην HTML
Ένας πίνακας ορίζεται στη γλώσσα HTML χρησιμοποιώντας την ετικέτα <table>.
Κάθε γραμμή του πίνακα ορίζεται χρησιμοποιώντας την ετικέτα <tr>.
Οι επικεφαλίδες του πίνακα ορίζονται χρησιμοποιώντας την ετικέτα <th>.
Κάθε στήλη του πίνακα ορίζεται χρησιμοποιώντας την ετικέτα <td>.
Ακολουθεί παράδειγμα στο οποίο βλέπουμε με ποιον τρόπο μπορούμε να φτιάξουμε ένα πίνακα στη γλώσσα HTML:
——————————–
<!DOCTYPE html>
<html>
<body>
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
——————————–
Εδώ βλέπουμε τον πίνακα που δημιουργήσαμε:
Οι ετικέτες <td> αποτελούν τους υποδοχείς μέσα στους οποίους τοποθετούνται τα περιεχόμενα των κελιών του πίνακα.
Μπορούν να περιέχουν κάθε είδους στοιχείο της γλώσσας html, όπως για παράδειγμα κείμενα, εικόνες, λίστες, άλλους πίνακες και άλλα.
Περιγράμματα πινάκων στην html
Εάν δεν καθορίσουμε συγκεκριμένη τιμή για τα περιγράμματα του πίνακα, τότε ο πίνακας θα εμφανιστεί χωρίς περιγράμματα.
Το περίγραμμα ενός πίνακα στη γλώσσα HTML καθορίζεται μέσω της ιδιότητας CSS border property όπως στο παράδειγμα που ακολουθεί:
——————————–
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
——————————–
Το αποτέλεσμα φαίνεται στην εικόνα:
Εδώ να τονίσουμε οτι πρέπει να μην ξεχάσουμε να βάλουμε περιγράμματα τόσο στον ίδιο τον πίνακα όσο και στα κελιά του πίνακα.
Ενοποίηση περιγραμμάτων πίνακα
Εάν θέλουμε να ενοποιήσουμε το περίγραμμα του πίνακα με τα περιγράμματα των κελιών τότε πρέπει να χρησιμοποιήσουμε την ιδιότητα CSS border-collapse property. Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
——————————–
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
——————————–
Δείτε εδώ το αποτέλεσμα:
Χρήση πινάκων στην κατασκευή ιστοσελίδων
Οι πίνακες είναι ένα πολύ δυνατό εργαλείο στην κατασκευή ιστοσελίδων. Επιτρέπει στον κατασκευαστή της ιστοσελίδας να καθορίσει τη θέση εμφάνισης των στοιχείων html. Ουσιαστικά δυο τρόπους έχουμε για να καθορίσουμε τη στοίχιση των στοιχείων της html. Ο πρώτος τρόπος είναι οι πίνακες και οδεύτερος τρόπος είναι τα div. Η ευχέρεια στη δημιουργία πινάκων με τη γλώσσα html αποτελεί απαραίτητη γνώση για οποιονδήποτε θέλει να ασχοληθεί επαγγελματικά με την κατασκευή ιστοσελίδων.
Περιθώρια περιεχομένου από το περίγραμμα (Cell Padding)
Η ιδιότητα cell padding καθορίζει το περιθώριο ανάμεσα στο περιεχόμενο του κελιού και στα περιγράμματα του κελιού.
Εάν δεν καθορίσουμε τιμή για το cell padding, τότε τα περιεχόμενα των κελιών του πίνακα θα παρουσιάζονται χωρίς περιθώρια.
If you do not specify a padding, the table cells will be displayed without padding.
——————————–
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
——————————–
Δείτε εδώ το αποτέλεσμα:
Στοίχιση επικεφαλίδων πίνακα
Οι ετικέτες των πινάκων στην html έχουν προκαθορισμένη στοίχιση στο κέντρο του κελιού.
Εάν θέλουμε να κάνουμε αριστερή στοίχιση των επικεφαλίδων του πίνακα τότε πρέπει να χρησιμοποιήσουμε την ιδιότητα CSS text-align property.
Αυτό φαίνεται στο παράδειγμα:
——————————–
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
——————————–
Ακολουθεί το αποτέλεσμα του παραπάνω κώδικα html:
Απόσταση μεταξύ κελιών πίνακα
Τώρα θα δουμε με ποιόν τρόπο μπορούμε να καθορίσουμε την απόσταση μεταξύ των κελιών ενός πίνακα όταν κασκευάζουμε μια ιστοσελίδα.
Για να ρυθμίσουμε την απόσταση μεταξύ των κελιών του πίνακα πρέπει να χρησιμοποιήσουμε την ιδιότητα CSS border-spacing property.
Αυτό φαίνεται στο παράδειγμα:
——————————–
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
——————————–
Δείτε εδώ το αποτέλεσμα:
Στην περίπτωση που έχουμε ενοποιήσει τα περιγράμματα του πίνακα με την ιδιότητα collapsed borders, τότε το border-spacing δεν θα έχει καμμια επίδραση.
Επέκταση κελιού σε πολλές στήλες
Όταν θέλουμε ένα κελί να επεκταθεί σε δυο ή περισσότερες στήλες τότε πρέπει να χρησιμοποιήσουμε το χαρακτηριστικό colspan attribute:
——————————–
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
——————————–
Στη συνέχεια βλέπουμε το αποτέλεσμα:
Επέκταση κελιού σε πολλές γραμμές
Όταν θέλουμε ένα κελί να επεκταθεί σε δυο ή περισσότερες γραμμές τότε πρέπει να χρησιμοποιήσουμε το χαρακτηριστικό rowspan attribute:
——————————–
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
——————————–
Ακολουθεί το αποτέλεσμα που θα δούμε στο φυλλομετρητή:
Λεζάντα πίνακα
Για να προσθέσουμε μια λεζάντα σε ένα πίνακα, πρέπει να χρησιμοποιήσουμε την ετικέτα <caption>:
——————————–
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
——————————–
Δείτε εδώ το αποτέλεσμα:
Ειδική στοίχιση πίνακα
Εάν θέλουμε να εφαρμόσουμε μια συγκεκριμένη μορφοποίηση σε ένα συγκεκριμένο πίνακα τότε θα πρέπει να εφαρμόσουμε ένα χαρακτηριστικό id attribute στον πίνακα:
——————————–
<table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
——————————–
Στη συνέχεια πρέπει να ορίσουμε μορφοποίηση CSS για αυτό το id:
——————————–
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
——————————–
Ακολουθεί εικόνα στην οποία βλέπουμε δυο πίνακες. Στον πρώτο δεν εφαρμόστηκε το style ενώ στο δεύτερο εφαρμόστηκε το style:
