HTML Tablo Oluşturmak ve Kullanımı

Excel’deki tablolar gibi HTML’de de aynı görünümde tablolar oluşturmanız mümkün. Tablolardaki kayıtlar satırlar ve sütunlardan oluşur.

Tablolar, table etiketi ile başlar. Tablonun her satırı tr etiketi ile, tablonun içindeki her bir hücre için td etiketi kullanılıyor. Eğer tablo kayıtlarından farklı olarak tablonun en üst satırında bir başlık olacaksa tr ile bir satır açtıktan sonra table header anlamına gelen th etiketi kullanılır.

Adı Doğum Yeri Doğum Yılı
Ahmet Ankara 1981
Ayşe İzmir 1986

Yukarıda, üç sütuna ve bir satırı başlık olan toplamda üç satıra sahip bir tablo örneğini görebilirsiniz. Tabloların genel kullanım mantığı bu şekilde.

Html Tablo Kullanimi

Tablolara Border (Dış Çizgi) Ekleme

Eğer hücreler arası bir çizgi olsun isterseniz, araya bir CSS sıkıştırmamız gerekiyor.

table, th, td {
  border: 1px solid black;
}

Ama bu şekilde bir CSS kod eklediğinizde varsayılan olarak her hücreye ayrı bir çizgi eklediği için iki çizgi varmış gibi görünecektir. Bu çizgileri birleştirmek için aşağıdaki kodu da CSS koduna dahil etmelisiniz.

Html Tablo Kullanimi Border Ekleme
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Hücreler Arasına Boşluk Eklemek

Varsayılan olarak hücreler birbirine yakındır. Hücrelerin etrafına boşluk bırakmak ve birbirlerinden biraz uzaklaştırmak isterseniz padding kullanmamız gerekiyor.

th, td {
  padding: 12px;
}

Hücreleri Sola ya da Sağa Yaslamak

Metinler, varsayılan olarak tablolara ortalanmış şekildedir. Sağa ya da sola yaslamak için text-align CSS kodu kullanılır. Aşağıdaki kod, tüm hücreleri sola yaslamak içindir.

th, td {
  text-align:left;
}

HTML Tablolarındaki Hücreleri Birleştirme

Bazen iki hücreyi birleştirmeniz ve iki hücreyi tek bir hücre gibi göstermeniz gerekebilir. Tablo içindeki hücreleri birleştirmek için colspan‘ı kullanmanız gerekir.
Satırları dikey olarak birleştirmek için de rowspan özelliği kullanılıyor.

Adı Soyadı Doğum Yılı
Ahmet Tevfik 1981
Html Tablo Kullanimi Colspan

Popular Eğitimler

HTML Başlıkları
HTML Başlıkları

HTML için kullanılan belli başlı etiketler var. Burada onlardan kısaca bahsedeceğim. Öğrenmemiz…

HTML Tablo Oluşturmak ve Kullanımı
HTML Tablo Oluşturmak ve Kullanımı

Excel’deki tablolar gibi HTML’de de aynı görünümde tablolar oluşturmanız mümkün. Tablolardaki kayıtlar…

HTML Paragrafları
HTML Paragrafları

Web sitesi hazırlarken yazdığınız herhangi bir paragrafı, paragraph etiketi anlamına gelen p…

HTML’de RGB, HEX ve HSL Renk Kodları Kullanımı
HTML’de RGB, HEX ve HSL Renk Kodları Kullanımı

Web siteleri hazırlarken kullandığınız renkleri farklı şekillerde gösterebilirsiniz. HTML’de renk değerleri renk…

HTML’de Sayfalara Yorum Eklemek
HTML’de Sayfalara Yorum Eklemek

Sayfa içeriğinde görünmeyen ancak kendinize ya da sitenin kodlarına ulaşabilecek diğer insanlar…

HTML Alıntıları
HTML Alıntıları

Bize ait olmayan sözleri sitemizde yayınlarken alıntı şeklinde yayınlarız ki sözün ya…