Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:

HTML
DOWNLOAD

Μέγεθος: px

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

Download "Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:"

Άλκηστις Ζάππας
7 χρόνια πριν
Προβολές:

γραμμής</td><td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td><td>δεύτερο κελί δεύτερης γραμμής</td> 2. Αποθηκεύστε το αρχείο με όνομα ergasia11_1.

1 Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: <html> <head> <title>εισαγωγή εικόνων</title> </head> <body> </body> </html> <table> </table> <td>πρώτο κελί πρώτης γραμμής</td><td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td><td>δεύτερο κελί δεύτερης γραμμής</td> 2. Αποθηκεύστε το αρχείο με όνομα ergasia11_1.htm και ανοίξτε το στον Internet Explorer. Θα πρέπει να δείτε τον παρακάτω πίνακα: 3. Στην ετικέτα <table> προσθέστε την ιδιότητα border= 1. Αποθηκεύστε το αρχείο και πατήστε στο κουμπί Ανανέωση του φυλλομετρητή. Τι παρατηρείτε; (Γύρω από τον πίνακα και μεταξύ των κελιών θα πρέπει να εμφανιστεί περίγραμμα πάχους 1 pixel).

Πριν από την πρώτη ετικέτα και αμέσως μετά την ετικέτα <table> προσθέστε τον κώδικα <caption>λεζάντα πίνακα</caption> Τι παρατηρείτε; (Πάνω από

2 4. Πριν από την πρώτη ετικέτα και αμέσως μετά την ετικέτα <table> προσθέστε τον κώδικα <th>επικεφαλίδα 1</th> <th>επικεφαλίδα 2</th> Τι παρατηρείτε; (Θα πρέπει να εμφανιστεί μια γραμμή επικεφαλίδων με πιο έντονα γράμματα). 5. Πριν από την πρώτη ετικέτα και αμέσως μετά την ετικέτα <table> προσθέστε τον κώδικα <caption>λεζάντα πίνακα</caption> Τι παρατηρείτε; (Πάνω από τον πίνακα θα πρέπει να εμφανιστεί η λεζάντα που ορίσατε). 6. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: <html> <head> <title>εισαγωγή εικόνων</title> </head> <body> <table border= 1 align="right">

Τι παρατηρείτε; (Ο πίνακας εμφανίζεται στοιχισμένος δεξιά στην οθόνη). 8. Αλλάξτε την ιδιότητα align="right" σε align="center".

3 </body> </html> </table> <td>πρώτο κελί πρώτης γραμμής</td><td>δεύτερο κελί πρώτης γραμμής</td> <td>πρώτο κελί δεύτερης γραμμής</td><td>δεύτερο κελί δεύτερης γραμμής</td> 7. Αποθηκεύστε το αρχείο με όνομα ergasia11_2.htm και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ο πίνακας εμφανίζεται στοιχισμένος δεξιά στην οθόνη). 8. Αλλάξτε την ιδιότητα align="right" σε align="center". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ο πίνακας στοιχίζεται στο κέντρο της οθόνης). 9. Αλλάξτε την ιδιότητα align="center" σε align="left". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ο πίνακας στοιχίζεται αριστερά).

10. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα bgcolor="green".

Τι παρατηρείτε; (Ο πίνακας αποκτά πράσινο φόντο). 11.

jpg. Τι παρατηρείτε; (Ως φόντο του πίνακα εισάγεται η εικόνα pship.jpg). 12.

4 10. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα bgcolor="green". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ο πίνακας αποκτά πράσινο φόντο). 11. Στην ετικέτα <table> διαγράψτε την ιδιότητα bgcolor="green" και προσθέστε την ιδιότητα background= pship.jpg. Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ως φόντο του πίνακα εισάγεται η εικόνα pship.jpg). 12. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα cellpadding="10". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Το κείμενο των κελιών απομακρύνεται από το περίγραμμα κατά 10 pixel).

13. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα

14. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα width="65%".

5 13. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα cellspacing="10". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Τα κελιά απομακρύνονται μεταξύ τους κατά 10 pixel). 14. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα width="65%". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ο πίνακας καταλαμβάνει το 65% του πλάτους της οθόνης). 65% 100%

Τι παρατηρείτε; (Ο πίνακας καταλαμβάνει το 55% του ύψους της οθόνης). 55% 100% 16.

6 15. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα height="55%". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ο πίνακας καταλαμβάνει το 55% του ύψους της οθόνης). 55% 100% 16. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα frame="above". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Ο πίνακας έχει εξωτερικό περίγραμμα μόνο από την πάνω πλευρά).

Τι παρατηρείτε; (Τα εξωτερικά περιγράμματα εξαφανίζονται, και παραμένουν μόνο τα περιγράμματα των κελιών). 18.

7 17. Δοκιμάστε και τις άλλες τιμές της ιδιότητας frame. Στο τέλος, δώστε στην ιδιότητα frame την τιμή void (frame= void ). Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Τα εξωτερικά περιγράμματα εξαφανίζονται, και παραμένουν μόνο τα περιγράμματα των κελιών). 18. Μέσα στην ετικέτα <table> προσθέστε την ιδιότητα rules="rows". Αποθηκεύστε το αρχείο και ανοίξτε το στον Internet Explorer. Τι παρατηρείτε; (Γραμμές περιγράμματος εμφανίζονται μόνο ανάμεσα στις - δύο - γραμμές του πίνακα). 19. Δοκιμάστε και τις άλλες τιμές της ιδιότητας rules.

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

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

Πίνακες. ετικέτα <table> Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει