Υποενότητα 5.2: CSS σε Πίνακες

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 5.2: CSS σε Πίνακες
Printed by: Guest user
Date: Thursday, 28 March 2024, 11:55 AM

Description

  • Ιδιότητες CSS
  • Κανόνες κλάσεων

Ιδιότητες CSS στους πίνακες

Οι πίνακες, όπως κάθε στοιχείο HTML, μπορούν να μορφοποιηθούν χρησιμοποιώντας το CSS.
Ορισμένες ιδιότητες κοινής χρήσης CSS για πίνακες είναι:

  • border, που καθορίζει το περίγραμμα του πίνακα
  • border-collapse, που συγχωνεύει τα περιγράμματα των κελιών
  • color, που αλλάζει το χρώμα του κειμένου
  • width, που καθορίζει το πλάτος του πίνακα
  • height, που καθορίζει το ύψος του πίνακα
  • padding, που καθορίζει το διάκενο του πίνακα
  • text‐align για οριζόντια στοίχιση κειμένου
  • vertical‐align για κατακόρυφη στοίχιση κειμένου

Ένα παράδειγμα πίνακα με 2 κελιά σε 3 σειρές είναι:

CAPTION
Header 1Header 2
Content 1 of row 2 Content 2 of row 2
Content 1 of row 3 Content 2 of row 3
Footer 1 of row 4 Footer 2 of row 4

Ας εφαρμόσουμε τους εξής κανόνες CSS :

<style>
  table, td, th {border:1px solid black; padding:15px}
  td {color:purple}
</style>

Δείτε το αποτέλεσμα:

Ας εφαρμόσουμε επιπλέον κανόνες CSS :

<style>
  table {width: 60%;}
  table, td, th {
    border-collapse: collapse;
    border:1px solid black;
    padding:15px;
    text-align: center;
    padding: 8px;
  }
  td {color:purple}
  th {
    background-color: blue;
    color: white;
  }
</style>

Δείτε το αποτέλεσμα:

Εφαρμογή κανόνων κλάσεων

Παρόμοια με κάθε στοιχείο HTML, μπορείτε να εφαρμόσετε τάξεις σε μια συγκεκριμένη ετικέτα ενός πίνακα.

Σκεφτείτε, πώς θα μπορούσατε να δημιουργήσετε τον πίνακα που εμφανίζεται στην εικόνα;

Class css

Κώδικας:

Περισσότερες πληροφορίες:  https://www.w3schools.com/css/css_table.asp

Δείτε τους Hoverable και Striped Tables. Έχουν πολύ ενδιαφέρον!

Άσκηση

Exercise

  1. Ανοίξτε το αρχείο exersice05.1.01.html στον φάκελο "Exercises" στον επεξεργαστή κώδικα.
  2. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Be careful!! This is a Hoverable Table

Λύση: