Html ile Web İşlemleri 18 - Rowspan ve Colspan Özellikleri
TABLO ETİKETİ ÖZELLİKLERİ
3. Rowspan ve Colspan Özellikleri
Web tablolarında satır ve sütunlar içinde birleştirme, ayırma vb. işlemleri uygulamak için özellikler vardır. Rowspan özelliği satırları birleştirmek için, colspan özelliği sütunları birleştirmek için kullanılır (Görsel 3.20).
<table border="1" cellpadding="5">
<tr>
<th rowspan="3"> .. </th>
<th colspan="2"> .. </th>
</tr>
<tr>
<td> .. </td>
<td> .. </td>
</tr>
<tr>
<td> .. </td>
<td> .. </td>
</tr>
</table>
<tr>
<th rowspan="3"> .. </th>
<th colspan="2"> .. </th>
</tr>
<tr>
<td> .. </td>
<td> .. </td>
</tr>
<tr>
<td> .. </td>
<td> .. </td>
</tr>
</table>
 |
| Görsel 3.20. Hücre birleştirme işlemleri |
Sıra Sizde
Aşağıdaki tabloyu <body> etiketi içine rowspan özelliğini kullanarak oluşturunuz ve tarayıcıda Görsel 3.21’deki gibi görüntüleyiniz.
<table border="1" cellpadding="5">
<tr>
<th> Hücre 1 </th>
<th rowspan="2"> Hücre 2</th>
<th> Hücre 3 </th>
</tr>
<tr>
<td> Hücre 4 </td>
<td> Hücre 5 </td>
</tr>
</table>
<tr>
<th> Hücre 1 </th>
<th rowspan="2"> Hücre 2</th>
<th> Hücre 3 </th>
</tr>
<tr>
<td> Hücre 4 </td>
<td> Hücre 5 </td>
</tr>
</table>
 |
| Görsel 3.21: rowspan kullanımı |
Sıra Sizde
Aşağıdaki tabloyu <body> etiketi içine colspan özelliğini kullanarak oluşturunuz ve tarayıcıda Görsel 3.22’deki gibi görüntüleyiniz.
<table border="1" cellpadding="5">
<tr>
<th> Hücre 1 </th>
<th colspan="2"> Hücre 2</th>
</tr>
<tr>
<td> Hücre 4 </td>
<td> Hücre 5 </td>
<td> Hücre 6 </td>
</tr>
</table>
<tr>
<th> Hücre 1 </th>
<th colspan="2"> Hücre 2</th>
</tr>
<tr>
<td> Hücre 4 </td>
<td> Hücre 5 </td>
<td> Hücre 6 </td>
</tr>
</table>
 |
| Görsel 3.22: colspan kullanımı |
Hiç yorum yok