3.9 Στυλ σε έναν πίνακα και Colgroup στην HTML

Συνεχίζουμε στα ελληνικά.

Για να δώσετε στυλ σε έναν πίνακα HTML, μπορείτε να χρησιμοποιήσετε τις ιδιότητες CSS για να προσαρμόσετε το χρώμα, τη γραμματοσειρά, το περίγραμμα και άλλα χαρακτηριστικά του πίνακα.

Για παράδειγμα, μπορείτε να ορίσετε ένα στυλ για έναν πίνακα με τον εξής τρόπο:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

td {
  background-color: #ffffff;
}
</style>

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>30</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, έχουμε ορίσει τον πίνακα να έχει σύγκλιση (collapse) των περιγράμματων των κελιών, πλάτος 100% και κάθε κελί να έχει ένα padding 8px και κείμενο στο κέντρο (text-align: center).

Επίσης, οι επικεφαλίδες του πίνακα (th) έχουν ένα φόντο χρώματος #f2f2f2, ενώ τα κανονικά κελιά (td) έχουν ένα φόντο χρώματος #ffffff.

Μπορείτε να προσαρμόσετε τις τιμές των ιδιοτήτων CSS στον πίνακα σύμφωνα με τις προτιμήσεις σας για το στυλ του πίνακα.

[adinserter block=”2″]

Εδώ είναι μερικά παραδείγματα για να αρχίσετε:

<style>
table {
  border-collapse: separate; /* ή collapse για σύγκλιση */
  border-spacing: 5px; /* απόσταση μεταξύ των κελιών */
  width: 100%;
}

th, td {
  border: 1px solid black; /* περίγραμμα κελιών */
  padding: 10px; /* εσωτερικό padding των κελιών */
  text-align: center; /* στοίχιση κειμένου στο κέντρο */
}

th {
  background-color: #f2f2f2; /* φόντο επικεφαλίδων */
  font-weight: bold; /* έντονη γραφή για τις επικεφαλίδες */
}

td {
  background-color: #ffffff; /* φόντο κανονικών κελιών */
}
</style>

Παρακάτω μπορείτε να βρείτε μερικές ιδέες για την προσαρμογή του στυλ του πίνακα:

  • Αλλάξτε το χρώμα των κελιών με τη χρήση της ιδιότητας background-color.
  • Προσθέστε σκιά γύρω από τον πίνακα με τη χρήση της ιδιότητας box-shadow.
  • Αλλάξτε το χρώμα του περιγράμματος των κελιών με τη χρήση της ιδιότητας border-color.
  • Προσαρμόστε τη γραμματοσειρά του κειμένου στα κελιά με τη χρήση της ιδιότητας font-family.

Αυτά είναι μερικά παραδείγματα για να συνεχίσετε την προσαρμογή του στυλ του πίνακα:

  • Προσαρμόστε το πάχος του περιγράμματος των κελιών με την ιδιότητα border-width.
  • Αλλάξτε το χρώμα και το μέγεθος της γραμματοσειράς με τις ιδιότητες color και font-size.
  • Προσθέστε εσωτερικό και εξωτερικό padding για περισσότερο κενό γύρω από το περιεχόμενο των κελιών με την ιδιότητα padding.
  • Αλλάξτε τον τύπο γραμμής του περιγράμματος με την ιδιότητα border-style.
  • Προσθέστε εφέ hover στα κελιά με τη χρήση της ιδιότητας :hover και την ιδιότητα background-color για να αλλάξει το φόντο όταν το ποντίκι περνάει πάνω από τα κελιά.

Αυτές είναι μόνο μερικές ιδέες για την προσαρμογή του στυλ του πίνακα. Μπορείτε να εξερευνήσετε περισσότερες ιδιότητες CSS και να προσαρμόσετε τον κώδικα σύμφωνα με τις προτιμήσεις και τις απαιτήσεις σας για το στυλ του πίνακα HTML.

Για να δημιουργήσετε κάθετες ζέβρες σε έναν πίνακα, μπορείτε να προσαρμόσετε το στυλ κάθε δεύτερης στήλης αντί για κάθε δεύτερη γραμμή. Αυτό θα δημιουργήσει την εναλλαγή των χρωμάτων στις κάθετες στήλες του πίνακα.

Παρακάτω είναι ένα παράδειγμα για τη δημιουργία κάθετων ζεβρών σε έναν πίνακα HTML:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

