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

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

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

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

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

Ας εφαρμόσουμε τους εξής κανόνες 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>

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