CSS – Cascading Style Sheets (μορφοποίηση πινάκων)

Παρουσίαση με θέμα: "CSS – Cascading Style Sheets (μορφοποίηση πινάκων)"— Μεταγράφημα παρουσίασης:

1 CSS – Cascading Style Sheets (μορφοποίηση πινάκων)

2 CSS – Cascading Style Sheets (μορφοποίηση πινάκων – ιδιότητα border-style) Καθορίζει το στυλ του περιγράμματος Τιμές: solid dotted............. dashed- - - - - - - - - - - - double

3 CSS – Cascading Style Sheets (ιδιότητα border-style – Παράδειγμα) border-style:dotted solid double dashed; Πάνω πλευρά: dotted Δεξιά πλευρά: solid Κάτω πλευρά: double Αριστερή πλευρά: dashed border-style:dotted solid double; Πάνω πλευρά: dotted Δεξιά και αριστερή πλευρά: solid Κάτω πλευρά: double border-style:dotted solid; Πάνω και κάτω πλευρά: dotted Δεξιά και αριστερή πλευρά: solid border-style:dotted; Όλες οι πλευρές: dotted

4 CSS – Cascading Style Sheets (μορφοποίηση πινάκων – ιδιότητα border-width) Καθορίζει το πάχος του περιγράμματος Τιμές: thinλεπτό περίγραμμα mediumμεσαίο περίγραμμα thickπαχύ περίγραμμα τιμή σε pixel (π.χ. 10px)

5 CSS – Cascading Style Sheets (ιδιότητα border-width – Παράδειγμα) border-width:thin medium thick 10px; Επάνω πλευρά λεπτή: thin Δεξιά πλευρά μεσαίου πάχους: medium Κάτω πλευρά παχιά: thick Αριστερή πλευρά: 10px border-width:thin medium thick; Επάνω πλευρά λεπτή: thin Δεξιά και αριστερή πλευρά: medium Κάτω πλευρά παχιά: thick border-width:thin medium; Πάνω και κάτω πλευρά: thin Δεξιά και αριστερή πλευρά: medium border-width:thin; Όλες οι πλευρές: thin

6 CSS – Cascading Style Sheets (μορφοποίηση πινάκων – ιδιότητα border-color) Καθορίζει το χρώμα του περιγράμματος Τιμές: χρώμαπ.χ. red δεκαεξαδική τιμήπ.χ. #ffeeaa συνδυασμός rgbπ.χ. rgb(255,122,100)

7 CSS – Cascading Style Sheets (ιδιότητα border-color - Παράδειγμα) border-color: red green blue pink; Επάνω πλευρά κόκκινη Δεξιά πλευρά πράσινη Κάτω πλευρά μπλε Αριστερή πλευρά ροζ border-color: red green blue; Επάνω πλευρά κόκκινη Δεξιά και αριστερή πλευρά πράσινη Κάτω πλευρά μπλε border-color: red green; Πάνω και κάτω πλευρά: κόκκινη Δεξιά και αριστερή πλευρά: πράσινη border-color: red; Όλες οι πλευρές κόκκινες

8 CSS – Cascading Style Sheets (ιδιότητα border-collapse) Συμπτύσσει το εξωτερικό περίγραμμα του πίνακα και τα περιγράμματα των κελιών σε ένα Τιμές: collapse separate

9 CSS – Cascading Style Sheets (ιδιότητα border-collapse: παράδειγμα) table { width:200; height:300; border-collapse:collapse; } table, th, td { border-color: black; border-style: solid; }

10 CSS – Cascading Style Sheets (ιδιότητα border-spacing) Καθορίζει την απόσταση (σε px, cm κ.λπ.) μεταξύ των περιγραμμάτων των γειτονικών κελιών ενός πίνακα (εφόσον δεν έχουν συμπτυχθεί τα περιγράμματα με την ιδιότητα border-collapse: collapse;) Σύνταξη: border-spacing:οριζόντια_απόσταση κατακόρυφη_απόσταση border-spacing:απόσταση

11 CSS – Cascading Style Sheets (ιδιότητα border-spacing: παράδειγμα) table { border-spacing:30px 50px; } table, th, td { border-color: black; border-style: solid; }