Oluşturduğumuz HTML Tablolarının genişliğini ayarlamak için iki etiketin stil tanımını düzenlemek yeterli olacaktır. Tüm tablonun genişliği ile ilgili bir değişiklik yapılacaksa <table> etiketi için stil düzenlemesi yapmak, sadece bir sütunun genişliği ile ilgili bir düzenleme yapılacaksa o sütundaki her hangi bir hücrenin genişliğini düzenlemek yeterli olacaktır. Aşağıdaki örneklerde bir kaç tane farklı örnek mevcuttur.
Örnek 1: Tablonun içinde bulunduğu alanın %50’si kadar alan kaplamasını sağlayalım (body içinde olduğu için body içindeki alının %50si kadar yer kaplayacaktır).
1 2 3 4 5 6 7 8 9 10 11 12 | <table style="width: 50%; border:2px solid red;"> <tr> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 4 </td> </tr> </table> |
Örnek 2: Tablonun genişliğini 250px genişliğinde yapalım.
1 2 3 4 5 6 7 8 9 10 11 12 | <table style="width: 250px; border:2px solid red;"> <tr> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 4 </td> </tr> </table> |
Örnek 3: Tablodaki genişliğini 250px ikinci hücrenin genişliğini 50px yapın.
1 2 3 4 5 6 7 8 9 10 11 12 | <table style="width: 250px; border:2px solid red;"> <tr> <td> 1 </td> <td style="width: 50px"> 2 </td> </tr> <tr> <td> 3 </td> <td> 4 </td> </tr> </table> |
Örnek 4: Tablodaki genişliğini 250px ikinci hücrenin genişliğini 50px yapın ve ikinci satırın yüksekliğini 100px yapın.
1 2 3 4 5 6 7 8 9 10 11 12 | <table style="width: 250px; border:2px solid red;"> <tr> <td> 1 </td> <td style="width: 50px;"> 2 </td> </tr> <tr> <td style="height: 100px;"> 3 </td> <td> 4 </td> </tr> </table> |
Yorum Yap