HTML TABLO SATIR SÜTUN BİRLEŞTİRME (COLSPAN-ROWSPAN)

Tablolardaki hücreler , tasarım gereği yatayda (yan yana) , dikeyde (alt alta) yada her iki yönde birleştirilebilir. Bunun için iki parametre kullanılır.

COLSPAN : sütun birleştirme
ROWSPAN : satır birleştirme

COLSPAN (SÜTUN BİRLEŞTİRME)

Tablodaki hücrelerin yanyan birleştirilmesi için colspan kullanılır. Kaç hücre birleştirelecekse colspan değeri olarak yazılır. Örneğin 2 hücre birleşecekse, birleşimin ilk hücresine colspan="2" yazılır. Bu durumda diğer hücre (<td>) silinmelidir. Aslında colspan bir hücrenin yatayda kaç hücrelik yer tutacağını belirtir.

Örneğin öncelikle aşağıdaki gibi bir tablomuz olsun..

	<table border="1" width="50%" align="center" cellspacing="0" bordercolor="orange">  

	    <!-- 1. SATIR -->
		<tr align="center">  		 
            <td>1</td> 
            <td>2</td> 
            <td>3</td> 
		</tr>
		
		<!-- 2. SATIR -->
		<tr align="center">  
		     <td>4</td> 
             <td>5</td> 
             <td>6</td>
		</tr>
		
		<!-- 3. SATIR -->
		<tr align="center">  
		     <td>7</td> 
             <td>8</td> 
             <td>9</td>
		</tr> 

	</table>

1 VE 2 NUMARALI HÜCRELERİ BİRLEŞTİRELİM

Tablo üzerinde 1. satırın 1. ve 2. sütununu birleştirmek için , birleşimin başlayacağı hücrede yani 1. satırın 1. sütununda colspan="2" ekleyip , 2. sütunu silmeliyiz.

 	     <!-- 1. SATIR -->
		<tr align="center">  		 
            <td colspan="2">1</td> 
            <!-- 2. sütun silindi!-->
            <td>3</td> 
		</tr>

Ekran Görüntüsü

1. satırın ilk 2 sütunu birleşmiş oldu. Tablonun 1. hücresi 2 hücrelik yer kapladı.

7 , 8 ve 9 NUMARALI HÜCRELERİ BİRLEŞTİRELİM

Tablo üzerinde 3. satırın 1. ve 2. ve 3. sütununu birleştirmek için (7,8 ve 9. hücre) birleşimin başlayacağı hücrede yani 3. satırın 1. sütununda colspan="2" ekleyip , 2. ve 3. sütunu silmeliyiz.

 	     <!-- 3. SATIR -->
		<tr align="center">  		 
            <td colspan="3">7</td> 
            <!-- 2. sütun (8. hücre)  silindi!-->
            <!-- 3. sütun  (9. hücre)  silindi!-->
		</tr>

Ekran Görüntüsü

Son satırın tüm sütunları birleşmiş oldu. Tablonun 7. hücresi 3 hücrelik yer kapladı.

ROWSPAN (SATIR BİRLEŞTİRME)

Tablodaki hücrelerin altalta birleştirilmesi için rowspan kullanılır. Kaç hücre alt alta birleştirelecekse rowspan değeri olarak yazılır. Örneğin 2 hücre birleşecekse, birleşimin ilk hücresine rowspan="2" yazılır. Bu durumda alt satırdaki diğer hücre (<td>) silinmelidir. Aslında rowspan bir hücrenin dilkeyde (alt alta) kaç hücrelik yer tutacağını belirtir.

Örneğin öncelikle yine aşağıdaki gibi bir tablomuz olsun..

	<table border="1" width="50%" align="center" cellspacing="0" bordercolor="orange">  

	    <!-- 1. SATIR -->
		<tr align="center">  		 
            <td>1</td> 
            <td>2</td> 
            <td>3</td> 
		</tr>
		
		<!-- 2. SATIR -->
		<tr align="center">  
		     <td>4</td> 
             <td>5</td> 
             <td>6</td>
		</tr>
		
		<!-- 3. SATIR -->
		<tr align="center">  
		     <td>7</td> 
             <td>8</td> 
             <td>9</td>
		</tr> 

	</table>

