Νέες Τεχνολογίες στην Εκπαίδευση

Transcript

1 Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πίνακες Στεφανέας Πέτρος Ζαμαρίας Βασίλης

2 Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.

3 Βασικά στοιχεία της HTML > Πίνακες (1/4) Οι βασικοί κωδικοί για τη δημιουργία ενός πίνακα είναι: <TABLE> που δηλώνει την αρχή ενός πίνακα, <TR> για την έναρξη μιας γραμμής και <TD> για την έναρξη ενός κελιού. Ο κωδικός<th> υποδηλώνει επίσης την έναρξη ενός κελιού αλλά το περιεχόμενο είναι γραμμένο με έντονα γράμματα και κεντραρισμένο, οπότε συνήθως χρησιμοποιείται για κελιάεπικεφαλίδες. Φυσικά, χρησιμοποιούμε όλους τους αντίστοιχους κωδικούς λήξης: </TABLE>, </TR>, </TD>, </TH>. 1

4 Βασικά στοιχεία της HTML > Πίνακες (2/4) Ας προχωρήσουμε μ' ένα απλό παράδειγμα. Ο παρακάτω κώδικας: <TABLE>...<---Αρχή πίνακα <TR>...<---Αρχή γραμμής <TH>Συγγραφέας</TH> <TH>Τίτλος</TH><TH>Είδος</TH>..<---Κελιά επικεφαλίδας </TR>...<---Τέλος γραμμής <TR>...<---Αρχή γραμμής <TD>Δεδομένα Κελιών</TD>...<---Κελί με δεδομένα </TR> </TABLE>..<--- Τέλος γραμμής και τέλος πίνακα 2

5 Βασικά στοιχεία της HTML > Πίνακες (3/4) Αφού εισάγουμε τα δεδομένα στα κελιά: <TABLE> <TR> <TD>Πρατολίνι Β.</TD><TD>Το Χρονικό των Φτωχών Εραστών</TD><TD> </TD></TR> <TR> <TD>Πρατολίνι Β.</TD><TD>Οικογενειακό Χρονικό</TD><TD>Διήγημα</TD></TR> <TR> <TD>Μπελλ Χ.</TD><TD>Οι Απόψεις ενός Κλόουν</TD><TD></TD></TR> <TR><TD>Μπελλ Χ.</TD><TD>Το Τρένο Έρχεται Πάντοτε στην Ώρα του</td><td></td></tr> </TABLE> 3

6 Βασικά στοιχεία της HTML > Πίνακες (4/4) θα πάρουμε τον ακόλουθο πίνακα: Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Το Χρονικό των Φτωχών Εραστών Πρατολίνι Β. Οικογενειακό Χρονικό Διήγημα Μπελλ Χ. Οι Απόψεις ενός Κλόουν Μπελλ Χ. Το Τρένο Έρχεται Πάντοτε στην Ώρα του 4

7 Περιγράμματα (1/5) Μπορούμε να προσθέσουμε το όρισμα BORDER="..." στον κωδικό TABLE για να βάλουμε περιθώριο στον πίνακα και να ξεχωρίσουμε τα κελιά. Γράφοντας λοιπόν στον προηγούμενο κώδικα<table BORDER="10">, ο πίνακας γίνεται: Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Το Χρονικό των Φτωχών Εραστών Πρατολίνι Β. Οικογενειακό Χρονικό Διήγημα Μπελλ Χ. Οι Απόψεις ενός Κλόουν Μπελλ Χ. Το Τρένο Έρχεται Πάντοτε στην Ώρα του 5

8 Περιγράμματα (2/5) Ο έλεγχος των περιγραμμάτων του πίνακα και των κελιών μπορεί να γίνει πολύ λεπτομερής. Με τα ορίσματα του κωδικού TABLE: FRAME="..." και RULES="..." έχουμε τη δυνατότητα μεγάλης επιλογής περιγραμμάτων. Στον παρακάτω πίνακα βλέπουμε τις τιμές που μπορούν να πάρουν τα δύο ορίσματα με τις επεξηγήσεις τους. 6

