Online | Video | Resim | Ders | Fragman | Film | TopList

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ı

Girilecek Kod	Görevi
border = "değer"	Tablonun kenarlığının varlığını belirler.
width = "değer"	Tablonun genişliği belirlenir.
height = "değer"	Tablonun yüksekliği belirlenir.
bgcolor = "renk"	Tablonun zemin rengi belirlenir.
cellpadding = "değer"	Tablo gözeleri içindeki öğelerin tablo kenarlıklarına uzaklığı belirlenir.
cellspacing = "değer"

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>

Burada bir yazı var

Burası da başka bir göze.

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>

Burada bir yazı var	Burası da başka bir göze.
İkinci satırın ilk sütunu	İkinci satırın ikinci sütunu

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>

Burada bir yazı var	Burası da başka bir göze.
İkinci satırın ilk sütunu	İkinci satırın ikinci sütunu
Tablomuz iki sütunluk olmasına rağmen, burada iki sütunluk bir satır var.
Burası iki satırlık bir sütun.	Burası ilk satır.
Burası iki satırlık bir sütun.	Burası da ikinci satır.

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.