HTML’de Tablo Tasarımı Nasıl Yapılır

HTML’de Tablo Tasarımı Nasıl Yapılır

HTML kodlarını kullanarak isterseniz tablo hazırlayabiliyorsunuz. Bunun için yapmanız gerekenler oldukça basit. Şimdi sizlere kolay bir şekilde HTML kullanarak nasıl tablo oluşturabileceğinizi anlatacağız. 

Sayfamızın kaynak kodlarında tablomuzun başladığı yeri <TABLE> etiketiyle, bittiği yeriyse </TABLE> etiketiyle gösteriyoruz. Bu iki etiket arasına gerekli satırları ve satırların içinde yer alacak hücreleri yerleştireceğiz.

Tablomuzun içine <TR> etiketiyle başlayıp </TR> etiketiyle biten satırlardan istediğimiz sayıda ekleyebiliriz. Biz bu örnekte ilk iki satırında ikişer hücre bulunan, üçüncü satırında tek hücre bulunan bir tablo hazırlayacağız.

<TR> ve </TR> etiketleriyle belirttiğimiz satırların içine <TD> etiketiyle başlayan ve </TD> etiketiyle son bulan hücreler ekliyoruz. Eklediğimiz hücrelerin içine metin, resim ve animasyon gibi içerikleri yerleştirebiliriz.

Yukarıda gördüğünüz üzere şu ana kadar tablomuza içinde ikişer hücresi bulunan iki satır ekledik. Şu anda dört hücreli bir tablomuz olsa da, tablomuzun çerçeveleri olmadığı için tarayıcıda yeterince anlaşılır bir görüntüye sahip değiliz.

Tablomuzun başladığı yerde kullandığımız <TABLE> etiketinin içine BORDER=“1” parametresini ekleyerek çerçevelerin görünür hale gelmesini sağlıyoruz. Artık hücrelerimiz kolayca birbirinden ayrılabiliyor.

Tablomuzu bitirmeden önce <TABLE> etiketinin öncesine <TD COLSPAN=“2”> etiketiyle başlayıp </TD> etiketiyle biten bir hücre ekliyoruz. COLSPAN parametresi sayesinde eklediğimiz bu son hücre üst satırdaki hücrelerin genişliğine uyum sağlayacak.