Bu yazımızda Html tablo etiketleri nelerdir? Html tablo oluşturma nasıl yapılır? Html tablo birleştirme nasıl yapılır? Html tablo boyutlandırma nasıl yapılır? gibi konuları öğreneceğiz.
Html ile oluşturduğumuz tabloları genellikle birşeyleri listelerken çok kullanıyoruz. Bunları excel tablolarına benzetebiliriz. Satır ve sütunlardan oluşan, içerisinde bilgiler bulundurduğumuz öğelerdir.
HTML TABLO OLUŞTURMA
Html de tablo oluşturmak için kullanmamız gereken en temel etiketler şunlardır;
► <table> : Tablolar bu etiket ile oluşturulur.
► <th> : Tablodaki başlık alanları bu etiket ile oluşturulur.
► <tr> : Tablodaki her satır bu etiket ile oluşturulur.
► <td> : Tablodaki her hücre bu etiket ile oluşturulur.
Bu etiketleri kullanarak en basit haliyle bir tablo oluşturalım.
Html Tablo Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table> <tr> <th>Başlık-1</th> <th>Başlık-1</th> <th>Başlık-1</th> </tr> <tr> <td>1. Satır, 1. Hücre</td> <td>1. Satır, 2. Hücre</td> <td>1. Satır, 3. Hücre</td> </tr> <tr> <td>2. Satır, 1. Hücre</td> <td>2. Satır, 2. Hücre</td> <td>2. Satır, 3. Hücre</td> </tr> </table> |
Html Tablo Görünümü
Gördüğünüz gibi herhangi bir kenarlık oluşmadı. Kenarlıkları oluşturmak için table etiketinin border attribute’una 1 değeri vermemiz gerekiyor. Tabiki bu değeri daha büyük de verebilirsiniz. Değer büyüdükçe tablo kenarlıklarının kalınlığıda artacaktır.
Örneğin 1 değeri verip tablonun değişimine bakalım.
|
1 2 3 |
<table border="1"> |
Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.
⇒ Eğer kenarlık rengini değiştirmek isterseniz bordercolor attribute’unu kullanabilirsiniz.
Örneğin yellow değeri verip tablonun kenarlarının rengini sarı yapalım.
|
1 2 3 |
<table border="1" bordercolor="yellow"> |
Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.
⇒ Eğer tablonun arkaplan rengini değiştirmek isterseniz bgcolor attribute’unu kullanabilirsiniz.
Örneğin lightblue değeri verip tablonun arkaplan rengini açık mavi yapalım.
|
1 2 3 |
<table border="1" bgcolor="lightblue"> |
Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.
⇒ Tabloya bir arkaplan resmi yerleştirmek isterseniz background attribute’unu kullanabilirsiniz.
Kullanımı şu şekilde;
|
1 2 3 |
<table border="1" background="resimyolu.jpg"> |
⇒ Eğer tablonun hücrelerinin birbirleri ile aralarında boşluklar oluşmasını isterseniz cellspacing attribute’unu kullanabilirsiniz.
Örneğin 20 değeri verip tablonun hücrelerinin birbirleri ile arasında 20px lik boşluk verelim. Bu değeri dilediğiniz gibi arttırıp azaltabilirsiniz.
|
1 2 3 |
<table border="1" cellspacing="20"> |
Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.
⇒ Eğer tablonun hücrelerinin içerisindeki verilerin kenarlıklar ile arasında boşluk oluşmasını isterseniz cellpadding attribute’unu kullanabilirsiniz.
Örneğin 20 değeri verip tablonun hücrelerinin içerisindeki verilerle kenarlıklar arasında 20px lik boşluk verelim. Bu değeri dilediğiniz gibi arttırıp azaltabilirsiniz.
|
1 2 3 |
<table border="1" cellpadding="20"> |
Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.
⇒ Tabloya veya bir hücreye genişlik değeri vermek isterseniz width attribute’unu kullanabilirsiniz.
Örneğin tablonun genişliğini 500px yapalım.
|
1 2 3 |
<table border="1" width="500"> |
Şimdi de istediğimiz bir hücrenin genişliğini 40px yapalım. Hangi hücreye uygulamak istiyorsak, o <td> etiketine width attribute’u yazılmalıdır.
|
1 2 3 |
<td width="40"> |
⇒ Tabloyu veya bir hücre içerisindeki yazıları hizalamak isterseniz align attribute’unu kullanabilirsiniz.
► Sağa hizalamak için right
► Sola hizalamak için left
► Ortalamak için center değerini vermeliyiz.
Örneğin bir hücre içerisindeki yazıyı ortalamak istediğimizde şu şekilde yazmalıyız.
|
1 2 3 |
<td align="center"> |
Hangi hücreye uygulamak istiyorsak, o <td> etiketine align attribute’u yazılmalıdır.
HTML TABLO BİRLEŞTİRME (SATIR VE SÜTUN)
Html tablolarında satır veya sütun da bulunan hücreleri birleştirmek isteyebiliriz. Bunun için kullanmamız gereken attribute lar şunlardır;
► colspan : Sütundaki hücreleri birleştirmek için kullanılır.
► rowspan : Satırdaki hücreleri birleştirmek için kullanılır.
Örneğin tablomuzdaki başlık-2 nin iki hücrelik yer kaplamasını sağlayalım.
Html Tablo Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table border="1"> <tr> <th>Başlık-1</th> <th colspan="2">Başlık-2</th> </tr> <tr> <td>1. Satır, 1. Hücre</td> <td>1. Satır, 2. Hücre</td> <td>1. Satır, 3. Hücre</td> </tr> <tr> <td>2. Satır, 1. Hücre</td> <td>2. Satır, 2. Hücre</td> <td>2. Satır, 3. Hücre</td> </tr> </table> |
Html Tablo Görünümü
Şimdi de 1.satır ile 2.satırdaki ilk hücreleri birleştirelim.
Html Tablo Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table border="1"> <tr> <th>Başlık-1</th> <th>Başlık-2</th> <th>Başlık-3</th> </tr> <tr> <td rowspan="2">1. Satır, 1. Hücre</td> <td>1. Satır, 2. Hücre</td> <td>1. Satır, 3. Hücre</td> </tr> <tr> <td>2. Satır, 1. Hücre</td> <td>2. Satır, 2. Hücre</td> </tr> </table> |
Html Tablo Görünümü
HTML TABLOYA BAŞLIK EKLEME
► <caption> : Tabloya başlık eklemek için kullanılır. Bu etiket <table> etiketinden hemen sonra kullanılmalıdır.
⇒ Eğer tablo içerisinde başlık, içerik ve alt bilgi kodlarının daha düzenli olmasını istiyorsak aşağıdaki etiketleri kullanabiliriz. Bu etiketlerin görünüme herhangi bir etkileri yoktur. Sadece tablo kodlarımızın daha düzenli olmasını sağlar.
► <thead> : Tablonun başlık kısmı bu etiket içerisinde yazılır.
► <tbody> : Tablonun içerik kısmı bu etiket içerisinde yazılır.
► <tfoot> : Tablonun alt bilgisi bu etiket içerisinde yazılır.
Html Tablo Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<table border="1"> <caption>Tablonun Başlığı</caption> <thead> <tr> <th>Başlık-1</th> <th>Başlık-2</th> <th>Başlık-3</th> </tr> </thead> <tbody> <tr> <td>1. Satır, 1. Hücre</td> <td>1. Satır, 2. Hücre</td> <td>1. Satır, 3. Hücre</td> </tr> <tr> <td>2. Satır, 1. Hücre</td> <td>2. Satır, 2. Hücre</td> <td>2. Satır, 3. Hücre</td> </tr> </tbody> <tfoot> <tr> <td>3. Satır, 1. Hücre</td> <td>3. Satır, 2. Hücre</td> <td>3. Satır, 3. Hücre</td> </tr> </tfoot> </table> |
Html Tablo Görünümü
Farklı Html tablo örnekleri için Html Tablo Örnekleri yazımı okuyabilirsiniz.
Oluşturduğumuz tabloların görünümleri, websitelerinde gördüğümüz tablolara çok benzemiyor olabilir. Bu tabloları o hale getirebilmek için Css kodları yazmamız gerekiyor.
Tablolarınıza hangi Css özellikleri uygulayabileceğinizi öğrenmek istiyorsanız Css Tablo Özellikleri ve Kullanımı yazımı okuyabilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
