Πίνακες HTML με περιγράμματα
Οι πίνακες HTML μπορούν να έχουν περιγράμματα με διάφορα στυλ και σχήματα.
Πώς να προσθέσετε ένα περίγραμμα
Όταν προσθέτετε ένα περίγραμμα σε έναν πίνακα, προσθέτετε επίσης περιγράμματα γύρω από κάθε κελί του πίνακα:
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, ο κώδικας CSS επιλέγει τον πίνακα και τις θέσεις (td, th) και ορίζει ένα περίγραμμα με πάχος 1px και μαύρο χρώμα γύρω από αυτά. Επίσης, ορίζει ένα περιθώριο προς τα μέσα (padding) 8px για τα κελιά του πίνακα. Ο πίνακας περιέχει δύο γραμμές (tr) και δύο κελιά σε κάθε γραμμή.
Μπορείτε να προσαρμόσετε τα στυλ του περιγράμματος και τα χαρακτηριστικά των κελιών (όπως χρώμα φόντου, κείμενο, κλπ.) σύμφωνα με τις ανάγκες σας.
Για να αποφύγετε τα διπλά περιγράμματα όπως στο παράδειγμα παραπάνω, ορίστε την ιδιότητα CSS border-collapse σε collapse.
Αυτό θα κάνει τα περιγράμματα να συγκλίνουν σε ένα μόνο περίγραμμα:
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Με την προσθήκη της ιδιότητας border-collapse: collapse; στον κώδικα CSS, τα περιγράμματα των κελιών θα συγκλίνουν σε ένα μόνο περίγραμμα. Έτσι, δεν θα έχετε διπλά περιγράμματα γύρω από τον πίνακα και τα κελιά.
Μπορείτε να προσαρμόσετε τα στυλ του περιγράμματος και τα χαρακτηριστικά των κελιών (όπως χρώμα φόντου, κείμενο, κλπ.) σύμφωνα με τις ανάγκες σας.
[adinserter block=”2″]
Αν ορίσετε ένα χρώμα φόντου για κάθε κελί και δώσετε στο περίγραμμα ένα λευκό χρώμα (ίδιο με το φόντο του εγγράφου), θα έχετε την εντύπωση ενός αόρατου περιγράμματος:
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid white;
padding: 8px;
}
td {
background-color: #f1f1f1;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Με την προσθήκη του background-color για τα κελιά (td) και του περιγράμματος με χρώμα white, θα έχετε την εντύπωση ενός αόρατου περιγράμματος γύρω από τον πίνακα και τα κελιά.
Μπορείτε να προσαρμόσετε τα στυλ του περιγράμματος, το χρώμα των κελιών και άλλα χαρακτηριστικά σύμφωνα με τις ανάγκες σας.
Με την ιδιότητα border-radius, τα περιγράμματα αποκτούν γωνίες με στρογγυλεμένα άκρα:
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
border-radius: 10px;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Με την προσθήκη της ιδιότητας border-radius: 10px; στον κώδικα CSS, τα περιγράμματα των κελιών θα αποκτήσουν στρογγυλεμένες γωνίες με ακτίνα 10px. Έτσι, θα έχετε πίνακες με γωνίες που δείχνουν στρογγυλεμένες.
Μπορείτε να προσαρμόσετε την ακτίνα του γωνίας (border-radius) και άλλα στυλ του περιγράμματος, σύμφωνα με τις ανάγκες σας.
Για να παραλείψετε το περίγραμμα γύρω από τον πίνακα, απλά αφαιρέστε τη λέξη “table” από τον επιλογέα CSS:
<style>
td, th {
border: 1px solid black;
padding: 8px;
border-radius: 10px;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Με τον τρόπο αυτό, θα διατηρηθεί το περίγραμμα γύρω από τα κελιά του πίνακα, αλλά δεν θα υπάρχει περίγραμμα γύρω από τον ίδιο τον πίνακα.
[adinserter block=”3″]
Με την ιδιότητα border-style μπορείτε να ορίσετε την εμφάνιση του περιγράμματος.
Για να έχετε διακεκομμένα περιγράμματα στον πίνακα, μπορείτε να χρησιμοποιήσετε την τιμή dotted για την ιδιότητα border-style:
<style>
td, th {
border: 1px dotted black;
padding: 8px;
border-radius: 10px;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Με τον τρόπο αυτό, τα περιγράμματα των κελιών του πίνακα θα είναι διακεκομμένα (dotted).
Μπορείτε να προσαρμόσετε τις ιδιότητες του περιγράμματος (όπως πάχος, χρώμα, στυλ) και άλλες ιδιότητες των κελιών, σύμφωνα με τις ανάγκες σας.
Εκτός από την τιμή “dotted”, η ιδιότητα border-style μπορεί να πάρει και άλλες τιμές για την εμφάνιση του περιγράμματος. Ορισμένες από τις συνηθέστερες τιμές περιλαμβάνουν:
solid: Συμπαγές περίγραμμα με συνεχείς γραμμές.dashed: Περίγραμμα με διακεκομμένες γραμμές.double: Διπλό περίγραμμα με δύο συνεχείς γραμμές.groove: Περίγραμμα με εμφάνιση αυλακωμάτων.ridge: Περίγραμμα με εμφάνιση αυλακωμάτων και ανάγλυφη επιφάνεια.inset: Περίγραμμα με εμφάνιση που είναι εσοχή στο εσωτερικό του πίνακα.outset: Περίγραμμα με εμφάνιση που προεξέχει από τον πίνακα.
Για παράδειγμα, αν θέλετε να έχετε διακεκομμένα περιγράμματα, μπορείτε να χρησιμοποιήσετε την τιμή dashed για την ιδιότητα border-style:
<style>
td, th {
border: 1px dashed black;
padding: 8px;
border-radius: 10px;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Μπορείτε να πειραματιστείτε με διάφορες τιμές για την ιδιότητα border-style για να επιτύχετε την εμφάνιση περιγραμμάτων που σας ταιριάζει. Ακολουθούν κάποιες επιπλέον επιλογές:
[adinserter block=”4″]
<style>
td, th {
border: 1px solid black;
padding: 8px;
border-radius: 10px;
border-style: dashed; /* διακεκομμένο */
}
/* Παράδειγμα μερικών επιπλέον επιλογών */
td.dotted-border {
border-style: dotted; /* διακεκομμένο */
}
td.solid-border {
border-style: solid; /* συμπαγές */
}
td.double-border {
border-style: double; /* διπλό */
}
td.inset-border {
border-style: inset; /* εσωτερικό */
}
td.outset-border {
border-style: outset; /* εξωτερικό */
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td class="dotted-border">Περιεχόμενο 2 με διακεκομμένο περίγραμμα</td>
</tr>
<tr>
<td class="solid-border">Περιεχόμενο 3 με συμπαγές περίγραμμα</td>
<td class="double-border">Περιεχόμενο 4 με διπλό περίγραμμα</td>
</tr>
<tr>
<td class="inset-border">Περιεχόμενο 5 με εσοχή περίγραμμα</td>
<td class="outset-border">Περιεχόμενο 6 με προεξέχον περίγραμμα</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, προστέθηκαν διάφορες επιλογές για την ιδιότητα border-style σε διάφορα κελιά του πίνακα. Η τάξη dotted-border εφαρμόζει διακεκομμένο περίγραμμα, η τάξη solid-border εφαρμόζει συμπαγές περίγραμμα, η τάξη double-border εφαρμόζει διπλό περίγραμμα, η τάξη inset-border εφαρμόζει περίγραμμα που είναι εσοχή στο εσωτερικό του πίνακα, και η τάξη outset-border εφαρμόζει περίγραμμα που προεξέχει από τον πίνακα.
Μπορείτε να προσαρμόσετε τις τιμές και τις κλάσεις στον κώδικα HTML και CSS για να πετύχετε την εμφάνιση περιγραμμάτων που επιθυμείτε.
Με την ιδιότητα border-color μπορείτε να ορίσετε το χρώμα του περιγράμματος.
Για παράδειγμα, αν θέλετε να ορίσετε το χρώμα του περιγράμματος σε κόκκινο (red), μπορείτε να χρησιμοποιήσετε την εξής κατασκευή στον κώδικα CSS:
<style>
td, th {
border: 1px solid red;
padding: 8px;
border-radius: 10px;
}
</style>
<table>
<tr>
<th>Κεφαλίδα 1</th>
<th>Κεφαλίδα 2</th>
</tr>
<tr>
<td>Περιεχόμενο 1</td>
<td>Περιεχόμενο 2</td>
</tr>
</table>
Στο παραπάνω παράδειγμα, ορίσαμε το χρώμα του περιγράμματος σε κόκκινο (red) για τα κελιά του πίνακα. Μπορείτε να αντικαταστήσετε το “red” με οποιοδήποτε άλλο έγκυρο χρώμα (όπως hex, RGB, ή ονόματος χρώματος) που επιθυμείτε.
Μπορείτε επίσης να ορίσετε διαφορετικά χρώματα περιγράμματος για διάφορα κελιά ή ομάδες κελιών, χρησιμοποιώντας κλάσεις ή ID.