Tablo İşlemleri

Bu dersimizde basit HTML’de tablo işlemlerini gerçekleştireceğiz. Tablomuzu ve sınırlarını yaratmak için <table></table> etiketlerini kullanıyoruz. Tablomuz ile ilgili tüm işlemler bu etiketleri içinde gerçekleşecek. Tablomuzu oluşturmak için öncelikle ilk satırımızı oluşturacağız. Tablomuz içerisine satır açmak için <tr></tr> (table rows) etiketini kullanıyoruz. Her bir satır içindeki sütün işlemlerini bu satır açma etiketi içinde gerçekleştireceğiz. Düşününki bir tabloda ilk satır genellikle sütün başlıklarından oluşur. Bu başlıkları <th></th> (table header)  etiketleri ile belirtiyoruz. Kullanmak sizlere kalmış. Her bir satır içinde hücre içeriğinin bulunacağı etiketimiz ise <td></td> (table data) etiketi olacak. Çok karışık gözükmesine rağmen görsel çıktısına baktığınızda anlaşılacaktır. Aşağıdaki kodları kendi editörünüze kopyalayarak çıktılarını görebilirsiniz.

<!-- 
## <table></table> Tablo etiketi
## <th></th> table header
## <tr></tr> table row
## <td></td> table data
## colspan ve rowspan
## cellpadding (hücre içeriği ile borderları arasındaki mesafe) ve cellspacing (hücreler arasındaki boşluklar)
-->

<table border="1px" cellpadding="10px" cellspacing="5px"> <!-- Satır Açtık -->
<tr> <!-- Başlık satırını açtık -->
<th width="30%">1.sütun başlığı</th> <!-- <th> etiketi ile tablo sütün başlıklarını belirledik -->
<th width="100px">2.sütun başlığı</th> <!-- Genişlik değeri ile 100px'lik bir genişlik tanımlandı -->
<th>3.sütun başlığı</th>
<th>4.sütun başlığı</th>
<th>5.sütun</th> <!-- İlk satırımızdaki bütün hücre içiriklerini başlık olarak <th> etiketi ile belirledik -->
</tr> <!-- Satır Kapattık -->
<tr> <!-- 1nci Satırımızı açtık -->
<td>1.satır 1.sütun içeriği</td> 
<td rowspan="3">1.satır 2.sütun içeriği</td> <!-- Aşağıya doğru 3 satır birleştirildi -->
<td colspan="2">1.satır 3.sütun içeriği</td> <!-- Sağa doğru 2 sütun birleştirildi.-->
</tr>
<tr> <!-- 2nci satırımızı açtık-->
<td height="50px">2.satır 1.sütun içeriği</td> <!-- Bu hücreye ait 50px lik bir yükseklik tanımlandı -->
<td>2.satır 3.sütun içeriği</td>
<td>2.satır 4.sütun içeriği</td>
</tr>
<tr>
<td>3.satır 1.sütun içeriği</td>
<td>3.satır 3.sütun içeriği</td>
<td>3.satır 4.sütun içeriği</td>
<td>artık sütün</td> <!-- 1nci satırdaki rowspan özelliğinden dolayı 3ncü satır 2nci sütun yazılmadı fakat bir satır daha eklersen artık bir sütün oluştu. -->
</tr>
</table>

Border Özelliği:

Tablo <table> etiketine vereceğimiz border özelliği tablo sınırlarımıza ve her bir hücreyi ayıracak şekilde belirtilen pixel cinsinden değeri ile çizgi oluşmasını sağlar. Örnekte görüldüğü üzere table etiketine 1px değerinde border çizgi kalınlığı belirtilmiştir.

Cellpadding Özelliği:

Tablo <table> etiketine vereceğimiz “cellpadding” özelliği isminden de anlaşılacağı üzere hücre içeriği ile hücre sınır çizgileri arasındaki oluşturulan boşluğa denir. Değerleri pixel cinsinden belirtilebilir. Örnekte cellpadding özelliği 10px olarak verilmiştir. CSS derslerinde de “padding” özelliği çokça duyulacak ve görülecektir.

Cellspacing Özelliği:

Tablo <table> etiketine vereceğimiz “cellspacing” özelliği hücre sınırının dışı ile kendisine komşu bir hücrenin veya tablo sınırına olan uzaklığı belirler. Örneğimizde 5px olarak belirtilmiştir.

Colspan Özelliği:

Hücreleri birleştirmek için kullanılan bir özelliktir. Alacağı rakam değerine göre sağa doğru kendisine komşu aynı satırdaki farklı sütunlardaki hücreler ile birleşir. Birleştiği sütunlardaki hücre içeriği <td> etiketileri o satır içinden silinmelidir. Silinmezler ise artık sütun olarak aynı satırda tablo dışına çıkacaktır. Örnek incelendiğinde 1nci satır 3ncü sütun hücresine colspan özelliği ve bu özelliğe 2 değeri verilmiştir.  Görüldüğü üzere 1nci satır 3ncü sütun ile 1nci satır 4ncü sütün birleşmiştir. Kod satırında 1nci satır 4ncü sütun <td> ekiteti yazılmamıştır.

Rowspan Özelliği:

Hücre sütunlarını aşağıya doğru birleştirmek için kullanılır. Bu özelliğe ait değerler rakam olmalıdır. Alacağı rakam kadar aşağıya doğru sütunları birleştirir. Verilen değer kadar daha sonraki <tr> ile açılan satırlarda birleşen hücrelere ait <td> etiketleri bulunmaz. Örneğe bakıldığında; 1nci satır 2nci sutun hücresi için rowspan değeri 3 olarak belirtilmiştir. 1nci satır 2nci sütun hücresi ile 2nci satır 2nci sütun ve 3ncü satır 2nci sütun hücreleri birleştirilmiş oldu. Kod satırlarında alttaki <tr> etiketleri içinde bulunan <td> etiketlerinin 2nci satır 2nci sütun ve 3ncü satır 2nci sütun <td> etiketli hücreleri yazılmamıştır.

Tablolar için Width ve Height Özellikleri;

Hücre başlıkları <th> veya herhangi bir satır içindeki hücre içeriği <td> için kullanılabilir. Width özelliği ile genişliği Height özelliği ile yüksekliği belirlenebilir. Alacağı değerler pixel (px) ve yüzde (%) şeklinde olabilir. Bir değer yüzde cinsinden verilecekse önce rakamsal değer verilir arkasına yüzde işareti kullanılır. (50%). Örneğimiz incelendiğinde width özelliği 1nci sütun başlığı ve 2nci sütun başlığı için belirtilmiştir. 1nci sütun için genişlik width değeri 30% belirtilmişken, 2nci sütun başlığı için 100px’lik bir genişlik değeri atanmıştır. 2nci satır 1nci sütun için bakıldığında yükseklik (height) özelliğine 40px’lik bir değer atanmıştır. Kodların tarayıcıdaki çıktısına baktığınızda 2nci satır 1nci sütun için hücre yüksekliğinin diğerlerine göre daha yüksek olduğunu görebilirsiniz.

Bu derse ait konu anlatımlı videomuzu izlemek için tıklayınız.

Bir önceki “HTML Dersleri Ders#6 | Bağlantılar ve Linkler” konulu yazıma ulaşmak için tıklayınız…