Ένας πίνακας είναι ένα βασικό στοιχείο στην HTML για την εμφάνιση δεδομένων σε δομημένη μορφή με γραμμές και στήλες. Στην HTML, οι πίνακες δημιουργούνται χρησιμοποιώντας τις ετικέτες <table>, <tr> και <td>.
Η ετικέτα <table> αντιπροσωπεύει το κύριο κοντέινερ πίνακα, το οποίο περιέχει όλες τις σειρές και τις στήλες. Οι σειρές ορίζονται χρησιμοποιώντας την ετικέτα <tr>(σειρά πίνακα), ενώ τα κελιά εντός των σειρών ορίζονται χρησιμοποιώντας την ετικέτα <td>(δεδομένα πίνακα). Επιπλέον, μπορείτε να χρησιμοποιήσετε την ετικέτα <th>(κεφαλίδα πίνακα) για να ορίσετε κελιά κεφαλίδας για τον πίνακα.
Μπορείτε να χρησιμοποιήσετε χαρακτηριστικά όπως το colspan και το rowspan για να συγχωνεύσετε κελιά στον πίνακα ή να εκτείνετε τα κελιά σε πολλές σειρές και στήλες. Επιπλέον, μπορείτε να εφαρμόσετε ιδιότητες CSS για να προσαρμόσετε την εμφάνιση και τη διάταξη του πίνακα.
Πίνακας( <table>)
- Το <table> στοιχείο χρησιμοποιείται για τη δημιουργία πίνακα σε HTML.
- Τα δεδομένα τοποθετούνται σε γραμμές( <tr>) και στήλες( <td> ή <th>).
- Κάθε κελί δεδομένων τοποθετείται σε στοιχεία <td>(κελί δεδομένων) ή <th>(κελί κεφαλίδας).
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Κεφαλίδα στήλης( <th>)
- Το <th> στοιχείο χρησιμοποιείται για τη δημιουργία κεφαλίδων στηλών σε έναν πίνακα.
- Συνήθως τοποθετείται στην πρώτη σειρά του πίνακα.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Σειρές δεδομένων( <tr>):
- Το <tr> στοιχείο χρησιμοποιείται για τη δημιουργία σειρών δεδομένων σε έναν πίνακα.
- Τα κελιά δεδομένων( <td>) ή τα κελιά κεφαλίδας( <th>) τοποθετούνται σε αυτά τα <tr> στοιχεία.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Εκτεινόμενη στήλη( colspan)
Το colspan χαρακτηριστικό χρησιμοποιείται για τον προσδιορισμό του αριθμού των στηλών που θα εκτείνεται ένα κελί δεδομένων ή ένα κελί κεφαλίδας στον πίνακα.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Εκτεινόμενη σειρά( rowspan)
Το rowspan χαρακτηριστικό χρησιμοποιείται για τον προσδιορισμό του αριθμού των σειρών που θα εκτείνεται ένα κελί δεδομένων ή ένα κελί κεφαλίδας στον πίνακα.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Συγχώνευση κελιών( colspan και rowspan)
Μπορείτε να συνδυάσετε και τα δύο colspan και rowspan τα χαρακτηριστικά για να συγχωνεύσετε κελιά σε έναν πίνακα.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border ιδιοκτησία
- Η border ιδιότητα καθορίζει το πάχος του περιγράμματος του πίνακα.
- Η τιμή του border είναι ένας μη αρνητικός ακέραιος αριθμός.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding ιδιοκτησία
- ,Η cellpadding ιδιότητα καθορίζει την απόσταση μεταξύ του περιεχομένου κελιού και του περιγράμματος του κελιού στον πίνακα.
- Η τιμή του cellpadding είναι ένας μη αρνητικός ακέραιος αριθμός
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing ιδιοκτησία
- Η cellspacing ιδιότητα καθορίζει την απόσταση μεταξύ των κελιών στον πίνακα.
- Η τιμή του cellspacing είναι ένας μη αρνητικός ακέραιος αριθμός.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Αυτά τα χαρακτηριστικά και τα στοιχεία σάς επιτρέπουν να δημιουργείτε και να προσαρμόζετε πίνακες σε HTML σύμφωνα με τις ανάγκες σας. Μπορείτε να τα χρησιμοποιήσετε για να εμφανίσετε δεδομένα με σαφή και οργανωμένο τρόπο στον ιστότοπό σας.