td:nth-child(even) {
  background-color: #f9f9f9;
}
</style>

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
    <th>Πόλη</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td>25</td>
    <td>Αθήνα</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>30</td>
    <td>Θεσσαλονίκη</td>
  </tr>
  <tr>
    <td>Γιώργος</td>
    <td>28</td>
    <td>Πάτρα</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, χρησιμοποιούμε την ιδιότητα CSS td:nth-child(even) για να επιλέξουμε και να προσαρμόσουμε το στυλ των κάθετων ζεβρών. Όλα τα ζυγά αριθμημένα κελιά (κάθε δεύτερη στήλη) έχουν ένα φόντο χρώματος #f9f9f9.

[adinserter block=”3″]

Μπορείτε να προσαρμόσετε τα χρώματα και τις ιδιότητες CSS στον κανόνα td:nth-child(even) σύμφωνα με τις προτιμήσεις σας. Εδώ είναι μερικά παραδείγματα:

<style>
td:nth-child(even) {
  background-color: #e6e6e6; /* ανοικτό χρώμα */
  color: #333333; /* χρώμα κειμένου */
  font-weight: bold; /* έντονη γραφή */
  text-align: center; /* στοίχιση κειμένου στο κέντρο */
  /* προσαρμογή άλλων ιδιοτήτων CSS */
}
</style>

Στο παραπάνω παράδειγμα, έχουμε προσαρμόσει το φόντο σε ένα ανοικτό χρώμα (#e6e6e6), το χρώμα του κειμένου σε ένα σκούρο χρώμα (#333333), τον καθένα κείμενο στο κέντρο του κελιού και έχουμε ορίσει έντονη γραφή για τα κελιά. Μπορείτε να προσαρμόσετε αυτές τις ιδιότητες σύμφωνα με τις προτιμήσεις σας.

Αυτή η προσαρμογή θα δώσει την εναλλαγή των χρωμάτων στις κάθετες στήλες του πίνακα, δημιουργώντας το επιθυμητό αποτέλεσμα των κάθετων ζεβρών.

Μπορείτε να συνδυάσετε το στυλ από τα δύο προηγούμενα παραδείγματα για να έχετε ζέβρες σε κάθε άλλη γραμμή και κάθε άλλη στήλη του πίνακα. Αυτό θα δημιουργήσει την εναλλαγή των χρωμάτων και οριζόντια και κατακόρυφα στον πίνακα.

Αν χρησιμοποιήσετε ένα διάφανο χρώμα, θα πετύχετε ένα εφέ επικάλυψης των ζεβρών.

Παρακάτω είναι ένα παράδειγμα για τη συνδυασμένη εφαρμογή ζεβρών και οριζόντια και κατακόρυφα:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) td:nth-child(odd),
tr:nth-child(odd) td:nth-child(even) {
  background-color: #f9f9f9;
}

tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd) {
  background-color: transparent;
}
</style>

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
    <th>Πόλη</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td>25</td>
    <td>Αθήνα</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>30</td>
    <td>Θεσσαλονίκη</td>
  </tr>
  <tr>
    <td>Γιώργος</td>
    <td>28</td>
    <td>Πάτρα</td>
  </tr>
</table>

Συνεχίζουμε:

Στο παραπάνω παράδειγμα, χρησιμοποιούμε τους κανόνες CSS tr:nth-child(even) td:nth-child(odd) και tr:nth-child(odd) td:nth-child(even) για να επιλέξουμε και να προσαρμόσουμε το στυλ των κελιών στις ζέβρες. Αυτοί οι κανόνες εφαρμόζονται σε κάθε άλλη γραμμή και κάθε άλλη στήλη του πίνακα. Οι ζέβρες στις οριζόντιες στήλες έχουν ένα φόντο χρώματος #f9f9f9, ενώ οι ζέβρες στις κατακόρυφες γραμμές έχουν ένα διάφανο φόντο (transparent).

Μπορείτε να προσαρμόσετε τα χρώματα και τις ιδιότητες CSS στους κανόνες tr:nth-child(even) td:nth-child(odd) και tr:nth-child(odd) td:nth-child(even) σύμφωνα με τις προτιμήσεις σας. Μπορείτε να αλλάξετε τα χρώματα, τη γραμματοσειρά, το περίγραμμα και άλλα χαρακτηριστικά για να προσαρμόσετε την εμφάνιση των ζεβρών.

Επίσης, μπορείτε να αλλάξετε τον κανόνα tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd) ανάλογα με το πώς θέλετε να είναι η εμφάνιση των κελιών που δεν ανήκουν στις ζέβρες.

Αυτή η προσαρμογή θα δώσει την εναλλαγή των χρωμάτων τόσο οριζόντια όσο και κατακόρυφα στον πίνακα, δημιουργώντας το επιθυμητό αποτέλεσμα των ζεβρών. Αν χρησιμοποιήσετε ένα διάφανο χρώμα για τις ζέβρες, θα παρατηρήσετε ένα εφέ επικάλυψης καθώς οι ζέβρες θα επικαλύπτουν το περιεχόμενο των κελιών.