9 Περιγράμματα (3/5) ΤΙΜΕΣ ΓΙΑ ΤΟ ΟΡΙΣΜΑ FRAME void Χωρίς εξωτερικά περιγράμματα above Ένα περίγραμμα επάνω από τον πίνακα below Ένα περίγραμμα κάτω από τον πίνακα rhs Ένα περίγραμμα στη δεξιά πλευρά lhs Ένα περίγραμμα στην αριστερή πλευρά hsides Ένα περίγραμμα επάνω και κάτω από τον πίνακα vsides Ένα περίγραμμα αριστερά και δεξιά από τον πίνακα border Όλα τα εξωτερικά περιγράμματα 7

10 Περιγράμματα (4/5) ΤΙΜΕΣ ΓΙΑ ΤΟ ΟΡΙΣΜΑ RULES none Χωρίς εσωτερικά περιγράμματα cols Περιγράμματα μεταξύ στηλών rows Περιγράμματα μεταξύ γραμμών groups Περιγράμματα μεταξύ ομάδων στηλών και ομάδων γραμμών all Όλα τα εσωτερικά περιγράμματα 8

11 Περιγράμματα (5/5) Οπότε, γράφοντας <TABLE FRAME="hsides"> στον προηγούμενο πίνακά μας θα πάρουμε: Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Το Χρονικό των Φτωχών Εραστών Πρατολίνι Β. Οικογενειακό Χρονικό Διήγημα Μπελλ Χ. Οι Απόψεις ενός Κλόουν Μπελλ Χ. Το Τρένο Έρχεται Πάντοτε στην Ώρα του 9

12 Μέγεθος πίνακα (1/2) Το μέγεθος ενός πίνακα μπορεί να καθοριστεί από τα ορίσματα WIDTH="..." και HEIGHT="..." του κωδικού TABLE. Οι... αντιστοιχούν στο μέγεθος σε εικονοστοιχεία ή σε ποσοστό του παραθύρου του αναγνώστη ιστοσελίδων. Τα δύο αυτά ορίσματα μπορούν να χρησιμοποιηθούν και στους κωδικούς κελιών, δηλ. <TD> και <TH> (το ποσοστό αναφέρεται τώρα στον πίνακα). Τα υπόλοιπα κελιά της γραμμής και της στήλης προσαρμόζονται κατάλληλα. 10

13 Μέγεθος πίνακα (2/2) Αν τα μεγέθη που δίνουμε είναι μικρότερα από τα αναγκαία για το περιεχόμενο του κελιού, ο αναγνώστης ιστοσελίδων θα μειώσει το κελί όσο του επιτρέπει το περιεχόμενο. 11

14 Συγχώνευση κελιών (1/5) Πολλές φορές χρειαζόμαστε να συγχωνεύσουμε κελιά ενός πίνακα. Αυτό επιτυγχάνεται με τη χρήση του ορίσματος COLSPAN="..." και ROWSPAN="..." στους κωδικούς των κελιών <TH> και <TD>. Οι... αντιστοιχούν στον αριθμό των στηλών ή στον αριθμό των γραμμών αντίστοιχα που θέλουμε να καλύψει το συγκεκριμένο κελί. Τονίζουμε ότι μπορούμε να χρησιμοποιήσουμε και τα δύο ορίσματα για το ίδιο κελί. 12

15 Συγχώνευση κελιών (2/5) Για παράδειγμα μπορούμε να τροποποιήσουμε τον κώδικα για τον πίνακα μας: <TABLE BORDER="5"> <TR><TH COLSPAN="3">ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ</TH>...<---Νέο κελί που καλύπτει 3 στήλες</tr> <TR><TH>Συγγραφέας</TH><TH>Τίτλος</TH><TH>Είδος</TH></TR> <TR><TD ROWSPAN="2">Πρατολίνι Β.</TD>...<---Κελί που καλύπτει 2 γραμμές <TD>Το Χρονικό των Φτωχών Εραστών</TD><TD></TD></TR> <TR><TD>Οικογενειακό Χρονικό</TD><TD>Διήγημα</TD></TR> <TR><TD ROWSPAN="2">Μπελλ Χ.</TD>...<---Κελί που καλύπτει 2 γραμμές <TD>Οι Απόψεις ενός Κλόουν </TD><TD></TD></TR> <TR><TD>Το Τρένο Έρχεται Πάντοτε στην Ώρα του </TD><TD></TD></TR> </TABLE> 13

