Πίνακες. ιδιότητες ετικέτας <tr>

Transcript

1 Πίνακες ιδιότητες ετικέτας

2 Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)

3 Ιδιότητα align <table border=1> <tr align="right"> <td>πρώτο κελί πρώτης <td>δεύτερο κελί πρώτης <td>πρώτο κελί δεύτερης <td>δεύτερο κελί δεύτερης

4 Ιδιότητα bgcolor καθορίζει χρώμα φόντου για μια γραμμή του πίνακα π.χ. <tr bgcolor= blue > <tr bgcolor= #ff13c4 > <tr bgcolor= rgb(239,190,55) >

5 Ιδιότητα bgcolor <table border=1> <tr bgcolor= lightblue > <td>πρώτο κελί πρώτης <td>δεύτερο κελί πρώτης <td>πρώτο κελί δεύτερης <td>δεύτερο κελί δεύτερης

6 Ιδιότητα height καθορίζει το ύψος της γραμμής του πίνακα, σε pixel ή σε ποσοστό του ύψους του πίνακα π.χ. <tr height=300> <tr height=60%>

7 Ιδιότητα height <table border=1> <tr height= 100 > <td>πρώτο κελί πρώτης <td>δεύτερο κελί πρώτης <td>πρώτο κελί δεύτερης <td>δεύτερο κελί δεύτερης

8 Ιδιότητα valign στοιχίζει κατά την κατακόρυφη διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα στο πάνω μέρος του κελιού (top), στο μέσον του κελιού (middle), στο κάτω μέρος του κελιού (bottom), ή με τη γραμμή βάσης (baseline) Η ρύθμιση baseline συμπεριφέρεται παρόμοια με την bottom αλλά σε περίπτωση κειμένου διαφορετικού μεγέθους η baseline παρέχει καλύτερη στοίχιση

9 Ιδιότητα valign <table border=1> <tr height= 100 valign= top > <td>πρώτο κελί πρώτης <td>δεύτερο κελί πρώτης <td>πρώτο κελί δεύτερης <td>δεύτερο κελί δεύτερης

10 Πίνακες ιδιότητες ετικετών <td> και <th>

11 Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα του αντίστοιχου κελιού αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)

12 Ιδιότητα align <table border="4" width="400"> <tr height="100"> <td align="right">πρώτο κελί <br />πρώτης <td align="center">δεύτερο κελί <br />πρώτης <tr height="100"> <td>πρώτο κελί <br />δεύτερης <td>δεύτερο κελί <br />δεύτερης

13 Ιδιότητα valign στοιχίζει κατά την κατακόρυφη διεύθυνση τα περιεχόμενα ενός κελιού του πίνακα στο πάνω μέρος του κελιού (top), στο μέσον του κελιού (middle), στο κάτω μέρος του κελιού (bottom), ή με τη γραμμή βάσης (baseline) Η ρύθμιση baseline συμπεριφέρεται παρόμοια με την bottom αλλά σε περίπτωση κειμένου διαφορετικού μεγέθους η baseline παρέχει καλύτερη στοίχιση

14 Ιδιότητα valign <table border="4" width="400"> <tr height="100"> <td align="right">πρώτο κελί <br />πρώτης <td align="center">δεύτερο κελί <br />πρώτης <tr height="100"> <td valign= top >Πρώτο κελί <br />δεύτερης <td valign= bottom >Δεύτερο κελί <br />δεύτερης

15 Ιδιότητα bgcolor καθορίζει χρώμα φόντου για το αντίστοιχο κελί του πίνακα π.χ. <td bgcolor= blue > <td bgcolor= #ff13c4 > <td bgcolor= rgb(239,190,55) >

16 Ιδιότητα bgcolor <table border="4" width="400"> <tr height="100" align="center" valign="middle"> <td bgcolor="lightblue">πρώτο κελί <br />πρώτης <td bgcolor="#ff13c4">δεύτερο κελί <br />πρώτης <tr height="100" align="center" valign="middle"> <td bgcolor="rgb(239,190,55)">πρώτο κελί <br />δεύτερης <td>δεύτερο κελί <br />δεύτερης

17 Ιδιότητα background καθορίζει σαν φόντο του κελιού μια εικόνα π.χ. <td background = διαδρομή_και_όνομα_εικόνας.jpg

18 Ιδιότητα background <table border="4" width="400"> <tr height="100" align="center" valign="middle"> <td bgcolor="lightblue">πρώτο κελί <br />πρώτης <td bgcolor="#ff13c4">δεύτερο κελί <br />πρώτης <tr height="100" align="center" valign="middle"> <td bgcolor="rgb(239,190,55)">πρώτο κελί <br />δεύτερης <td background= pship.jpg >Δεύτερο κελί <br />δεύτερης

19 Ιδιότητα height καθορίζει το ύψος του αντίστοιχου κελιού του πίνακα, σε pixel ή σε ποσοστό του ύψους του πίνακα (η μεγαλύτερη τιμή καθορίζει και το ύψος όλης της γραμμής) π.χ. <td height=300> <td height=60%>

20 Ιδιότητα width καθορίζει το πλάτος του αντίστοιχου κελιού του πίνακα, σε pixel ή σε ποσοστό του πλάτους του πίνακα (η μεγαλύτερη τιμή καθορίζει και το πλάτος όλης της στήλης) π.χ. <td width=300> <td width=60%>

21 Ιδιότητα background <table border="4" width="400"> <tr align="center" valign="middle"> <td height= 100 bgcolor="lightblue">πρώτο κελί <br />πρώτης <td bgcolor="#ff13c4">δεύτερο κελί <br />πρώτης <tr align="center" valign="middle"> <td width= 70% bgcolor="rgb(239,190,55)">πρώτο κελί <br />δεύτερης <td background= pship.jpg >Δεύτερο κελί <br />δεύτερης

22 Ιδιότητα rowspan καθορίζει πόσες γραμμές θα καταλαμβάνει ένα κελί <table width=300 height=150 border=1> <th rowspan=2> ΓΡΑΜΜΕΣ</th> <td>κελί 1</td> <td>κελί 2</td> <td>κελί 3</td> <td>κελί 4</td>

23 Ιδιότητα colspan καθορίζει πόσες στήλες θα καταλαμβάνει ένα κελί <table width=300 height=150 border=1> <th colspan=2> ΣΤΗΛΕΣ</th> <td>κελί 1</td> <td>κελί 2</td> <td>κελί 3</td> <td>κελί 4</td>

24 παράδειγμα rowspan και colspan <table width=300 height=150 border=1> <th rowspan=3>γραμμεσ</th> <th colspan=2>στηλεσ</th> <td>κελί 1</td> <td>κελί 2</td> <td>κελί 3</td> <td>κελί 4</td>

25 παράδειγμα rowspan και colspan <table width=300 height=150 border=1> <td bgcolor= gray ></td> <th colspan=2>στηλεσ</th> <th rowspan=2>γραμμεσ</th> <td>κελί 1</td> <td>κελί 2</td> <td>κελί 3</td> <td>κελί 4</td>