Πίνακες HTML

Μπορείτε να δημιουργήσετε πίνακες με HTML.

Παράδειγμα

Ταμπέλα
Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε πίνακες σε έγγραφα HTML.
Πλαίσιο πίνακα
Αυτό το παράδειγμα δείχνει διάφορους τύπους πλαίσια πινάκων.

（Περισσότερες παραδείγματα μπορείτε να βρείτε στο τέλος της σελίδας。)

Ταμπέλα

Ο πίνακας ορίζεται από την ετικέτα <table>. Κάθε πίνακας έχει αρκετές γραμμές (ορίζονται από την ετικέτα <tr>), κάθε γραμμή που διαιρείται σε αρκετά κελιά (ορίζονται από την ετικέτα <td>). Το γράμμα td σημαίνει τα δεδομένα του πίνακα (table data), δηλαδή το περιεχόμενο των κελιών. Τα δεδομένα των κελιών μπορούν να περιέχουν κείμενο, εικόνες, λίστες, παραγράφους, φόρμες, οριζόντιες γραμμές, πίνακες κ.λπ.

<table border="1">
<tr>
<td>γραμμή 1, κελί 1</td>
<td>γραμμή 1, κελί 2</td>
</tr>
<tr>
<td>γραμμή 2, κελί 1</td>
<td>γραμμή 2, κελί 2</td>
</tr>
</table>

Εμφανίζεται στον περιηγητή ως εξής:

γραμμή 1, κελί 1 γραμμή 1, κελί 2
γραμμή 2, κελί 1 γραμμή 2, κελί 2

Πίνακες και ιδιότητες πλαίσιο

Αν δεν ορίσετε την ιδιότητα του πλαίσιο, ο πίνακας δεν θα εμφανιστεί το πλαίσιο. Συχνά αυτό είναι χρήσιμο, αλλά στις περισσότερες περιπτώσεις, θέλουμε να εμφανίσουμε το πλαίσιο.

Χρησιμοποιήστε την ιδιότητα της ορίστηκε το πλαίσιο για να εμφανίσετε έναν πίνακα με πλαίσιο:

<table border="1">
<tr>
<td>Γραμμή 1, κελί 1</td>
<td>Γραμμή 1, κελί 2</td>
</tr>
</table>

Οι κεφαλίδες του πίνακα

Οι κεφαλίδες του πίνακα ορίζονται από την ετικέτα <th>.

Οι περισσότεροι περιηγητές θα εμφανίσουν τις κεφαλίδες του πίνακα ως粗体居中的文本

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>γραμμή 1, κελί 1</td>
<td>γραμμή 1, κελί 2</td>
</tr>
<tr>
<td>γραμμή 2, κελί 1</td>
<td>γραμμή 2, κελί 2</td>
</tr>
</table>

Εμφανίζεται στον περιηγητή ως εξής:

Heading Another Heading
γραμμή 1, κελί 1 γραμμή 1, κελί 2
γραμμή 2, κελί 1 γραμμή 2, κελί 2

Κελιά κενά της πίνακα

Σε μερικούς περιηγητές, τα κελιά χωρίς περιεχόμενο εμφανίζονται κακή. Αν ένα κελί είναι κενό (χωρίς περιεχόμενο), ο περιηγητής μπορεί να μην εμφανίσει το πλαίσιο του κελιού.

<table border="1">
<tr>
<td>γραμμή 1, κελί 1</td>
<td>γραμμή 1, κελί 2</td>
</tr>
<tr>
<td></td>
<td>γραμμή 2, κελί 2</td>
</tr>
</table>

Ο περιηγητής μπορεί να εμφανίζεται ως εξής:

Κελιά κενά της πίνακα

Σημείωση:Αυτό το κενό κελί δεν εμφανίζεται το πλαίσιο. Για να αποφύγουμε αυτή την κατάσταση, προσθέστε έναν κενό κεντητήρα στο κενό κελί, ώστε να εμφανιστεί το πλαίσιο.

<table border="1">
<tr>
<td>γραμμή 1, κελί 1</td>
<td>γραμμή 1, κελί 2</td>
</tr>
<tr>
<td> </td>
<td>γραμμή 2, κελί 2</td>
</tr>
</table>

Εμφανίζεται στον περιηγητή ως εξής:

γραμμή 1, κελί 1 γραμμή 1, κελί 2
　 γραμμή 2, κελί 2

Περισσότερες παραδείγματα

Πίνακας χωρίς πλαίσιο
Τράπεζα χωρίς πλαίσιο
Αυτό το παράδειγμα δείχνει μια τράπεζα χωρίς πλαίσιο.
Κεφαλίδα της τράπεζας στην τράπεζα
Αυτό το παράδειγμα δείχνει πώς να εμφανίσετε την κεφαλίδα της τράπεζας.
Κενά κελιά
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιείτε το " " για να χειριστείτε κελιά χωρίς περιεχόμενο.
Τράπεζα με τίτλο
Αυτό το παράδειγμα δείχνει μια τράπεζα με τίτλο (caption).
Κελιά που διατρέχουν γραμμές ή στήλες
Αυτό το παράδειγμα δείχνει πώς να ορίσετε κελιά που διατρέχουν γραμμές ή στήλες.
Ετικέτες μέσα στην τράπεζα
Προσθήκη στοιχείων μέσα σε διαφορετικά στοιχεία
Πλαίσιο κελιών(Cell padding)
Χρήση του Cell padding για να δημιουργήσετε κενό μεταξύ του περιεχομένου του κελιού και του πλαισίου του.
Διαστημομετρία κελιών(Cell spacing)
Χρήση του Cell spacing για να αυξήσετε τη απόσταση μεταξύ των κελιών.
Προσθήκη χρώματος ή εικόνας φόντου σε τράπεζα
Προσθήκη χρώματος ή εικόνας φόντου σε τράπεζα
Προσθήκη χρώματος ή εικόνας φόντου σε κελί της τράπεζας
Τακτοποίηση περιεχομένου σε κελί της τράπεζας
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιείτε την ιδιότητα "align" για να τακτοποιήσετε το περιεχόμενο των κελιών, ώστε να δημιουργήσετε μια όμορφη τράπεζα.
Ιδιότητα πλαίσιο(frame)
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιείτε την ιδιότητα "frame" για να ελέγξετε τα πλαίσια γύρω από την τράπεζα.

Ετικέτες ταμπέλας

Ταμπέλα Περιγραφή
<table> Ορισμός τράπεζας.
<caption> Ορισμός τίτλου της τράπεζας.
<th> Ορισμός κεφαλίδας της τράπεζας.
<tr> Ορισμός γραμμής της τράπεζας.
<td> Ορισμός κελί της τράπεζας.
<thead> Ορισμός κεφαλίδας της τράπεζας.
<tbody> Ορισμός σώματος της τράπεζας.
<tfoot> Ορισμός πίσω από την τаблицή.
<col> Ορισμός ιδιοτήτων για τη στήλη της τаблицής.
<colgroup> Ορισμός ομάδας στη στήλη της τаблицής.