HTML İle Tablo Yapma Kodları

Herkese iyi günler dileriz.Bu yazımızda sizlere html ile tablo nasıl yaparız kodlarla birlikte anlatacağız.Şimdiden iyi çalışmalar dileriz.

Öncelikle arkadaşlar web site kodlamanın en temel hali html öğrenmekten geçiyor.Önce html sonra css ve sonra php öğrenerek kolaylıkla bir site tasarlayabilirsiniz.Html ile bir çok şey yapabilirsiniz.Bunlardan birisi de tablo oluşturmaktır.Peki tablo oluşturmak için hangi kodlara ihtiyacımız var şimdi detaylı şekilde anlatıma geçelim.

HTML İle Tablo Yapmamız İçin Gereken Etiketler/Kodlar

Basit Seviye Tablo Kodları

<table> ==> Tablo yapmak için ana etikettir.Bu etiketin içerisine tablonun değerleri girilir.
<th> ==> Tablo başlığı için yazılan kod.
<tr> ==> Tablo için satır oluşturma kodudur.
<td> ==> Tablo için sütun oluşturma kodudur.

İleri Seviye Tablo Kodları

<caption> ==> Tablo kenarlıkları dışında başlık olarak kullanılır.
<colgroup> ==> Hücre grupları oluşturulan kod.
<col> ==> Tablodaki sütunları biçimlendirmek için kullanılır.
<thead> ==> <th> dahil tablonun üst tarafı için yazılan kod.
<tbody> ==> Tablonun içeriklerinin şekillendiği bölümü kapsar.Tablonun orta kısmı için olan kod.
<tfoot> ==> Tablonun alt kısmı içi yazılan kod.
<colspan> ==> Bu kod ile hücreleri sütun olarak birleştirebilirsiniz.
<rowspan> ==> Bu kod ile hücreleri satır olarak birleştirebilirsiniz.

NOT=Bunlara ek olarak border=”1″ kodu ile tablonun kenarlıklarını oluşturabilirsiniz.

Gördüğünüz gibi arkadaşlar kodlar bu şekildedir.Şimdi html ile örnek bir tablo oluşturalım.Biz örnek olması açısından basit seviye bir tablo yapacağız.Umarız beğenirsiniz.

HTML Örnek Tablo Kodları

Tablonun Ekran Görüntüsü

Gördüğünüz gibi arkadaşlar İstanbul ve Ankara ilimizi ve bunların 2 tane ilçesini yazdık ve tablomuzu oluşturmuş olduk.Burada kodlarda da gördüğünüz gibi <th> kodu ile tablo başlığımızı yaptık yani İstanbul ve Ankara’yı yazdık.<tr> kodu ile satırımızı oluşturduk ve <td> kodu ile de sütunlarımızı oluşturmuş olduk.

Html ile bu şekilde tablo oluşturabiliyoruz.İnşallah faydalı olur.Herkese iyi çalışmalar dileriz…

YORUMLAR

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir