<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body,td,th {
font-family: "Times New Roman", Times, serif;
font-size: 36px;
color: #000;
}
</style>
</head>
<title>HTML TABLO OLUŞTURMA NASIL YAPILIR?</title>
<body>
<h3>Temel HTML Table</h3>
<table>
<tr>
<th width="464">Ders</th>
<th width="99">İsmail</th>
<th width="96">Hakkı</th>
<th width="52">Deniz</th>
<th width="185">Serkan</th>
</tr>
<tr>
<td>İŞ SAĞLIĞI VE GÜVENLİĞİ.</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>HTML İLE BASİT WEB İŞLEMLERİ</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>AÇIK KAYNAK KODLU HAZIR WEB</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
<p>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.</p>
<table>
<tbody>
<tr>
<td>tr</td>
<td>table row</td>
<td>tablo satırı</td>
</tr>
<tr>
<td>td</td>
<td>table data</td>
<td>tablo verisi / hücre</td>
</tr>
<tr>
<td>th</td>
<td>table header</td>
<td>tablo üstbilgisi (başlık)</td>
</tr>
</tbody>
</table>
<p>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. </p>
<p>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.</p>
<p><strong>“border” ve “bordercolor”</strong> attribute özelliğini kullanalım. Yukarıdaki kod kısmında sadece <table> etiketine attribute eklemesi yapacağız.</p>
<table>
<table border=1 bordercolor="Blue">
<tr>
<th width="464">Ders</th>
<th width="99">Nermin</th>
<th width="96">Suzan</th>
<th width="52">Elif</th>
<th width="288">Ayşe</th>
</tr>
<tr>
<td>İŞ SAĞLIĞI VE GÜVENLİĞİ.</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>HTML İLE BASİT WEB İŞLEMLERİ</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>AÇIK KAYNAK KODLU HAZIR WEB</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
<p>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.</p>
<p><strong>Tabloya background (arka plan) rengi</strong> verelim ve <strong>sütunlara genişlik </strong>verelim. Background rengi için “bgcolor” attribute kullanıyoruz ve sütunlara genişlik vermek için “width” attribute kullanıyoruz. <strong>Örnek kod kısmı:</strong></p>
<p> </p>
<table border=1 bordercolor="Blue" bgcolor="yellow">
<tr>
<th width="508">Ders</th>
<th width="160">Serdar</th>
<th width="100">Sonnur</th>
<th width="100">Salim</th>
<th width="438">Sezen</th>
</tr>
<tr>
<td>İŞ SAĞLIĞI VE GÜVENLİĞİ.</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>HTML İLE BASİT WEB İŞLEMLERİ</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>AÇIK KAYNAK KODLU HAZIR WEB</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
<p>Bazı tablolarda sütunu veya satır birleştirmemiz gerekebilir. Aynı satırda yer alan hücreleri birleştirmek için <strong>“colspan”</strong> özelliğini kullanınız. Aynı sütunda yer alan hücreleri birleştirmek için <strong>“rowspan”</strong> özelliğini kullanınız.</p>
<p><strong>Rowspan Özelliği</strong>ne örnek verelim. Kod kısmı:</p>
<h3>Rowspan Özelliği</h3>
<table border=1>
<tr>
<th>Adı:</th>
<td> İsmail </td>
</tr>
<tr>
<th rowspan="2">Telefon:</th>
<td>212 212 12 12</td>
</tr>
<tr>
<td>212 212 12 13</td>
</tr>
</table>
<p><strong>Colspan Özelliği </strong>için örnek verelim. Kod kısmı:</p>
<h2>Colspan Özelliği</h2>
<table border=1>
<tr>
<th>Adınız</th>
<th colspan="2">Telefon</th>
</tr>
<tr>
<td>İsmail</td>
<td>212 212 12 12</td>
<td>212 212 12 13</td>
</tr>
</table>
<h2>HTML TABLO OLUŞTURMA VE BAŞLIK EKLEME ( < CAPTİON > ETİKETİ )</h2>
<p>Tabloya başlık eklemek için < caption > etiketi kullanırız. Örnek verelim.<strong> Kod kısmı</strong>:</p>
<p> </p>
<table>
<caption>Ögrenci Notları</caption>
<tr>
<th width="541">Ders</th>
<th width="99">Derya</th>
<th width="96">Selim</th>
<th width="52">Elif</th>
<th width="202">Rıza</th>
</tr>
<tr>
<td>İŞ SAĞLIĞI VE GÜVENLİĞİ</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>HTML İLE BASİT WEB İŞLEMLERİ</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>AÇIK KAYNAK KODLU HAZIR WEB</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
</body>
</html>
0 Yorumlar