Anasayfa / Web Tasarım / Html / Html Dersleri 4: Tablolarla Çalışma
html nedir?

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.

html tablo örneği

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.

html tablo örneği

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.

İlginizi Çekebilir!

html nedir?

Html Dersleri 6: Form Oluşturma

Html derslerimizin altıncısı olan form oluşturma işlemleri ile devam ediyoruz. Eğer önceki dersleri takip etmek …


2 Yorumlar

  1. eline sağlık dostum.
    Bilgiler çok faydalı oldu

  2. Tabloyu Aşağı Atıyor Nasıl Düzeltebilirim ?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload the CAPTCHA.