Πίνακες στην HTML

• 15 Μαΐου 2012
• by: Georgios
• in: Web Development

Η HTML είναι αρκετά ευέλικτη και σας δίνει τη δυνατότητα να δημιουργήσετε δομές δεδομένων δύο διαστάσεων με την ετικέτα <table> που δημιουργεί πίνακες. Για παράδειγμα ένας πίνακας μπορεί να είναι οι βαθμοί ενός μαθητή χωρισμένοι σε εξάμηνα και σε μαθήματα.

Ένας πίνακας ορίζεται με την ετικέτα <table>. Ένας πίνακας είναι χωρισμένος σε γραμμές (με την ετικέτα <tr>), και κάθε γραμμή χωρίζεται σε κελιά (με την ετικέτα <td>). Το όνομα της ετικέτας td προκύπτει από το αγγλικό table data (δεδομένα πίνακα), και σε αυτή την ετικέτα εισάγουμε τα δεδομένα του πίνακα μας. Μέσα σε μία ετικέτα <td> μπορούμε να εισάγουμε όποια άλλη ετικέτα θέλουμε, όπως είναι για παράδειγμα η ετικέτα <a>, ή ετικέτα <img /> η ετικέτα <p> και άλλες.

Ακολουθεί ένα παράδειγμα πίνακα για να δείτε την δομή του πίνακα και πως αυτοί ορίζονται:

<table border=”1”>
<tr>
<td>Πρώτη Γραμμή, Πρώτο κελί</td>
<td>Πρώτη Γραμμή, Δεύτερο κελί</td>
</tr>
<tr>
<td>Δεύτερη Γραμμή, Πρώτο κελί</td>
<td>Δεύτερη Γραμμή, Δεύτερο κελί</td>
</tr>
</table>

Δείτε το παράδειγμα ζωντανά

Πίνακες στην HTML και η ιδιότητα border

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

Θα πρέπει να σημειωθεί πως η τιμή της ιδιότητας border είναι ένας ακέραιος αριθμός που ορίζει το πλάτος του περιγράμματος του πίνακα σε κουκκίδες.

Δείτε το παράδειγμα που ακολουθεί:

<table border=”5”>
<tr>
<td>Πρώτη Γραμμή, Πρώτο κελί</td>
<td>Πρώτη Γραμμή, Δεύτερο κελί</td>
</tr>
<tr>
<td>Δεύτερη Γραμμή, Πρώτο κελί</td>
<td>Δεύτερη Γραμμή, Δεύτερο κελί</td>
</tr>
</table>

Δείτε το παράδειγμα ζωντανά

Πίνακες στην HTML και επικεφαλίδες

Αν θέλετε να ορίσετε επικεφαλίδες για τις στήλες ενός πίνακα τότε μπορείτε αντί για την ετικέτα <td> να χρησιμοποιήσετε την ετικέτα <th>. Οι περισσότεροι σύγχρονοι περιηγητές διαδικτύου εμφανίζουν το περιεχόμενο της ετικέτας <th> με έντονα γράμματα (bold) και στοιχισμένα στο κέντρο. Το παράδειγμα που ακολουθεί δείχνει τον τρόπο χρήσης της ετικέτας <th> μέσα σε ένα πίνακα της HTML.

<table border=”1”>
<tr>
<th>Πρώτη επικεφαλίδα</th>
<th>Δεύτερη επικεφαλίδα</th>
</tr>
<tr>
<td>Πρώτη Γραμμή, Πρώτο κελί</td>
<td>Πρώτη Γραμμή, Δεύτερο κελί</td>
</tr>
<tr>
<td>Δεύτερη Γραμμή, Πρώτο κελί</td>
<td>Δεύτερη Γραμμή, Δεύτερο κελί</td>
</tr>
</table>

Δείτε το παράδειγμα ζωντανά

[COL size=”one_half”]« Εικόνες στην HTML[/COL] [COL size=’one_half’ last=’last’]

[/COL]