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.
</html><style>
.tual { width: 960px; margin:0 auto; background-color: burlywood; padding: 30px; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua; }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}
.sag_icerik_ust { height: 200px; width:600px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; width:600px; background-color: deeppink; }
.sag_icerik_alt { height: 300px; width:560px; background-color: blueviolet; padding: 20px; }
.sag_icerik_alt_sol { height: 300px; width: 33.3%; float: left; background-color: darkorange; }
.sag_icerik_alt_orta { height: 300px; width: 33.3%; float: left; background-color: tomato; }
.sag_icerik_alt_sag { height: 300px; width: 33.3%; float: left; background-color: cyan; }
</style></head>
<body>
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik">
<div class="sag_icerik_ust"></div>
<div class="sag_icerik_orta"></div>
<div class="sag_icerik_alt">
<div class="sag_icerik_alt_sol"></div>
<div class="sag_icerik_alt_orta"></div>
<div class="sag_icerik_alt_sag"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div> </body>
|
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>
|