Πίνακες. ετικέτα <table>

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Πίνακες. ετικέτα <table>"

Ἐμμανουήλ Γερμανού
6 χρόνια πριν
Προβολές:

1 Πίνακες ετικέτα <table>

2 σύνταξη <table border=1> <td>κελί 1</td> <td>κελί 2</td> <td>κελί 3</td> <td>κελί 4</td> </table> <table> </table>: πίνακας : γραμμή <td> </td>: κελί

3 Ιδιότητα border border : ορίζει περίγραμμα γύρω από τον πίνακα, σε pixel π.χ <table border= 5 > <table border= 0 > (χωρίς περίγραμμα)

4 Επικεφαλίδες πίνακα ετικέτα <th> <table border=1> <th>επικεφαλίδα 1</th> <th>επικεφαλίδα 2</th> <td>κελί 1</td> <td>κελί 2</td> <td>κελί 3</td> <td>κελί 4</td> </table> <table> </table>: πίνακας : γραμμή <th> </th>: κελί επικεφαλίδας <td> </td>: κελί

5 Λεζάντα πίνακα ετικέτα <caption> <table border=1> <caption>λεζάντα πίνακα</caption> <th>επικεφαλίδα 1</th> <th>επικεφαλίδα 2</th> <td>κελί 1</td> <td>κελί 2</td> <td>κελί 3</td> <td>κελί 4</td> </table> <table> </table>: πίνακας <caption> </caption> : γραμμή <th> </th>: κελί επικεφαλίδας <td> </td>: κελί

6 Ιδιότητες πινάκων ιδιότητες ετικέτας <table>

7 Ιδιότητα border ορίζει περίγραμμα γύρω από τον πίνακα, σε pixel π.χ <table border= 5 > <table border= 0 > (χωρίς περίγραμμα)

8 Ιδιότητα border <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=5> <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

9 Ιδιότητα align στοιχίζει τον πίνακα αριστερά (left), δεξιά (right) ή στο κέντρο (center)

10 Ιδιότητα align <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=5 align= right > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

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

12 Ιδιότητα bgcolor <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=5 bgcolor= lightblue > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

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

14 Ιδιότητα background <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=5 background= pship.jpg > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

15 Ιδιότητα cellpadding καθορίζει την απόσταση του περιεχομένου από το περίγραμμα του κελιού, σε pixel π.χ. <table cellpadding = 10 >

16 Ιδιότητα cellpadding <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=5 cellpadding= 20 > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

17 Ιδιότητα cellspacing καθορίζει την απόσταση μεταξύ των κελιών του πίνακα, σε pixel π.χ. <table cellspacing = 10 >

18 Ιδιότητα cellspacing <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=5 cellpadding= 20 cellspacing= 20 > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

19 Ιδιότητα width καθορίζει το πλάτος του πίνακα, σε pixel ή σε ποσοστό του πλάτους της οθόνης π.χ. <table width=300> <table width=60%>

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

21 Ιδιότητες width και height <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=1 width= 200 height= 60% > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

22 Ιδιότητα frame (σε συνδυασμό με τη border για το πάχος του περιγράμματος) καθορίζει ποια τμήματα του εξωτερικού περιγράμματος του πίνακα θα είναι ορατά Τιμή void above below hsides vsides lhs rhs box border Ορατό Κανένα εξωτερικό περίγραμμα δεν είναι ορατό Πάνω πλευρά του εξωτερικού περιγράμματος Κάτω πλευρά του εξωτερικού περιγράμματος Πάνω και κάτω πλευρά του εξωτερικού περιγράμματος Αριστερή και δεξιά πλευρά εξωτερικού περιγράμματος Αριστερή πλευρά του εξωτερικού περιβάλλοντος Δεξιά πλευρά του εξωτερικού περιβάλλοντος Και οι τέσσερις πλευρές του εξωτερικού περιγράμματος Και οι τέσσερις πλευρές του εξωτερικού περιγράμματος

23 Ιδιότητα frame <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=1 frame= void > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

24 Ιδιότητα rules (σε συνδυασμό με τη border για το πάχος του περιγράμματος) καθορίζει ποια τμήματα των εσωτερικών περιγραμμάτων (των κελιών) θα είναι ορατά Τιμή none groups rows cols all Ορατό Κανένα εσωτερικό περίγραμμα Γραμμές μεταξύ ομάδων στηλών και ομάδων γραμμών Γραμμές περιγράμματος μεταξύ γραμμών πίνακα Γραμμές περιγράμματος μεταξύ στηλών πίνακα Όλες οι εσωτερικές γραμμές περιγράμματος

25 Ιδιότητα rules <html> <head> <title>πίνακες (βασικές ιδιότητες 1)</title> </head> <body> <table border=1 rules= none > <td>πρώτο κελί πρώτης γραμμής</td <td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td> <td>δεύτερο κελί δεύτερης γραμμής</td> </table> </body> </html>

Σχετικά έγγραφα

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

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