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.

<table>
  <tr>  
	<th>Adı</th>
	<th>Doğum Yeri</th>
	<th>Doğum Yılı</th>
  </tr>
  <tr>
    <td>Ahmet</td>
    <td>Ankara</td>
    <td>1981</td>
  </tr>
  <tr>
    <td>Ayşe</td>
    <td>İzmir</td>
    <td>1986</td>
  </tr>
</table>

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.

<table>
  <tr>  
	<th colspan="2">Adı Soyadı</th>
	<th></th>
	<th>Doğum Yılı</th>
  </tr>
  <tr>
    <td>Ahmet</td>
    <td>Tevfik</td>
    <td>1981</td>
  </tr>
</table>