22 – Html Tablo Oluşturma
Html de tablo verilerin satırlar ve sütunlar halinde düzgün bir şekilde gösterilmesini sağlayan bir yapıdır.
Tablo <table> etiketi ile başlatılır ve </table> etiketi ile sonlandırılır.
Html Tablo Satır Etiketi <tr>
<tr> etiketi tabloda satırları ifade eder. </tr> kapanış etiketi ile satır sonlanır. Bir alt satır tekrar <tr> </tr> etiketleri ile oluşturulur.
Html Tablo Başlık Etiketi <th>
<th> etiketi, <tr> içerisindeki bir sütundur. Tablo başlıklarını ifade eder. </th> etiketi ile sonlanır.
Html Tablo Sütun Etiketi <td>
<td> etiketi, <tr> içerisindeki bir sütundur. Veriler burada yazılır. </td> etiketi ile sonlanır.
Aşağıdaki örnekte bir tablo oluşturalım ve başlıklarımızı yazalım.
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Tablo Başlık Kullanımı</title>
<style>
table {width:100%;}
//Biraz görsellik katıyoruz.
//Genişlik ekranı kaplasın.
//css kullanıyoruz. Ayrı bir ders konusu.
</style>
</head>
<body>
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Telefon</th>
<th>Adres</th>
</tr>
</table>
</body>
</html>
Bu örnekte tablomuz ve başlıklarımız oluştu. Şimdi içerisine yeni <tr> etiketi ile bir satır açarak <td> etiketi ile verilerimizi ekleyelim.
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html Tablo Veri Ekleme </title>
<style>
table {
width:100%; //genişlik tam ekran oldu
}
th, td {
text-align: left; //yazıları sola hizaladık
}
</style>
</head>
<body>
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Telefon</th>
<th>Adres</th>
</tr>
<tr>
<td>Mehmet</td>
<td>Eser</td>
<td>053200000000</td>
<td>Eskişehir</td>
</tr>
<tr>
<td>Ayşe</td>
<td>Gülen</td>
<td>053200000000</td>
<td>İstanbul</td>
</tr>
<tr>
<td>Enes</td>
<td>Eser</td>
<td>053200000000</td>
<td>Kırklareli</td>
</tr>
</table>
</body>
</html>Tablomuzda biraz daha stil ekleyerek tablomuzu güzelleştirebiliriz.
Örnek
