
- HTML Nedir?
- HTML Başlıkları
- HTML Paragraf
- HTML Yorumları 175 175 175
YouTube'ta Takip Et →
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.

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.

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
