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ı 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.