Html Dersleri 4: Tablolarla Çalışma

Html derslerine uzun bir aradan sonra kaldığım yerden devam etmek istiyorum. Bugün html ile tablo oluşturmak için gerekli etiketlerden bahsedeceğim. Tablolar web sayfalarında verilerin düzenli şekilde gösterilmesi için kullanılırlar. Lafı fazla uzatmadan bir tablo oluşturmak için gerekli olan temel etiketlere göz atalım.

Table etiketi: Bir tablo oluşturmak için gerekli kodların tümü <table> ve </table> etiketleri arasına yazılır. Tablolar satır ve sütunlardan oluşur.

Tr Etiketi: Tablo içerisinde satır oluşturmak için kullanılır. Bir satır <tr> ile başlar </tr> ile sona erer.

Td Etiketi: Tablo içerisinde sütun oluşturmak için kullanılır. Bir sütun <td> ile başlar </td> ile sona erer.

Th Etiketi: Tablo içerisindeki sütunlardan başlık olanları belirtmek için kullanılır.

Konunun anlaşılması için basit bir tablonun üzerinden devam edelim.

Tabloyu oluşturmak için gerekli html kodları aşağıdaki gibidir. Table etiketine parametre olarak border=”1″ girildiğine dikkat edin. Border değeri girilmediği takdirde kenarlıklar görünmeyecektir.

Kodlara dikkat ettiğinizde, her <tr> satır etiketi içerisinde <td> sütun etiketleri olacak şekilde tablo oluşturulmuştur.

Tablolarda Kullanılan Parametreler

Tabloları özelleştirmek için yukarıdaki etiketlerle birlikte bazı parametreler kullanılmaktadır. Zaten yukarıda border parametresinden bahsetmiştim. Diğer parametreleri de şöyle bir inceleyelim.

border: kenarlık oluşturmak için kullanılır.

bordercolor: kenarlıkların rengini değiştirmek için için kullanılır.

bgcolor: tablonun arkaplan rengini değiştirmek için kullanılır.

width: Tablonun genişliğini ayarlamak için kullanılır.

height: Tablonun yüksekliğini ayarlamak için kullanılır.

Yukarıda saydığım parametreler table etiketinin parametreleridir. Bu parametreleri aşağıdaki gibi kullanabilirsiniz.

<table border=”1″ bordercolor=”red” width=”300px” height=”250px” bgcolor=”pink”>

Satır ve Sütunları Birleştirmek

Bazı durumlarda tablolarda ki satır ve sütunları birleştirmemiz gerekebilir. Bu durumda aşağıdaki parametreler kullanılır.

colspan: Aynı satırdaki hücreleri birleştirmek için kullanılır.

rowspan: Aynı sütundaki hücreleri birleştirmek için kullanılır.

Aşağıdaki tabloyu html kodları ile oluşturmaya çalışalım.

Tablonun html kodları:

Tablo oluşturmak için kullanılan kodlar başlangıçta karışık görünse de mantığını kavradıktan sonra zorlanmadan her tabloyu oluşturabilirsiniz. Konuyla ilgili sorularınızı bana iletebilirsiniz. Kolay gelsin.