Το χαρακτηριστικό colspan

Το χαρακτηριστικό colspan ελέγχει τη συγχώνευση στηλών ενός πίνακα HTML. Εφαρμόζεται στις ετικέτες th και td.

Αποδεκτή τιμή: ακέραιος αριθμός ξεκινώντας από 1.

Πώς να το χρησιμοποιήσετε: προσθέτουμε αυτό το χαρακτηριστικό σε οποιοδήποτε κελί td ή th. Αν, για παράδειγμα, ορίσετε το colspan στην τιμή 2 - τότε το κελί στο οποίο ορίστηκε, θα καταλάβει δύο στήλες του πίνακα. Σε αυτή την περίπτωση, τα γειτονικά κελιά στα δεξιά δεν θα εξαφανιστούν, αλλά το διευρυμένο μας κελί θα τα εκτοπίσει και ο πίνακας θα "καταρρεύσει". Για να μην συμβεί αυτό, πρέπει να διαγραφεί ένα από τα κελιά στα δεξιά. Δείτε τα παραδείγματα για καλύτερη κατανόηση.

Παράδειγμα . Πίνακας χωρίς συγχωνεύσεις

Ας δούμε έναν πίνακα χωρίς συγχωνεύσεις, με τον οποίο θα δουλέψουμε στη συνέχεια:

<table>
	<tr>
		<td>κελί1</td>
		<td>κελί2</td>
		<td>κελί3</td>
	</tr>
	<tr>
		<td>κελί4</td>
		<td>κελί5</td>
		<td>κελί6</td>
	</tr>
	<tr>
		<td>κελί7</td>
		<td>κελί8</td>
		<td>κελί9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Παράδειγμα . Ας επεκτείνουμε ένα κελί σε δύο στήλες

Ας προσπαθήσουμε να επεκτείνουμε το κελί 1 σε δύο στήλες, ορίζοντας του το χαρακτηριστικό colspan στην τιμή 2. Σε αυτή την περίπτωση, θα εκτοπίσει τα κελιά στα δεξιά και ο πίνακας θα καταρρεύσει:

<table>
	<tr>
		<td colspan="2">κελί1</td>
		<td>κελί2</td>
		<td>κελί3</td>
	</tr>
	<tr>
		<td>κελί4</td>
		<td>κελί5</td>
		<td>κελί6</td>
	</tr>
	<tr>
		<td>κελί7</td>
		<td>κελί8</td>
		<td>κελί9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Παράδειγμα . Επεκτείνουμε ένα κελί χωρίς να καταρρεύσει ο πίνακας

Ας τώρα προσπαθήσουμε να διορθώσουμε το πρόβλημα της κατάρρευσης του πίνακα από το προηγούμενο παράδειγμα, διαγράφοντας ένα από τα κελιά στα δεξιά του δικού μας (αυτό είναι το κελί 2 ή 3 - δεν έχει σημασία):

<table>
	<tr>
		<td colspan="2">κελί1</td>
		<td>κελί2</td>
	</tr>
	<tr>
		<td>κελί4</td>
		<td>κελί5</td>
		<td>κελί6</td>
	</tr>
	<tr>
		<td>κελί7</td>
		<td>κελί8</td>
		<td>κελί9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Παράδειγμα . Επεκτείνουμε ένα κελί σε τρεις στήλες

Ας επεκτείνουμε το κελί 1 σε 3 στήλες και ας του ορίσουμε το χαρακτηριστικό colspan στην τιμή 3. Σε αυτή την περίπτωση, θα διαγράψουμε ακόμα ένα κελί στα δεξιά, ώστε ο πίνακας να μην καταρρεύσει:

<table>
	<tr>
		<td colspan="3">κελί1</td>
	</tr>
	<tr>
		<td>κελί4</td>
		<td>κελί5</td>
		<td>κελί6</td>
	</tr>
	<tr>
		<td>κελί7</td>
		<td>κελί8</td>
		<td>κελί9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Παράδειγμα . Ταυτόχρονα colspan και rowspan

Ας προσπαθήσουμε να ενώσουμε τα κελιά με αριθμό 4, 5, 7 και 8, χρησιμοποιώντας τα χαρακτηριστικά colspan και rowspan (θα αφαιρέσουμε τις προηγούμενες συγχωνεύσεις από τον πίνακα):

<table>
	<tr>
		<td colspan="3">κελί1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">κελί4</td>
		<td>κελί6</td>
	</tr>
	<tr>
		<td>κελί9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Δείτε επίσης

το χαρακτηριστικό rowspan,
που συγχωνεύει σειρές του πίνακα