tables

english version

Η αρχική σελίδα

Η αρχή
Η συνέχεια

Εντολές HTML Νο.1
Εντολές HTML Νο.2
Εντολές HTML Νο.3
Κυλιόμενα γράμματα
Πίνακες
Παραπομπές
3D γράμματα
Κωδικοί χρωμάτων No.1
Κωδικοί χρωμάτων Νο.2
Ονομασίες χρωμάτων

Οι σφαίρες μου
Οι σπινθηροβόλες
εικόνες μου
Ταπετσαρίες
Οδηγίες 1
Οδηγίες 2

slideshow 1
slideshow 2

Σελίδες
που με βοήθησαν
και μου αρεσαν

Puzzle
Κρεμάλα
Ναυμαχία
Η προηγούμενη ζωή σου
Πόσο ταιριάζετε
Τεστ Προσωπικότητας

vani_R@pathfinder.gr

ΠΙΝΑΚΕΣ

. Η οδηγία <TABLE> χρησιμοποιείται για να δημιουργούμαι πίνακες αλλά και για να έχουμε μεγαλύτερο έλεγχο στο στήσιμο μιας σελίδας.
. Σε πολλές περιπτώσεις η χρήση πινάκων είναι πολύ πρακτική.
. Με τους πίνακες μπορούμε να "μαρκάρουμε" περιοχές στη σελίδα μας με τετράγωνα, και να τοποθετήσουμε μέσα οτιδήποτε θέλουμε.(κείμενο ή εικόνα)
. Με <TABLE> ορίζουμε την αρχή του πίνακα και με </TABLE> ορίζουμε το τέλος του.
. Κάθε πίνακας έχει τουλάχιστον μία στήλη και μία σειρά. Με <TR> </TR> ορίζουμε γραμμές και <TD> </TD> στήλες.

Τοποθετώντας τις κατάλληλες παραμέτρους ορίζουμε και:
1. Το πάχος του πλαισίου του πίνακα
2. Το χρώμα του πλαισίου του πίνακα
3. Το μέγεθος του πίνακα
2. Την θέση του πίνακα
3. Το χρώμα της του φόντου του πίνακα

Το πλαίσιο του πίνακα ορίζετε με BORDER.

Καθορίζει αν ο πίνακας θα έχει περιθώρια ή όχι (συνήθως πίνακες χωρίς περιθώρια δημιουργούμε όταν θέλουμε να δημιουργήσουμε ένα συγκεκριμένο στήσιμο σελίδας).

Αν δεν θέλουμε ο πίνακάς μας να έχει πλαίσιο γράφουμε <TABLE BORDER="0"> ή απλώς αγνοούμε την εντολή BORDER

ΠΑΡΑΔΕΙΓΜΑ 1

Καλημέρα

<TABLE BORDER="4" WIDTH="150" HEIGHT="80"> <TR> <TD> <P ALIGN="CENTER"> <FONT COLOR="RED"> Καλημέρα </FONT> </P> </TD> </TR> </TABLE>
Πίνακας με πάχος πλαισίου 4

ΠΑΡΑΔΕΙΓΜΑ 2

Καλημέρα

<TABLE BORDER="0" WIDTH="150" HEIGHT="80"> <TR> <TD> <P ALIGN="CENTER"> <FONT COLOR="RED"> Καλημέρα </FONT> </P> </TD> </TR> </TABLE>
Ορίζοντας ως πάχος πλαισίου το 0, αυτό δεν φαίνεται καθόλου.

Για το χρώμα του πλαισίου : BORDERCOLOR.

ΠΑΡΑΔΕΙΓΜΑ

Καλημέρα

<TABLE BORDER="4" BORDERCOLOR="BLACK" WIDTH="100" HEIGHT="50"> <TR> <TD> <P ALIGN="CENTER"> <FONT COLOR="lime"> Καλημέρα </FONT> </P> </TD> </TR> </TABLE>
Πίνακας με πάχος πλαισίου 4 και χρώμα πλαισίου μαύρο.

Το μέγεθος του πίνακα ορίζετε με WIDTH και HEIGHT.

Μπορούμε να χρησιμοποιήσουμε μέγεθος σε pixels η σε % επί του μεγέθους του παραθύρου του browser.

Την θέση του κειμένου ή της εικόνας μέσα στον πίνακα την ορίζουμε με <P ALIGN="CENTER"> ή <P ALIGN="RIGHT"> ή <P ALIGN="LEFT">

ΠΑΡΑΔΕΙΓΜΑ 1

Καλημέρα

<TABLE WIDTH="150" HEIGHT="80"> <TR> <TD> <P ALIGN="CENTER"> Καλημέρα </P> </TD> </TR> </TABLE>
Πίνακας με διάμετρο 150 pixels και ύψος 80 pixels. Και την λέξη καλημέρα στην μέση του πίνακα.

ΠΑΡΑΔΕΙΓΜΑ 2

Καλημέρα

<TABLΕ WIDTH="70%" HEIGHT="50"> <TR> <TD> <P ALIGN="CENTER"> Καλημέρα </P> </TD> </TR> </TABLE>
Πίνακας με διάμετρο 50% του μεγέθους της καθορισμένης περιοχής (όπως θα δούμε παρακάτω, μπορούμε να τοποθετήσουμε πίνακα μέσα σε πίνακα) η του παραθύρου μας, και ύψος 30 pixels. Και την λέξη καλημέρα στην μέση του πίνακα.