16 Συγχώνευση κελιών (5/5) και να πάρουμε την παρακάτω μορφή: ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Το Χρονικό των Φτωχών Εραστών Πρατολίνι Β. Οικογενειακό Χρονικό Διήγημα Οι Απόψεις ενός Κλόουν Μπελλ Χ. Το Τρένο Έρχεται Πάντοτε στην Ώρα του 14

17 Απόσταση και αναπλήρωση κελιών (1/6) Άλλος ένας έλεγχος μορφοποίησης ενός πίνακα είναι ο καθορισμός της απόστασης μεταξύ των κελιών καθώς και του καθορισμού του χώρου γύρω από το περιεχόμενο ενός κελιού. Ο έλεγχος αυτός γίνεται με τα ορίσματα CELLSPACING="..." και CELLPADDING="..." του κωδικού TABLE. Οι... αντιστοιχούν σε εικονοστοιχεία. 15

18 Απόσταση και αναπλήρωση κελιών (2/6) Αλλάζοντας, για παράδειγμα, την πρώτη εντολή του κώδικα του πίνακά μας: <TABLE BORDER="5" CELLSPACING="7"> θα δώσει: ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Μπελλ Χ. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Οι Απόψεις ενός Κλόουν Διήγημα Το Τρένο Έρχεται Πάντοτε στην Ώρα του 16

19 Απόσταση και αναπλήρωση κελιών (3/6) ενώ αν γράψουμε: <TABLE BORDER="5" CELLSPACING="7" CELLPADDING= "8"> θα δώσει: ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Μπελλ Χ. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Οι Απόψεις ενός Κλόουν Το Τρένο Έρχεται Πάντοτε στην Ώρα του Διήγημα 17

20 Απόσταση και αναπλήρωση κελιών (4/6) Τα ορίσματα CELLSPACING και CELLPADDING λειτουργούν βέβαια και χωρίς περιθώρια (δηλ. χωρίς το όρισμα BORDER ή BORDER="0"). Αν θέλουμε να περιεχόμενα των κελιών ενός πίνακα να μην ξεχωρίζουν καθόλου (π.χ. αν έχουμε εικόνες σε κάθε κελί και θέλουμε να φαίνονται συνεχόμενες) μπορούμε ακριβώς να μηδενίσουμε όλα τα ορίσματα: BORDER="0" CELLSPACING="0" CELLPADDING="0". 18

21 Απόσταση και αναπλήρωση κελιών (5/6) Έτσι, ο παρακάτω κώδικας: <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD><img src="fig4.jpg" WIDTH="300"></TD> <TD><img src="fig3.jpg" WIDTH="300"></TD> </TR> </TABLE> 19

22 Απόσταση και αναπλήρωση κελιών (6/6) θα δώσει: 20

23 Ορισμός ομάδων στηλών και γραμμών (1/12) Είναι πολύ χρήσιμο να δημιουργούμε ομάδες στηλών και γραμμών σ' ένα πίνακα με κύριο σκοπό την εύκολη μορφοποίηση του περιεχομένου τους ή ακόμα για τον καθορισμό περιγραμμάτων. Μπορούμε να δημιουργήσουμε δύο ειδών ομάδες στηλών. 21

24 Ορισμός ομάδων στηλών και γραμμών (2/12) Με τον κωδικό: <COLGROUP><COL SPAN="..."></COLGROUP> δημιουργούμε δομημένες ομάδες στηλών, ενώ με τον κωδικό: <COL><COL SPAN="..."></COL> δημιουργούμε μη δομημένες ομάδων στηλών. 22

25 Ορισμός ομάδων στηλών και γραμμών (3/12) Οι... δηλώνουν τον αριθμό των στηλών που περιλαμβάνει η ομάδα. Η δημιουργία ομάδων γραμμών μπορεί να γίνει με τη χρήση των κωδικών<thead> για επικεφαλίδες (μπορεί να εμφανίζεται μόνο μια φορά σε κάθε πίνακα), <TBODY> για ομάδες γραμμών στον κυρίως πίνακα και <TFOOT> για δημιουργία γραμμής υποσέλιδου σ' ένα πίνακα ή συνοπτικά δεδομένα (μια φορά μπορεί να εμφανίζεται σε κάθε πίνακα). 23