1 VE 4 NUMARALI HÜCRELERİ BİRLEŞTİRELİM

Tablo üzerinde 1. satırın 1. sütunu (1.hücre) ve 2. satırın 1. sütununu (4.hücre) birleştirmek için , birleşimin başlayacağı hücrede yani 1. satırın 1. sütununda rowspan="2" ekleyip , 4. hücreyi silmeliyiz.

	    <!-- 1. SATIR -->
		<tr align="center">  		 
            <td rowspan="2">1</td> 
            <td>2</td> 
            <td>3</td> 
		</tr>
		
		<!-- 2. SATIR -->
		<tr align="center">  
		     <!-- 1. sütun silindi -->
             <td>5</td> 
             <td>6</td>
		</tr>

Ekran Görüntüsü

1. ve 2. satırların ilk sütunları birleşmiş oldu ( 1 ve 4.hücre) . Tablonun 1. hücresi alt alta 2 hücrelik yer kapladı.

3 , 6 ve 9 NUMARALI HÜCRELERİ BİRLEŞTİRELİM

Tablo üzerinde tüm satırların 3. sütunlarını (3. , 6. , 9. hücreler) birleştirmek için , birleşimin başlayacağı hücrede yani 1. satırın 3. sütununda rowspan="3" ekleyip , 6 ve 9 numaralı hücreleri silmeliyiz.

	<table border="1" width="50%" align="center" cellspacing="0" bordercolor="orange">  

	    <!-- 1. SATIR -->
		<tr align="center">  		 
            <td>1</td> 
            <td>2</td> 
            <td rowspan="3">3</td> 
		</tr>
		
		<!-- 2. SATIR -->
		<tr align="center">  
		     <td>4</td> 
             <td>5</td> 
            <!-- 6. hücre silindi -->
		</tr>
		
		<!-- 3. SATIR -->
		<tr align="center">  
		     <td>7</td> 
             <td>8</td> 
              <!-- 9. hücre silindi -->
		</tr> 

	</table>

Ekran Görüntüsü

Tüm satırların son sütunları birleşmiş oldu ( 3.6 ve 9. hücre) . Tablonun 3. hücresi alt alta 3 hücrelik yer kapladı.

COLSPAN + ROWSPAN (HEM SATIR HEM SÜTUN BİRLEŞTİRME)

Tablodaki hücrelerin altalta ve yanyana beraber birleştirilmesi için rowspan ve colspan beraber kullanılır. Kaç hücre alt alta birleştirilecekse rowspan değeri olarak , kaç hücre yanyana birleşecekse de colspan değeri olarak yazılır. yazılır. Örneğin alt alta 2 , yanyana 2 hücre birleşecekse, birleşimin ilk hücresine rowspan="2" ve colspan="2" yazılır. Bu durumda diğer hücreler (<td>) silinmelidir.

4 , 5, 7 ve 8 NUMARALI HÜCRELERİ BİRLEŞTİRELİM

Birleşimin ilk hücresi 4 nolu hücre yani 2. satırın ilk sütunu olur. Dolayısı ile bu hücreye rowspan="2" ve colspan="2" değerlerini verip, 5,7 ve 8. hücreleri sileceğiz.

	<table border="1" width="50%" align="center" cellspacing="0" bordercolor="orange">  

	    <!-- 1. SATIR -->
		<tr align="center">  		 
            <td>1</td> 
            <td>2</td> 
            <td>3</td> 
		</tr>
		
		<!-- 2. SATIR -->
		<tr align="center">  
		     <td>4</td>  
             <!-- 5. hücre silindi -->
             <td>6</td> 
		</tr>
		
		<!-- 3. SATIR -->
		<tr align="center">  
		    <!-- 7. hücre silindi -->
            <!-- 8. hücre silindi -->
            <td>9</td> 
		</tr> 

	</table>