- Html' de tablo oluştururken yatayda hücre birleştirilirken, <td> etiketinde "colspan" parametresini kullanılır.
- ...<td colspan="birleştirilecek hücre sayısı">.....</td>....
- Her satırda aynı hücre sayısı kontrolü yapılırken birleştirilen hücre sayısı da yappılmalıdır.Aşağıdaki örnekte ilk satırda <tr><td colspan="2">A</td></tr> olduğu için tek <td> içerisinde iki hücre kullanılmıştır. Birleştirme yapılmayan satırlarda yine iki <td> kullanılmıştır.
- Aşağıdaki örnekte hizalama yapmak için align parametresi kullanılmıştır.
align:Hizalama için kullanılır, "center(ortala), left(sola yasla), right(sağa yasla)" değerlerini alabilir.
- Tablo boyutunu ayarlamak için,
width:Genişlik ayarı için kullanılır, piksel ve % olarak değer alabilir.
Örnek:
 |
| Tablo Yatayda Hücre Birleşme Örneği |
Kodlar:
| <html>
|
| <head>
|
| </head>
|
| <body>
|
| |
| <table align="center" border="1" cellpadding="10" width="50%" height="50%">
|
| <tr>
|
| <td align="center" colspan="2">A</td>
|
| </tr>
|
| <tr>
|
| <td align="center">C</td>
|
| <td align="center">D</td>
|
| </tr>
|
| <tr>
|
| <td align="center">E</td>
|
| <td align="center">F</td>
|
| </tr>
|
| </table>
|
| |
| </body>
|
| </html>
- Tablo oluştururken dikeyde birleştirme yapacaksak <td> etiketinde "rowspan" parametresi kullanılır.
- ...<td rowspan="birleştirilecek hücre sayısı">.....</td>....
Hücre sayımızın karışmaması için, dikeyde birleştirme yaptığımızda, alt satırdaki hücre ve ya hücreler oluşturulmuş olduğundan tekrar oluşturulmaz.
Örnek:
 |
| Tablo Dikeyde Hücre Birleştirme Örneği |
| <html>
|
| <head>
|
| </head>
|
| <body>
|
| |
| <table align="center" border="1" width="20%" height="20%">
|
| <tr>
|
| <td align="center" rowspan="2" colspan="2"></td>
|
| <td align="center" colspan="3">browser</td>
|
| </tr>
|
| <tr>
|
| <td align="center" >netscape</td>
|
| <td align="center" >internet</td>
|
| <td align="center" >mozilla</td>
|
| </tr>
|
| <tr>
|
| <td align="center" rowspan="2" >element</td>
|
| <td align="center" >dfn</td>
|
| <td align="center" >-</td>
|
| <td align="center" >x</td>
|
| <td align="center" >-</td>
|
| </tr>
|
| <tr>
|
| <td align="center" >dır</td>
|
| <td align="center" >x</td>
|
| <td align="center" >x</td>
|
| <td align="center" >x</td>
|
| </tr>
|
| </table>
|
| </body>
|
| </html> |
|
0 yorum :
Yorum Gönder