26 Ορισμός ομάδων στηλών και γραμμών (4/12) Δεν είναι υποχρεωτική η ταυτόχρονη χρήση και των τριών κωδικών σε κάθε πίνακα. Ποια είναι η χρησιμότητα αυτής της δυνατότητας ορισμού των ομάδων; Μια πρώτη είναι η γρήγορη μορφοποίηση του περιεχομένου των κελιών ενός πίνακα. 24

27 Ορισμός ομάδων στηλών και γραμμών (5/12) Με τη χρήση του ορίσματος <ALIGN="..."> στον κωδικό του κελιού <TD> μπορούμε να αλλάξουμε τη στοίχιση βάζοντας ως τιμή του ορίσματος τις <RIGHT>, <LEFT> και <CENTER>. Αλλά μπορούμε να αποφύγουμε να το κάνουμε σε κάθε κελί μιας και το όρισμα αυτό μπορεί να χρησιμοποιηθεί και στους κωδικούς ομάδων στηλών και γραμμών. 25

28 Ορισμός ομάδων στηλών και γραμμών (6/12) Για παράδειγμα, μπορούμε να ξαναγράψουμε το γνωστό μας πίνακα με τα βιβλία όπου ορίζουμε τρεις ομάδες στηλών (κάθε στήλη μια ομάδα) και ορίζουμε κεντραρισμένη στοίχιση για τη δεύτερη στήλη (τους τίτλους των βιβλίων). 26

29 Ορισμός ομάδων στηλών και γραμμών (7/12) Έτσι, μετά τον κωδικό <TABLE> μπορούμε να προσθέσουμε τις γραμμές: <COLGROUP><COL SPAN="1"></COLGROUP> <COLGROUP><COL SPAN="1" ALIGN="CENTER"></COLGROUP> <COLGROUP><COL SPAN="1"></COLGROUP> 27

30 Ορισμός ομάδων στηλών και γραμμών (8/12) και θα πάρουμε: ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Μπελλ Χ. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Οι Απόψεις ενός Κλόουν Το Τρένο Έρχεται Πάντοτε στην Ώρα του Διήγημα 28

31 Ορισμός ομάδων στηλών και γραμμών (9/12) Επίσης, μπορούμε να χρησιμοποιήσουμε τον ορισμό των ομάδων για επιλεκτικά περιγράμματα. Το όρισμα <RULES="groups"> ακριβώς βάζει περιγράμματα γύρω από της δομημένες στήλες και τις γραμμές. Οπότε, αν θέλουμε να μην υπάρχει περίγραμμα ανάμεσα στις γραμμές που αντιστοιχούν στον ίδιο συγγραφέα, μπορούμε να γράψουμε τον παρακάτω κώδικα: 29

32 Ορισμός ομάδων στηλών και γραμμών (10/12) <TABLE BORDER="5" CELLSPACING="7" CELLPADDING="8" RULES="groups">...<---Το όρισμα RULES <COLGROUP><COL SPAN="1"></COLGROUP> <COLGROUP><COL SPAN="1" ALIGN="center"></COLGROUP> <COLGROUP><COL SPAN="1"></COLGROUP> <THEAD ALIGN="left">...<---Ορισμός γραμμής με στοίχιση <TR><TH COLSPAN="3">ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ</TH></TR> </THEAD>...<---Τέλος ορισμού γραμμής <TR><TH>Συγγραφέας</TH><TH>Τίτλος</TH><TH>Είδος</TH></TR> 30

