HTML Tablo Oluşturma

HTML de bir tablo <table> etiketi ile tanımlanır. Satır tanımlamak için <tr>, sütun tanımlamak için <td> etiketi kullanılır. Tablo başlığı tanımlamak için <th> etiketi kullanılır. Th etiketi default olarak kalın yazılı ve ortalanmış şekildedir. Şimdi bir örnekle inceleyelim.


<html>
<head></head>

<body>

<table>

<tr>
<th>Sayı</th>
<th>Ad</th>
<th>Soyad</th>
</tr>

<tr>
<td>1</td>
<td>Furkan</td>
<td>Aktaş</td>
</tr>

<tr>
<td>2</td>
<td>Ali</td>
<td>Ak</td>
</tr>

</table>

</body>
</html>

Eğer kenarlık eklemek istiyorsanız <table>,<tr>,<td> etiketlerine style=”border:” stilini eklemeniz gerekmektedir.


<html>
<head></head>

<body>

<table style="border:2px solid blue;
border-collapse:collapse;">
<!-- Collapse komutu sayesinde 1. şekilde çift çizgiler
ikinci şekildeki gibi teke düşüyor. -->

<tr style="border:2px solid blue;">
<th style="border:2px solid blue;">Sayı</th>
<th style="border:2px solid blue;">Ad</th>
<th style="border:2px solid blue;">Soyad</th>
</tr>

<tr style="border:2px solid blue;">
<td style="border:2px solid blue;">1</td>
<td style="border:2px solid blue;">Furkan</td>
<td style="border:2px solid blue;">Aktaş</td>
</tr>

<tr style="border:2px solid blue;">
<td style="border:2px solid blue;">2</td>
<td style="border:2px solid blue;">Ali</td>
<td style="border:2px solid blue;">Ak</td>
</tr>

</table>

</body>
</html>


Eğer tabloya bir başlık eklemek isterseniz bunu <caption> etiketi kullanarak yapabilirsiniz. Başlık olduğu için default olarak ortalanmış şekilde gelir.


<html>
<head></head>

<body>

<table style="border:2px solid blue;width:100%;
border-collapse:collapse;">

<caption>HTML TABLOSU</caption>

<tr style="border:2px solid blue;">
<th style="border:2px solid blue;">Sayı</th>
<th style="border:2px solid blue;">Ad</th>
<th style="border:2px solid blue;">Soyad</th>
</tr>

<tr style="border:2px solid blue;">
<td style="border:2px solid blue;">1</td>
<td style="border:2px solid blue;">Furkan</td>
<td style="border:2px solid blue;">Aktaş</td>
</tr>

</table>

</body>
</html>

Eğer sütun yada satırları birleştirmek isterseniz:

  • colspan: Sütun birleştirme
  • rowspan: Satır birleştirme nitelikleri kullanılır.

<html>
<head></head>

<body>

<table style="border:2px solid blue;
border-collapse:collapse;">

<tr style="border:2px solid blue;">
<th style="border:2px solid blue;">Sayı</th>
<th colspan="2" style="border:2px solid blue;">İsim</th>
</tr>

<tr style="border:2px solid blue;">
<td style="border:2px solid blue;">1</td>
<td style="border:2px solid blue;">Furkan</td>
<td rowspan="2" style="border:2px solid blue;">Aktaş</td>
</tr>

<tr style="border:2px solid blue;">
<td style="border:2px solid blue;">2</td>
<td style="border:2px solid blue;">Ali</td>
</tr>

</table>

</body>
</html>

 

Furkan Aktaş

Bilgisayar Mühendisiyim. Microsoft MCSA Web Applications Sertifikasına Sahibim. Aktif iş hayatımda .Net Developer olarak çalışmaktayım.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir