HTML ETİKETLERİ İLE TABLO OLUŞTURMA
Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz. Örneğin sayfayı 3 sütuna ayırıp içeriğimizi buna göre hazırlayabiliriz.
Tablo oluşturabilmek için 3 etikete ihtiyacımız var:
-
<table>…………………….</table> etiketleri ile tablonun başladığı ve bittiği yer belirlenir.
-
<tr>…………………………..</tr> etiketleri ile her bir satırın başladığı ve bittiği yer belirtilir.
-
<td>…………………………</td> etiketleri ile tr etiketleri arasında hücreler oluşturulur.
Önce tablo, sonra da satırlar oluşturulur. Son olarak da her satırdaki sütunlar (hücreler) oluşturulur.
<table border="1" width="800" cellspacing="0">
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
<td>1 4</td>
<td>1 5</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
<td>2 4</td>
<td>2 5</td>
</tr>
</table>
Table Etiketinin Parametreleri:
1. Border: Kenarlık kalınlığını belirler. Varsayılan değeri 0'dır ve kenarlık görünmez. 1 veya daha büyük bir değer verilerek kenarlığın kalınlığı ayarlanabilir.
Not: Tablo kenarlığı iç ve dış olmak üzere iki çizgiden oluşur. Border ile verdiğimiz kalınlık hem iç hem de dış kenarlığa uygulanacaktır. Bu iki çizgi arasındaki boşluk cellspacing parametresi ile artırılıp azaltılabilir. Boşluğu sıfırladığımızda iç ve dış çizgiler birbirine yapışacağından toplam kalınlıkları bizim border ile belirttiğimiz kalınlığın 2 katı olacaktır.
Kenarlığın tek çizgiden oluşması Css border-collapse özelliği ile yapılabilmektedir.
<table border="1">
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
<td>1 4</td>
<td>1 5</td>
</tr>
</table>
2. Bordercolor: Kenarlık rengini belirlemek için kullanılır.
<table border="1" bordercolor="blue">
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
<td>1 4</td>
<td>1 5</td>
</tr>
</table>
Not: Bazı tarayıcılarda (örneğin İnternet Explorer) bordercolor parametresi, table etiketi içerisinde kullanılırsa tablonun dış kenarlığını, tr içerisinde kullanılırsa o satırdaki hücrelerin iç kenarlıklarını, td içerisinde kullanılırsa da sadece o hücrenin iç kenarlık rengini belirler.
3. Align:
-
table etiketi içerisinde kullanılırsa tablonun sayfa içindeki hizalamasını,
-
td etiketi içerisinde kullanılırsa o hücrenin içindekilerin hizalamasını,
-
tr etiketi içerisinde kullanıldığında ise o satırdaki tüm hücrelerin içindekileri hizalamayı sağlar.
-
Sola hizalamak için left - sağa hizalamak içn right - ortalamak için center
<table align="center">
<tr>
<td align="left">1 1</td>
<td>1 2</td>
<td align="right">1 3</td>
<td>1 4</td>
<td>1 5</td>
</tr>
</table>
4. Valign: Hücre içerisindeki dikey hizalamayı belirler. top üste, middle ortaya, bottom ise alta hizalar.
Td etiketi içine yazılırsa sadece o hücrenin, tr içine yazılırsa o satırdaki tüm hücrelerin dikey hizalamasını ayarlar.
<table>
<tr>
<td valign="top">1 1</td>
<td>1 2</td>
<td valign="middle">1 3</td>
<td>1 4</td>
<td valign="bottom">1 5</td>
</tr>
</table>
5. Width: Table etiketi içerisinde kullanılırsa tablonun toplam genişliğini, td etiketi içerisinde kullanılırsa o hücrenin genişliğini belirler.
Not: Aynı sütundaki (yani alt alta) hücrelerden bir tanesinin genişliği değiştirildiğinde, o sütundaki diğer hücreler de aynı genişlikte olacaktır. Dolayısıyla bir sütunun genişliğini belirlemek için, o sütuna denk gelen td etiketlerinden sadece bir tanesinde width parametresi kullanmamız yetecektir.
<table width="800">
<tr>
<td width="200">1 1</td>
<td width="600">1 2</td>
</tr>
<tr>
<td>1 1</td>
<td>1 2</td>
</tr>
<tr>
<td>1 1</td>
<td>1 2</td>
</tr>
</table>
6. Height: Satırın yüksekliğini belirler. Tr veya td etiketi içerisinde kullanılabilir.
Not: Bir satırdaki hücrelerden bir tanesinin yüksekliği değiştirildiğinde, o satırdaki diğer hücreler de aynı yükseklikte olacaktır. Dolayısıyla bir satırın yüksekliğini belirlemek için, o satırdaki td etiketlerinden sadece bir tanesinde height parametresi kullanmamız yetecektir.
<table width="800">
<tr height="60">
<td width="200">1 1</td>
<td width="600">1 2</td>
</tr>
<tr>
<td height="80">1 1</td>
<td>1 2</td>
</tr>
<tr>
<td>1 1</td>
<td>1 2</td>
</tr>
</table>
7. Bgcolor:
-
table etiketi içerisinde kullanılırsa tüm tablonun arkaplan rengini,
-
tr etiketi içerisinde kullanılırsa o satırın arka plan rengini,
-
td etiketi içerisinde kullanılırsa o hücrenin arkaplan rengini belirler.
<table bgcolor="yellow">
<tr bgcolor="pink">
<td >1 1</td>
<td>1 2</td>
<td bgcolor="gray">1 3</td>
<td>1 4</td>
<td>1 5</td>
</tr>
</table>
8. Background: Table etiketi içerisinde kullanılırsa tablonun arkaplan resmini, tr etiketi içerisinde kullanılırs o satırın arka plan resmini, td etiketi içerisinde kullanılırsa o hücrenin arkaplan resmini belirler.
örnek: <table background="resimler/bg.jpg"> ....
9. Cellspacing: Table etiketi içinde kullanılır. Hücreler arasındaki uzaklığı, pixel cinsinden ayarlamayı sağlar. Border parametresinde de bahsedilen iç ve dış kenarlıklar arasındaki boşluğu ayarlamamızı sağlar. 0 verilerek boşluk kaldırılabilir.
<table border="1" width="800" cellspacing="0">
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
<td>1 4</td>
<td>1 5</td>
</tr>
</table>
10. Cellpadding: Hücre içindeki yazıların ve diğer elemanların, hücrenin duvarlarından kaç pixel uzaklıkta olacağını belirler. Table etiketi içinde kullanılır ve tüm tabloya uygulanır.
11. Colspan: Aynı satırda yan yana bulunan hücreleri (sütunları) birleştirmek için kullanılır.
12. Rowspan: Alt alta olan hücreleri(satırları) birleştirmek için kullanılır.
html table örnekleri, html tablo örnekleri, table kullanımı, html tablo hizalama, web sayfasına tablo ekleme, tablo kenarlığı çift çizgi
KONU İLE İLGİLİ ÖRNEKLER
Kendin Dene butonuna tıklayarak kodları değiştir ve sonucu gör...
<table width="500" border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="4">2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>
</table>
11722 kez okundu.