Eτικέτες για τους πίνακες HTML - ( Table Tags )

Οι τρεις σημαντικότερες Eτικέτες για τους πίνακες είναι η επιτραπέζια Eτικέτα ανοίγματος, table , καθώς κι οι Eτικέτες επιτραπέζιων στοιχείων - tr κι td αντίστοιχα.

Η ετικέτα tr αντιπροσωπεύει μια σειρά για τον πίνακα.

Η ετικέτα td αντιπροσωπεύει ένα κύτταρο (ή τη στήλη) μέσα στη σειρά.

Τώρα, με αυτά στο μυαλό, μπορείτε να δημιουργήσετε έναν απλό πίνακα: 


Αυτόν το πίνακα τον χρησιμοποιούμε όταν θέλουμε να βάλουμε σε κάθετη διάταξη στοιχεία.

Χωρίς περίγραμμα:

<table style="> <tr> <td>1η Γραμμή 1ο πεδίο</td> <td>1η Γραμμή 2ο πεδίο</td> <td>1η Γραμμή 3ο πεδίο</td> </tr> <tr> <td>2η Γραμμή 1ο πεδίο</td> <td>2η Γραμμή 2ο πεδίο</td> <td>2η Γραμμή 3ο πεδίο</td> </tr> </table>

Με περίγραμμα:

<table style="border: 2px #f00 solid;"> <tr> <td>1η Γραμμή 1ο πεδίο</td> <td>1η Γραμμή 2ο πεδίο</td> <td>1η Γραμμή 3ο πεδίο</td> </tr> <tr> <td>2η Γραμμή 1ο πεδίο</td> <td>2η Γραμμή 2ο πεδίο</td> <td>2η Γραμμή 3ο πεδίο</td> </tr> </table>

Μια άλλη τροποποίηση που μπορούμε να κάνουμε, είναι να ξεχωρίσουμε τα κελιά μεταξύ τους με κάποιο περίγραμμα ή με κάποιο χρώμμα όταν θέλουμε να επισημάνουμε κάτι σημαντικό.

Δείτε τα παρακάτω παραδείγματα:

<table style="border:2px #f00 solid;"> <tr> <td style="border:1px #56E4F3 solid;">1η Γραμμή 1ο πεδίο</td> <td style="border:1px #56E4F3 solid;">1η Γραμμή 2ο πεδίο</td> <td style="border:1px #56E4F3 solid;">1η Γραμμή 3ο πεδίο</td> </tr> <tr> <td style="border:1px #56E4F3 solid;">2η Γραμμή 1ο πεδίο</td> <td style="border:1px #56E4F3 solid;">2η Γραμμή 2ο πεδίο</td> <td style="border:1px #56E4F3 solid;">2η Γραμμή 3ο πεδίο</td> </tr> </table>

Εδώ έχουμε αυξήσει το μέγεθος της 1ης στήλης στο 50% του συνολικού μήκους του παραθύρου.

Αυτό μπορείτε να τ'αλλάξετε κατά τις ανάγκες σας.

<table style="border:2px #f00 solid;width:100%;"> <tr> <td style="border:1px #56E4F3 solid;width:50%;">1η Γραμμή 1ο πεδίο</td> <td style="border:1px #56E4F3 solid;">1η Γραμμή 2ο πεδίο</td> <td style="border:1px #56E4F3 solid;">1η Γραμμή 3ο πεδίο</td> </tr> <tr> <td style="border:1px #56E4F3 solid;">2η Γραμμή 1ο πεδίο</td> <td style="border:1px #56E4F3 solid;">2η Γραμμή 2ο πεδίο</td> <td style="border:1px #56E4F3 solid;">2η Γραμμή 3ο πεδίο</td> </tr> </table>

Και εδώ έχουμε δώσει χρώμμα στην πρώτη στήλη.

<table style="border:2px #f00 solid;width:100%;"> <tr> <td style="border:1px #56E4F3 solid;width:50%;background:#92ACB6;">1η Γραμμή 1ο πεδίο</td> <td style="border:1px #56E4F3 solid;">1η Γραμμή 2ο πεδίο</td> <td style="border:1px #56E4F3 solid;">1η Γραμμή 3ο πεδίο</td> </tr> <tr> <td style="border:1px #56E4F3 solid;background:#6BA7BD;">2η Γραμμή 1ο πεδίο</td> <td style="border:1px #56E4F3 solid;">2η Γραμμή 2ο πεδίο</td> <td style="border:1px #56E4F3 solid;">2η Γραμμή 3ο πεδίο</td> </tr> </table>

Ένα παράδειγμα πίνακα μπορείτε να δείτε εδώ!!!

Τώρα από δω & πέρα χρειάζεται ΤΟΛΜΗ & ΦΑΝΤΑΣΙΑ.

Εμείς ότι μπορούσαμε κάναμε....

Καλά & πετυχημένα πειράματα