3.8 Συγχώνευση και επέκταση κελίων σε πίνακες στην HTML

Στο HTML, μπορείτε να χρησιμοποιήσετε τις ιδιότητες colspan και rowspan για να συγχωνεύσετε και να επεκτείνετε κελιά σε πίνακες.

Η ιδιότητα colspan (column span) επιτρέπει τη συγχώνευση ενός κελιού μεγαλύτερης πλάτης από την προεπιλεγμένη επίπεδη διάταξη του πίνακα, ενώ η ιδιότητα rowspan (row span) επιτρέπει τη συγχώνευση ενός κελιού μεγαλύτερου ύψους από την προεπιλεγμένη επίπεδη διάταξη του πίνακα.

Ας δούμε ένα παράδειγμα για κάθε περίπτωση:

<table>
  <tr>
    <th>Όνομα</th>
    <th colspan="2">Στοιχεία Επικοινωνίας</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td rowspan="2">email@example.com</td>
    <td>123-456-7890</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>987-654-3210</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, ο πίνακας έχει 3 στήλες. Στην πρώτη γραμμή, το κελί “Όνομα” καταλαμβάνει μία στήλη. Το κελί “Στοιχεία Επικοινωνίας” έχει οριστεί με colspan="2", δηλώνοντας ότι θα επεκταθεί πάνω από 2 στήλες.

Το πρώτο κελί “Αλέξανδρος” καταλαμβάνει μία στήλη. Το δεύτερο κελί “email@example.com” έχει οριστεί με rowspan="2", δηλώνοντας ότι θα επεκταθεί πάνω από 2 γραμμές. Αυτό σημαίνει ότι το κελί αυτό θα καλύψει τόσες γραμμές όσες ορίζεται στο rowspan.

Το τρίτο κελί “123-456-7890” καταλαμβάνει μία στήλη. Το τέταρτο κελί “Μαρία” καταλαμβάνει μία στήλη, ενώ το πέμπτο κελί “987-654-3210” καταλαμβάνει μία στήλη.

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

[adinserter block=”2″]

Για να καταλαμβάνει ένα κελί περισσότερες από μία στήλες, χρησιμοποιήστε την ιδιότητα colspan:

<table>
  <tr>
    <th>Όνομα</th>
    <th colspan="2">Στοιχεία Επικοινωνίας</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td>Email</td>
    <td>Τηλέφωνο</td>
  </tr>
  <tr>
    <td>Μαρία</td>
    <td>Email</td>
    <td>Τηλέφωνο</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, το δεύτερο <th> στην πρώτη γραμμή ορίζεται με colspan="2", δηλώνοντας ότι θα καταλάβει δύο στήλες. Αυτό σημαίνει ότι η επικεφαλίδα “Στοιχεία Επικοινωνίας” θα επεκταθεί πάνω από δύο στήλες.

Οι υπόλοιπες γραμμές έχουν κανονικά κελιά και καταλαμβάνουν μία στήλη έκαστη.

Μπορείτε να προσαρμόσετε την τιμή του colspan ανάλογα με τον αριθμό των στηλών που θέλετε το κελί να καταλάβει.

Για να καταλαμβάνει ένα κελί περισσότερες από μία γραμμές, χρησιμοποιήστε την ιδιότητα rowspan:

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλικία</th>
  </tr>
  <tr>
    <td>Αλέξανδρος</td>
    <td rowspan="2">25</td>
  </tr>
  <tr>
    <td>Μαρία</td>
  </tr>
</table>

Στο παραπάνω παράδειγμα, το δεύτερο <td> στην πρώτη γραμμή ορίζεται με rowspan="2", δηλώνοντας ότι θα καταλάβει δύο γραμμές. Αυτό σημαίνει ότι το κελί με την ηλικία “25” θα επεκταθεί πάνω από δύο γραμμές.

Η πρώτη γραμμή έχει κανονικά κελιά με μία στήλη έκαστο.

Μπορείτε να προσαρμόσετε την τιμή του rowspan ανάλογα με τον αριθμό των γραμμών που θέλετε το κελί να καταλάβει.