HTML πίνακες
HTML πίνακες
φοιτητικά νέα

Σε αυτό το άρθρο παρουσιάζουμε τη χρήση των πινάκων στη γλώσσα 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>
——————————–
Εδώ βλέπουμε τον πίνακα που δημιουργήσαμε:
δημιουργία πίνακα στην 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>
——————————–
Το αποτέλεσμα φαίνεται στην εικόνα:
περιγράμματα πινάκων στην html

Εδώ να τονίσουμε οτι πρέπει να μην ξεχάσουμε να βάλουμε περιγράμματα τόσο στον ίδιο τον πίνακα όσο και στα κελιά του πίνακα.

Ενοποίηση περιγραμμάτων πίνακα

Εάν θέλουμε να ενοποιήσουμε το περίγραμμα του πίνακα με τα περιγράμματα των κελιών τότε πρέπει να χρησιμοποιήσουμε την ιδιότητα CSS border-collapse property. Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
——————————–



 

   

   

   

 

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80



——————————–
Δείτε εδώ το αποτέλεσμα:
html border collapse

Χρήση πινάκων στην κατασκευή ιστοσελίδων

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

Στοίχιση επικεφαλίδων πίνακα

Οι ετικέτες των πινάκων στην 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:
στοίχιση επικεφαλίδων πίνακα 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>
——————————–
Δείτε εδώ το αποτέλεσμα:
html table caption

Ειδική στοίχιση πίνακα

Εάν θέλουμε να εφαρμόσουμε μια συγκεκριμένη μορφοποίηση σε ένα συγκεκριμένο πίνακα τότε θα πρέπει να εφαρμόσουμε ένα χαρακτηριστικό 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:
html special table style