Bu yazımızda html tablo oluşturma işlemi nasıl yapılır ve html tablo oluşturma işlemini yaparken hangi etiketleri kullanacağımızı öğreneceğiz.
Web sayfalarında tablolar <table> etiketi ile tanımlanır. Her tablo satırı <tr> etiketi ile, tablo hücresi ise <td> etiketi ile tanımlanır. Bir tablonun üstbilgi satırı (başlık için) <th> etiketi ile tanımlanır.
tr | table row | tablo satırı |
td | table data | tablo verisi / hücre |
th | table header | tablo üstbilgisi (başlık) |
Tablo oluştururken ilk <tr> etiketi ilk satırı oluşturur. Her satırdaki <td> etiketleri de sıra ile o satırdaki sütunları (verileri) oluşturur. Oluşturmak istediğimiz satır kadar <tr> etiketi kullanarak tablomuzu oluştururuz. Örnek bir temel tablo oluşturalım. Html de Kod kısmı :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Temel HTML Table</h3>
<table>
<tr>
<th>Ders</th>
<th>Murat</th>
<th>Mahir</th>
<th>Elif</th>
<th>Abuzer</th>
</tr>
<tr>
<td>Türkçe</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>Matematik</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>Tarih</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
</body>
</html>
Tarayıcıda Görüntüsü :
Yukarıda da gördüğümüz gibi sade bir tablo oluştu. Herhangi bir renklendirme ve dış çizgilere sahip değil. Yani görünüş olarak güzel değil. Dış çizgi ve renklendirme yapmak için html attribute veya css kullanarak yapabiliriz. Bu yazımızda html attribute ile yapacağız. Css derslerimizde de css ile tabloları nasıl şekilledireceğimizi anlatacağız.
“border” ve “bordercolor” attribute özelliğini kullanalım. Yukarıdaki kod kısmında sadece <table> etiketine attribute eklemesi yapacağız. Kod kısmı :
<table border=1 bordercolor="Blue">
Tarayıcıdaki sonucunu görelim:
Yukarıda gördüğümüz gibi her bilginin etrafına çizgi oluşturdu ve bütün hepsini de bir kutu içine aldı. “border” attribute özelliği verdiğimiz yerin etrafını bu şekilde kutu içine alır. “bordercolor” da gördüğümüz gibi bu çizgiye rengi vermemizi sağlar.
Tabloya background (arka plan) rengi verelim ve sütunlara genişlik verelim. Background rengi için “bgcolor” attribute kullanıyoruz ve sütunlara genişlik vermek için “width” attribute kullanıyoruz. Örnek kod kısmı:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border=1 bordercolor="Blue" bgcolor="yellow">
<tr>
<th width="150">Ders</th>
<th width="100">Murat</th>
<th width="100">Mahir</th>
<th width="100">Elif</th>
<th width="100">Abuzer</th>
</tr>
<tr>
<td>Türkçe</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>Matematik</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>Tarih</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
</body>
</html>
Sonucu Görelim:
Bazı tablolarda sütunu veya satır birleştirmemiz gerekebilir. Aynı satırda yer alan hücreleri birleştirmek için “colspan” özelliğini kullanınız. Aynı sütunda yer alan hücreleri birleştirmek için “rowspan” özelliğini kullanınız.
Rowspan Özelliğine örnek verelim. Kod kısmı:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Rowspan Özelliği</h2>
<table border=1>
<tr>
<th>Adı:</th>
<td> Murat </td>
</tr>
<tr>
<th rowspan="2">Telefon:</th>
<td>212 212 12 12</td>
</tr>
<tr>
<td>212 212 12 13</td>
</tr>
</table>
</body>
</html>
Sonucunu Görelim:
Colspan Özelliği için örnek verelim. Kod kısmı:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Colspan Özelliği</h2>
<table border=1>
<tr>
<th>Adınız</th>
<th colspan="2">Telefon</th>
</tr>
<tr>
<td>Mahir</td>
<td>212 212 12 12</td>
<td>212 212 12 13</td>
</tr>
</table>
</body>
</html>
Sonucunu Görelim:
Html Tablo Oluşturma ve Başlık Ekleme ( < caption > Etiketi )
Tabloya başlık eklemek için < caption > etiketi kullanırız. Örnek verelim. Kod kısmı:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<caption>Ögrenci Notları</caption>
<tr>
<th>Ders</th>
<th>Murat</th>
<th>Mahir</th>
<th>Elif</th>
<th>Abuzer</th>
</tr>
<tr>
<td>Türkçe</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>Matematik</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>Tarih</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
</body>
</html>
Tarayıcıdaki sonucu:
Başka bir yazımızda görüşmek üzere…
selam ben ali ve sizinle çalışmak istiyorum
Harika bir anlatım olmuş çok güzel elinize sağlık
yorumunuz için teşekürler…