33 Ορισμός ομάδων στηλών και γραμμών (11/12) <TBODY>...<---Ορισμός ομάδας γραμμών <TR><TD ROWSPAN="2"> Πρατολίνι Β. </TD><TD>Το Χρονικό των Φτωχών Εραστών</TD> <TD></TD> </TR> <TR><TD>Οικογενειακό Χρονικό</TD><TD>Διήγημα</TD></TR> </TBODY>...<---Τέλος ορισμού ομάδας γραμμών <TBODY>...<---Ορισμός ομάδας γραμμών <TR><TD ROWSPAN="2">Μπελλ Χ.</TD><TD>Οι Απόψεις ενός Κλόουν </TD><TD></TD></TR> <TR><TD>Το Τρένο Έρχεται Πάντοτε στην Ώρα του</td><td></td></tr> </TBODY>...<---Τέλος ορισμού ομάδας γραμμών </TABLE> 31

34 Ορισμός ομάδων στηλών και γραμμών (12/12) όπου αλλάξαμε και τη στοίχιση του πρώτου κελιού, θα πάρουμε τον ακόλουθο πίνακα: ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Μπελλ Χ. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Οι Απόψεις ενός Κλόουν Το Τρένο Έρχεται Πάντοτε στην Ώρα του Διήγημα 32

35 Εικόνα και χρώμα φόντου (1/4) Ο κωδικός TABLE παίρνει ως ορίσματα και τα BGCOLOR="..." για χρώμα φόντου (οι... αντιστοιχούν στην δεκαεξαδική τιμή ενός χρώματος) και το όρισμα BACKGROUND="..." για εικόνα φόντου (οι... αντιστοιχούν στο αρχείο που περιέχει την εικόνα). Θα πρέπει να σημειώσουμε ότι τα δύο αυτά ορίσματα μπορούν να προστεθούν στους κωδικούς για κελιά ή ομάδες γραμμών ή ομάδες στηλών. Τέλος υπάρχει και το όρισμα BORDERCOLOR="..." στον κωδικό TABLE που καθορίζει το χρώμα του περιγράμματος. 33

36 Εικόνα και χρώμα φόντου (2/4) Ο παρακάτω κώδικας: <TABLE BORDER="5" CELLSPACING="0" CELLPADDING="8" RULES="groups" bgcolor="#808000" bordercolor="#806000">.<---καθορισμός χρωμάτων φόντου και περιθωρίων <COLGROUP><COL SPAN="1"></COLGROUP> <COLGROUP><COL SPAN="1" ALIGN="center"></COLGROUP> <COLGROUP><COL SPAN="1"></COLGROUP> <THEAD ALIGN="left"> <TR><TH COLSPAN="3">ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ</TH></TR> </THEAD> <TR><TH>Συγγραφέας</TH><TH>Τίτλος</TH><TH>Είδος</TH></TR> 34

37 Εικόνα και χρώμα φόντου (3/4) <TBODY> <TR><TD ROWSPAN="2" bgcolor="#809000">πρατολίνι Β.</TD><---Καθορισμός χρώματος κελιού <TD>Το Χρονικό των Φτωχών Εραστών</TD><TD></TD></TR> <TR><TD>Οικογενειακό Χρονικό</TD><TD>Διήγημα</TD></TR> </TBODY> </TBODY> <TR><TD ROWSPAN="2" bgcolor="#807000">μπελλ Χ.</TD>...<---Καθορισμός χρώματος κελιού <TD>Οι Απόψεις ενός Κλόουν </TD><TD></TD></TR> <TR><TD>Το Τρένο Έρχεται Πάντοτε στην Ώρα του</td><td></td></tr> </TBODY> </TABLE> θα δώσει: 35

38 Εικόνα και χρώμα φόντου (4/4) ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Διήγημα Μπελλ Χ. Οι Απόψεις ενός Κλόουν Το Τρένο Έρχεται Πάντοτε στην Ώρα του Προσέξτε πώς ο καθορισμός χρώματος φόντου σ' ένα κελί επικαλύπτει το χρώμα φόντου που ορίστηκε στον κωδικό TABLE. 36

39 Λεζάντα πίνακα (1/2) Αν θέλουμε να προσθέσουμε λεζάντα στον πίνακα χρησιμοποιούμε τον κωδικό <CAPTION> (και</caption>) αμέσως μετά τον κωδικό <TABLE>. Η λεζάντα, εξ ορισμού είναι κεντραρισμένη και στο επάνω μέρος του πίνακα. Αν θέλουμε η λεζάντα να μπει στο κάτω μέρος του πίνακα, τότε χρησιμοποιούμε το όρισμα ALIGN: <CAPTION ALIGN="BOTTOM"> 37

