Next

Ιδιότητες 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>

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

Next