Html - <table> </table> (1 Görüntüleyen)

<table> </table>
Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodları aşağıda tanımladım.
Tablo 1.2. Table etiketi yardımcı kodları
Bu kodları verdikten sonra basit bir tablo örneği vermek istiyorum. Verdiğim örnekte table etiketi dışında başka etiketlerde kullandığıma dikkat edin.
<table border="1" bgcolor="#aabbcc">
<tr>
<td bgcolor="#f80000">Burada bir yazı var</td>
<td>Burası da başka bir göze.</td>
</tr>
</table>
Yazdığım kodları dikkatli bir şekilde incelemişseniz, <tr> ile satır başlangıcı ve <td> ile sütun başlangıcı yaptığımızı fark etmişsinizdir. Yani her <tr> etiketi bize bir satır açar ve biz <td> etiketi ile bu satıra sütunlar yerleştiririz. Daha sonra </tr> etiketi ile satır bitirilir. Yukarıdaki tabloya bir satır daha eklemek için aşağıdaki gibi bir kod kümesi kullanırız.
<table border="1" bgcolor="#aabbcc">
<tr>
<td bgcolor="#f80000">Burada bir yazı var</td>
<td>Burası da başka bir göze.</td>
</tr>
<!-- Aşağıda ikinci satır başlıyor -->
<tr>
<td bgcolor="#00f800" width="50%">İkinci satırın ilk sütunu</td>
<td>İkinci satırın ikinci sütunu</td>
</tr>
</table>
Yukarıdaki kod kümesi bize iki satırlı bir tablo verecektir. <td> etiketi ile birlikte width, bgcolor gibi özelliklerin kullanılabildiğine dikkat edin.
Peki ya iki sütunluk bir satır ya da iki satırlık bir sütun yapacaksak nasıl yapacağız? Aşağıdaki kodları incelerseniz sorunuza cevap bulabilirsiniz.
<table border="1" bgcolor="aabbcc" width="80%">
<tr>
<td bgcolor="#f80000">Burada bir yazı var</td>
<td>Burası da başka bir göze.</td>
</tr>
<!-- Aşağıda ikinci satır başlıyor -->
<tr>
<td bgcolor="#00f800" width="50%">İkinci satırın ilk sütunu</td>
<td>İkinci satırın ikinci sütunu</td>
</tr >
<!--
Bu yeni satır iki sütunluk. Bunu <td> etiketini içinde
colspan="sütun sayısı" ile belirledim
Aynı şeklide iki satırlık bir sütun oluşturmak için
rowspan="satır sayısı" kodu kullanılır
-->
<tr>
<td colspan="2">
<center>
Tablomuz iki sütunluk olmasına rağmen, burada iki sütunluk bir satır var.
</center>
</td>
</tr>
<tr>
<td rowspan="2">Burası iki satırlık bir sütun.</td>
<td>Burası ilk satır.</td>
</tr>
<tr>
<td>Burası da ikinci satır.</td>
</tr>
</table>
Yukarıdaki örneklerde tabloda kenarlıkların görünüp öğretici olması için border=”1” kodunu kullandım. Sayfalarınızda gerekmedikçe kenarlık kullanmamanız sayfanızın görünümü açısından iyi olacaktır.