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

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

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

Πώς να το χρησιμοποιήσετε: προσθέτουμε αυτό το χαρακτηριστικό σε οποιοδήποτε κελί td ή th. Αν, για παράδειγμα, ορίσετε το rowspan στην τιμή 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 σε δύο σειρές, ορίζοντας του το χαρακτηριστικό rowspan με τιμή 2. Θα δούμε ότι εκτοπίζει τα κελιά από τη σειρά από κάτω του και ο πίνακας καταρρέει:

<table>
	<tr>
		<td rowspan="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;
}

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

Για να διορθώσουμε το πρόβλημα της κατάρρευσης του πίνακα από το προηγούμενο παράδειγμα, ας δοκιμάσουμε να διαγράψουμε ένα από τα κελιά από τη δεύτερη σειρά (και αυτό δεν είναι απαραίτητα το κελί 4, που βρίσκεται ακριβώς κάτω από το κελί μας 1, μπορείτε να διαγράψετε οποιοδήποτε, εμείς θα διαγράψουμε το κελί με αριθμό 5):

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

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

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

Εδώ ας επεκτείνουμε το κελί μας όχι σε δύο σειρές, αλλά σε 3, ορίζοντας του rowspan με τιμή 3. Σε αυτή την περίπτωση διαγράψτε ένα από τα κελιά από την τρίτη σειρά (κελί 7, 8 ή 9 - δεν έχει σημασία), ώστε ο πίνακας να μην καταρρεύσει:

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

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

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

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

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

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

Δείτε επίσης

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