Η θέση του πίνακα ορίζετε με ALIGN

ΠΑΡΑΔΕΙΓΜΑ

Καλημέρα

<TABLE ALIGN="CENTER"> <TR> <TD> <P ALIGN="CENTER"> <FONT COLOR="RED"> Καλημέρα </FONT> </P> </TD> </TR> </TABLE>
Πίνακας τοποθετημένος στο κέντρο της σελίδας μας. Και την λέξη καλημέρα στην μέση του πίνακα γραμμένη με κόκκινο.

Για το χρώμα του φόντου του πίνακα: BGCOLOR

ΠΑΡΑΔΕΙΓΜΑ

Καλημέρα

<TABLE BGCOLOR="lime" WIDTH="130" HEIGHT="100"> <TR> <TD> <P ALIGN="CENTER"> <FONT COLOR="red"> Καλημέρα </FONT> </P> </TD> </TR> </TABLE>
Πίνακας με χρώμα φόντου LIME και μέγεθος 130*100. Το κείμενο είναι σε κόκκινο χρώμα.

Για φόντο του πίνακα μπορούμε να βάλουμε και μία εικόνα: BODY BACKGROUND

ΠΑΡΑΔΕΙΓΜΑ

Καλημέρα

<TABLE WIDTH="130" HEIGHT="100" BODY BACKGROUND="http://briefcase.pathfinder.gr/download/vani_R/10651/121215/1/Image2.jpg"> <TR> <TD> <P ALIGN="CENTER"> <FONT COLOR="red"> Καλημέρα </FONT> </P> </TD> </TR> </TABLE>
Πίνακας με φόντου μία εικόνα και μέγεθος 130*100. Το κείμενο είναι σε κόκκινο χρώμα.

Ας δούμε τώρα πίνακες με περισσότερες σειρές και στήλες

. Υπενθυμίζω οτι με <TR> </TR> ορίζουμε γραμμές και <TD> </TD> στήλες.

ΠΑΡΑΔΕΙΓΜΑ 1

Ονομα	Επίθετο
Μαρία	Παπαδοπούλου

<TABLE BORDER="1" WIDTH="60%">
<TR>
<TD WIDTH="50%" ALIGN="center"> Ονομα </TD>
<TD WIDTH="50%" ALIGN="center"> Επίθετο </TD>
</TR>
<TR>
<TD WIDTH="50%" ALIGN="center"> Μαρία </TD>
<TD WIDTH="50%" ALIGN="center"> Παπαδοπούλου </TD>
</TR>
</TABLE>

Πίνακας με 2 σειρές και 2 στήλες. Αυτός ο πίνακας καταλαμβάνει το 60% τις σελίδας και η κάθε στήλη του καταλαμβάνει το 50% του πίνακα.

ΠΑΡΑΔΕΙΓΜΑ 1

Ονομα	Επίθετο	Ηλικία
Μαρία	Παπαδοπούλου	25
Ιωάννης	Δημόπουλος	33

<TABLE BORDER="1" WIDTH="80%">
<TR>
<TD WIDTH="25%" ALIGN="center"> Ονομα </TD>
<TD WIDTH="50%" ALIGN="center"> Επίθετο </TD>
<TD WIDTH="25%" ALIGN="center"> Ηλικία </TD>
</TR>
<TR>
<TD WIDTH="25%" ALIGN="center"> Μαρία </TD>
<TD WIDTH="50%" ALIGN="center"> Παπαδοπούλου </TD>
<TD WIDTH="25%" ALIGN="center"> 25 </TD>
</TR>
<TR>
<TD WIDTH="25%" ALIGN="center"> Ιωάννης </TD>
<TD WIDTH="50%" ALIGN="center"> Δημόπουλος </TD>
<TD WIDTH="25%" ALIGN="center"> 33 </TD>
</TR>
</TABLE>

Πίνακας με 3 σειρές και 3 στήλες. Αυτός ο πίνακας καταλαμβάνει το 80% τις σελίδας. Η πρώτη στήλη του καταλαμβάνει το 25% του πίνακα, η δεύτερη το 50% και η τρίτη το 25% του πίνακα.

ΠΙΝΑΚΑΣ ΜΕΣΑ ΣΕ ΠΙΝΑΚΑ

Εδώ βλέπουμε 4 πίνακες ο ένας μέσα στον άλλον με διαφορετικό φόντο για να έχουμε αυτό το οπτικό αποτέλεσμα. Οι πρώτοι 3 πίνακες έχουν για φόντο μια εικόνα και ο τελευταίος χρώμα. Φυσικά μπορούμε σε όλους τους πίνακες να χρησιμοποιήσουμε για φόντο χρώμα ή εικόνα. Το ύψος και το πλάτος του κάθε πίνακα είναι 400 pixels. Με την τιμή που βάζουμε στο CELLSPACING ορίζουμε την επιφάνεια που θέλουμε να βλέπουμε από κάθε πίνακα σε pixels.