Μπορείτε να πειραματιστείτε με τις τιμές των ιδιοτήτων CSS, όπως τα χρώματα, οι γραμματοσειρές, τα περιγράμματα και άλλα, για να προσαρμόσετε το στυλ των ζεβρών κατάλληλα για την εφαρμογή σας.

Είναι σημαντικό να θυμάστε ότι οι ζέβρες είναι ένα στυλ σχεδιασμού που χρησιμοποιείται για να καταστήσει τα δεδομένα σε έναν πίνακα πιο ευανάγνωστα. Ωστόσο, θα πρέπει να λαμβάνετε υπόψη την προσβασιμότητα και την αναγνωσιμότητα του πίνακα και να διασφαλίζετε ότι οι ζέβρες δεν παρεμποδίζουν την κατανόηση των δεδομένων από τους χρήστες.

Για να προσθέσετε οριζόντιους διαχωριστικούς γραμμές ανάμεσα στις γραμμές του πίνακα, μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS border-bottom στα στοιχεία <tr>.

[adinserter block=”4″]

Εδώ είναι ένα παράδειγμα:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

tr {
  border-bottom: 1px solid #dddddd; /* οριζόντια γραμμή διαχωρισμού */
}

td:last-child {
  border-bottom: none; /* αφαιρούμε τη γραμμή από το τελευταίο κελί */
}
</style>

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
    <th>Πόλη</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td>25</td>
    <td>Αθήνα</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>30</td>
    <td>Θεσσαλονίκη</td>
  </tr>
  <tr>
    <td>Γιώργος</td>
    <td>28</td>
    <td>Πάτρα</td>
  </tr>
</table>

Αυτή η προσαρμογή θα προσθέσει μια οριζόντια γραμμή διαχωρισμού ανάμεσα στις γραμμές του πίνακα. Η γραμμή ορίζεται με την ιδιότητα CSS border-bottom και ορίζεται σε 1 pixel πάχος και χρώμα #dddddd.

Επιπλέον, χρησιμοποιούμε τον επιλογέα :last-child για να αφαιρέσουμε τη γραμμή από το τελευταίο κελί της κάθε γραμμής. Αυτό γίνεται με τη χρήση της ιδιότητας border-bottom και της τιμής none για το τελευταίο κελί.

Μπορείτε να προσαρμόσετε την ιδιότητα border-bottom σύμφωνα με τις προτιμήσεις σας. Μπορείτε να αλλάξετε το πάχος της γραμμής, το χρώμα και άλλες ιδιότητες για να ταιριάζουν με το στυλ του πίνακα σας.

Μην διστάσετε να πειραματιστείτε με τις τιμές και τις ιδιότητες CSS για να επιτύχετε το επιθυμητό αποτέλεσμα και να προσαρμόσετε το στυλ του πίνακα σύμφωνα με τις ανάγκες σας.

Συνεχίζουμε στα ελληνικά.

Για να υπογραμμίσετε τις γραμμές του πίνακα όταν το ποντίκι περνάει πάνω από αυτές, μπορείτε να χρησιμοποιήσετε τον επιλογέα :hover στα στοιχεία <tr>.

Εδώ είναι ένα παράδειγμα:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #e6e6e6; /* χρώμα υπογράμμισης γραμμής */
}
</style>

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
    <th>Πόλη</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td>25</td>
    <td>Αθήνα</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>30</td>
    <td>Θεσσαλονίκη</td>
  </tr>
  <tr>
    <td>Γιώργος</td>
    <td>28</td>
    <td>Πάτρα</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, χρησιμοποιούμε τον επιλογέα tr:hover για να επιλέξουμε τις γραμμές του πίνακα όταν το ποντίκι περνάει πάνω από αυτές. Οι επιλεγμένες γραμμές έχουν ένα χρώμα υπογράμμισης #e6e6e6 που μπορείτε να προσαρμόσετε ανάλογα με τις προτιμήσεις σας.

Μπορείτε να προσαρμόσετε το χρώμα υπογράμμισης στον κανόνα tr:hover ανάλογα με τις προτιμήσεις σας. Μπορείτε επίσης να προσθέσετε άλλες ιδιότητες CSS, όπως αλλαγή χρώματος κειμένου ή οποιαδήποτε άλλη αλλαγή εμφάνισης, για να ορίσετε το επιθυμητό στυλ για την υπογράμμιση των γραμμών.

Αυτή η προσθήκη θα προσδώσει μια διαισθητική ανταπόκριση όταν ο χρήστης τοποθετεί το ποντίκι του πάνω από μια γραμμή του πίνακα, βελτιώνοντας την εμπειρία πλοήγησης και την αναγνωσιμότητα του πίνακα.