40 Λεζάντα πίνακα (1/2) ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Μπελλ Χ. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Οι Απόψεις ενός Κλόουν Το Τρένο Έρχεται Πάντοτε στην Ώρα του ΠΙΝΑΚΑΣ Ι Διήγημα 38

41 Μη αναδίπλωση κειμένου σε κελί (1/4) Τελειώνουμε με τρία ακόμα χρήσιμα σημεία. Εξ' ορισμού οι αναγνώστες ιστοσελίδων αναδιπλώνουν το κείμενο ενός κελιού για να προσαρμοστούν στο μέγεθος που ορίζουμε. Ο παρακάτω πίνακας έχει στον κωδικό TABLE το όρισμα WIDTH="40%": 39

42 Μη αναδίπλωση κειμένου σε κελί (2/4) ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Οι Απόψεις ενός Κλόουν Διήγημα Μπελλ Χ. Το Τρένο Έρχεται Πάντοτε στην Ώρα του ΠΙΝΑΚΑΣ Ι 40

43 Μη αναδίπλωση κειμένου σε κελί (3/4) Αν, παρ' όλα αυτά θέλουμε να μην αναδιπλώνεται το κείμενο ενός κελιού, προσθέτουμε το όρισμα NOWRAP στον κωδικό του κελιού: <TD NOWRAP>Το Χρονικό των Φτωχών Εραστών</TD> Βέβαια το κείμενο στα άλλα κελιά προσαρμόζεται στο νέο μέγεθος του κελιού που ζητήσαμε τη μη αναδίπλωση. 41

44 Μη αναδίπλωση κειμένου σε κελί (4/4) ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Πρατολίνι Β. Μπελλ Χ. Το Χρονικό των Φτωχών Εραστών Οικογενειακό Χρονικό Οι Απόψεις ενός Κλόουν Το Τρένο Έρχεται Πάντοτε στην Ώρα του ΠΙΝΑΚΑΣ Ι Διήγημα 42

45 Αναδίπλωση κειμένου γύρω από πίνακα (1/2) Το άλλο θέμα είναι η αναδίπλωση κειμένου γύρω από πίνακα. Αυτό επιτυγχάνεται με το όρισμα ALIGN="..." στον κωδικό ΤABLE. Η τιμή του ορίσματος είναι LEFT ή RIGHT τοποθετώντας τον πίνακα στην αντίστοιχη θέση. Αν θέλετε ένα τμήμα μόνο του κειμένου να βρίσκεται δίπλα στον πίνακα, χρησιμοποιήστε την εντολή <BR CLEAR="..."> όπου πάλι οι... αντιστοιχούν στη τιμή LEFT ή RIGHT: 43

46 Αναδίπλωση κειμένου γύρω από πίνακα (2/2) ΕΝΔΙΑΦΕΡΟΝΤΑ ΒΙΒΛΙΑ Συγγραφέας Τίτλος Είδος Το Χρονικό των Φτωχών Εραστών Πρατολίνι Β. Οικογενειακό Χρονικό Διήγημα Ο Βάσκο Πρατολίνι θεωρείται από τους μεγαλύτερους Ιταλούς λογοτέχνες του 20ου αιώνα. Γεννήθηκε το 1913 στη Φλωρεντία. Στο έργο του Πρατολίνι πρωταγωνιστεί η σχέση ανάμεσα στην ιδεολογία και την πραγματικότητα με το διπλό κίνδυνο πάντοτε, η πρώτη να περιοριστεί σε απλουστευτικό σχήμα, κι η δεύτερη σε χάος. Ο Χάϊνρεχ Μπελλ Οι Απόψεις ενός Κλόουν Μπελλ Χ. Το Τρένο Έρχεται Πάντοτε στην Ώρα του ΠΙΝΑΚΑΣ Ι 44

47 Άσκηση 5: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζονται στον αναγνώστη ιστοσελίδων οι παρακάτω πίνακες: 45

48 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.