Ο στοιχείο χρησιμοποιείται για να δώσει στιλ σε συγκεκριμένες στήλες ενός πίνακα.

[adinserter block=”5″]

HTML Πίνακας με
Εάν θέλετε να δώσετε στιλ στις δύο πρώτες στήλες ενός πίνακα, χρησιμοποιήστε τα στοιχεία και .

Παράδειγμα:

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col style="background-color: orange;">
  </colgroup>
  <tr>
    <th>Κεφαλίδα 1</th>
    <th>Κεφαλίδα 2</th>
    <th>Κεφαλίδα 3</th>
  </tr>
  <tr>
    <td>Περιεχόμενο 1</td>
    <td>Περιεχόμενο 2</td>
    <td>Περιεχόμενο 3</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, οι δύο πρώτες στήλες του πίνακα θα έχουν κίτρινο και πορτοκαλί χρώμα αντίστοιχα, ενώ οι υπόλοιπες στήλες θα παραμείνουν με το προεπιλεγμένο στιλ.

Εάν θέλετε να δώσετε στιλ σε περισσότερες στήλες με διαφορετικά στιλ, χρησιμοποιήστε περισσότερα στοιχεία μέσα στο :

Παράδειγμα:

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col style="background-color: orange;">
    <col style="background-color: lightblue;">
  </colgroup>
  <tr>
    <th>Κεφαλίδα 1</th>
    <th>Κεφαλίδα 2</th>
    <th>Κεφαλίδα 3</th>
  </tr>
  <tr>
    <td>Περιεχόμενο 1</td>
    <td>Περιεχόμενο 2</td>
    <td>Περιεχόμενο 3</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, οι τρεις πρώτες στήλες του πίνακα θα έχουν διαφορετικά χρώματα (κίτρινο, πορτοκαλί, ανοικτό μπλε), ενώ οι υπόλοιπες στήλες θα παραμείνουν με το προεπιλεγμένο στιλ.

Εάν θέλετε να δώσετε στιλ σε στήλες στη μέση ενός πίνακα, εισάγετε ένα “άδειο” στοιχείο (χωρίς στιλ) για τις στήλες πριν από αυτές:

Παράδειγμα:

<table>
  <colgroup>
    <col>
    <col>
    <col style="background-color: yellow;">
    <col style="background-color: orange;">
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Κεφαλίδα 1</th>
    <th>Κεφαλίδα 2</th>
    <th>Κεφαλίδα 3</th>
    <th>Κεφαλίδα 4</th>
    <th>Κεφαλίδα 5</th>
    <th>Κεφαλίδα 6</th>
  </tr>
  <tr>
    <td>Περιεχόμενο 1</td>
    <td>Περιεχόμενο 2</td>
    <td>Περιεχόμενο 3</td>
    <td>Περιεχόμενο 4</td>
    <td>Περιεχόμενο 5</td>
    <td>Περιεχόμενο 6</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, οι στήλες 3 και 4 του πίνακα θα έχουν κίτρινο και πορτοκαλί χρώμα αντίστοιχα, ενώ οι υπόλοιπες στήλες θα παραμείνουν με το προεπιλεγμένο στιλ. Τα άδεια στοιχεία χρησιμοποιούνται απλώς για να δηλώσουν τον αριθμό των στηλών που θέλουμε να δώσουμε στιλ, αλλά χωρίς να ορίζουμε πραγματικά στυλ για αυτές.

Μπορείτε να αποκρύψετε στήλες χρησιμοποιώντας την ιδιότητα visibility: collapse:

Παράδειγμα:

<style>
  .hidden-column {
    visibility: collapse;
  }
</style>

<table>
  <tr>
    <th>Κεφαλίδα 1</th>
    <th>Κεφαλίδα 2</th>
    <th class="hidden-column">Κεφαλίδα 3</th>
    <th>Κεφαλίδα 4</th>
  </tr>
  <tr>
    <td>Περιεχόμενο 1</td>
    <td>Περιεχόμενο 2</td>
    <td class="hidden-column">Περιεχόμενο 3</td>
    <td>Περιεχόμενο 4</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, η τρίτη στήλη (με την κεφαλίδα “Κεφαλίδα 3” και το περιεχόμενο “Περιεχόμενο 3”) θα αποκρυφθεί χρησιμοποιώντας την κλάση “hidden-column” και τον κανόνα CSS που την συνοδεύει. Οι υπόλοιπες στήλες θα εμφανιστούν κανονικά.

21 Αυγούστου, 2023
top
error: Content is protected !!
Μετάβαση σε γραμμή εργαλείων