HTML Table Tablo

Web sayfalarında verilerin satır ve sütun olarak yerleştirilmesini sağlar. Örnek tablomuz aşağıdaki gibi olsun.

Ögr No adı soyadı mobil dtarihi bölümü
75050917 Temel Demir 5557779777 1989-01-28 Fizik
91050075 Gülçin Demircan 532100011 NULL NULL
91050099 Yahya Demircan 532100010 2022-03-10 Matematik

Bu tablonun html yapısı

<table>
<tr><th>Ögr No     </th><th> adı    </th><th> soyadı   </th><th> mobil      </th><th> dtarihi    </th><th> bölümü    </th><tr>
<tr><td> 75050917 </td><td> Temel  </td><td> Demir     </td><td> 5557779777 </td><td> 1989-01-28 </td><td> Fizik     </td><tr>
<tr><td> 91050075 </td><td> Gülçin </td><td> Demircan  </td><td> 532100011  </td><td> NULL       </td><td> NULL      </td><tr>
<tr><td> 91050099 </td><td> Yahya  </td><td> Demircan  </td><td> 532100010  </td><td> 2022-03-10 </td><td> Matematik </td><tr>
</table>

Tablo <table> ana tag, satırlar için de <tr>, başlık kısmı <th> ve sütunlar içinde <td> tagları kullanılmıştır.

Tablomuza kenarlık vermek için CSS style ekleyelim

<table style=”border:1px solid green”> şekline getirmek yeterlidir.

<table style="border: 1px solid green;">
<tr><th>Ögr No     </th><th> adı    </th><th> soyadı   </th><th> mobil      </th><th> dtarihi    </th><th> bölümü    </th><tr>
<tr><td> 75050917 </td><td> Temel  </td><td> Demir     </td><td> 5557779777 </td><td> 1989-01-28 </td><td> Fizik     </td><tr>
<tr><td> 91050075 </td><td> Gülçin </td><td> Demircan  </td><td> 532100011  </td><td> NULL       </td><td> NULL      </td><tr>
<tr><td> 91050099 </td><td> Yahya  </td><td> Demircan  </td><td> 532100010  </td><td> 2022-03-10 </td><td> Matematik </td><tr>
</table>
Ögr No adı soyadı mobil dtarihi bölümü
75050917 Temel Demir 5557779777 1989-01-28 Fizik
91050075 Gülçin Demircan 532100011 NULL NULL
91050099 Yahya Demircan 532100010 2022-03-10 Matematik

Bu tablomuzda 1 satır (th), 6 sütün (td) bulunmaktadır. sütun ve satırlarda da  kenarlık olması için her bir th ve her bir td ye style vermek zor olacaktır.

Bunun yerine table, th ve td ye style tanımlamak daha kolay olacaktır. Hatırlanırsa <style></style> taglari içine yazılması ve tek bir noktadan müdahele edilmesi kolay olacaktır.

Öncelikle table’a bir class tanımlaması yapalım; <table class=”kenarlikTable”>

<table class="kenarlikTable">
<tr><th>Ögr No     </th><th> adı    </th><th> soyadı   </th><th> mobil      </th><th> dtarihi    </th><th> bölümü    </th><tr>
<tr><td> 75050917 </td><td> Temel  </td><td> Demir     </td><td> 5557779777 </td><td> 1989-01-28 </td><td> Fizik     </td><tr>
<tr><td> 91050075 </td><td> Gülçin </td><td> Demircan  </td><td> 532100011  </td><td> NULL       </td><td> NULL      </td><tr>
<tr><td> 91050099 </td><td> Yahya  </td><td> Demircan  </td><td> 532100010  </td><td> 2022-03-10 </td><td> Matematik </td><tr>
</table>

sonra sayfamızın head bölümünde <style> </style> bloğuna aşağıdaki css ifadesini ekleyelim.

<style>
.kenarlikTable td, .kenarlikTable th {
      border: 1px solid green;}
</style>
Ögr No adı soyadı mobil dtarihi bölümü
75050917 Temel Demir 5557779777 1989-01-28 Fizik
91050075 Gülçin Demircan 532100011 NULL NULL
91050099 Yahya Demircan 532100010 2022-03-10 Matematik

Böylece tablomuza kenarlık; çizgiden oluşan, 1px kalınlığında ve yeşil  renk tanımlamış olduk.

HTML Table Tablo

Web sayfalarında verilerin satır ve sütun olarak yerleştirilmesini sağlar. Örnek tablomuz aşağıdaki gibi olsun.

Ögr No adı soyadı mobil dtarihi bölümü
75050917 Temel Demir 5557779777 1989-01-28 Fizik
91050075 Gülçin Demircan 532100011 NULL NULL
91050099 Yahya Demircan 532100010 2022-03-10 Matematik

Bu tablonun html yapısı

<table>
<tr><th>Ögr No     </th><th> adı    </th><th> soyadı   </th><th> mobil      </th><th> dtarihi    </th><th> bölümü    </th><tr>
<tr><td> 75050917 </td><td> Temel  </td><td> Demir     </td><td> 5557779777 </td><td> 1989-01-28 </td><td> Fizik     </td><tr>
<tr><td> 91050075 </td><td> Gülçin </td><td> Demircan  </td><td> 532100011  </td><td> NULL       </td><td> NULL      </td><tr>
<tr><td> 91050099 </td><td> Yahya  </td><td> Demircan  </td><td> 532100010  </td><td> 2022-03-10 </td><td> Matematik </td><tr>
</table>

Tablo <table> ana tag, satırlar için de <tr>, başlık kısmı <th> ve sütunlar içinde <td> tagları kullanılmıştır.

Tablomuza kenarlık vermek için CSS style ekleyelim

<table style=”border:1px solid green”> şekline getirmek yeterlidir.

<table style="border: 1px solid green;">
<tr><th>Ögr No     </th><th> adı    </th><th> soyadı   </th><th> mobil      </th><th> dtarihi    </th><th> bölümü    </th><tr>
<tr><td> 75050917 </td><td> Temel  </td><td> Demir     </td><td> 5557779777 </td><td> 1989-01-28 </td><td> Fizik     </td><tr>
<tr><td> 91050075 </td><td> Gülçin </td><td> Demircan  </td><td> 532100011  </td><td> NULL       </td><td> NULL      </td><tr>
<tr><td> 91050099 </td><td> Yahya  </td><td> Demircan  </td><td> 532100010  </td><td> 2022-03-10 </td><td> Matematik </td><tr>
</table>
Ögr No adı soyadı mobil dtarihi bölümü
75050917 Temel Demir 5557779777 1989-01-28 Fizik
91050075 Gülçin Demircan 532100011 NULL NULL
91050099 Yahya Demircan 532100010 2022-03-10 Matematik

Bu tablomuzda 1 satır (th), 6 sütün (td) bulunmaktadır. sütun ve satırlarda da  kenarlık olması için her bir th ve her bir td ye style vermek zor olacaktır.

Bunun yerine table, th ve td ye style tanımlamak daha kolay olacaktır. Hatırlanırsa <style></style> taglari içine yazılması ve tek bir noktadan müdahele edilmesi kolay olacaktır.

Öncelikle table’a bir class tanımlaması yapalım; <table class=”kenarlikTable”>

<table class="kenarlikTable">
<tr><th>Ögr No     </th><th> adı    </th><th> soyadı   </th><th> mobil      </th><th> dtarihi    </th><th> bölümü    </th><tr>
<tr><td> 75050917 </td><td> Temel  </td><td> Demir     </td><td> 5557779777 </td><td> 1989-01-28 </td><td> Fizik     </td><tr>
<tr><td> 91050075 </td><td> Gülçin </td><td> Demircan  </td><td> 532100011  </td><td> NULL       </td><td> NULL      </td><tr>
<tr><td> 91050099 </td><td> Yahya  </td><td> Demircan  </td><td> 532100010  </td><td> 2022-03-10 </td><td> Matematik </td><tr>
</table>

sonra sayfamızın head bölümünde <style> </style> bloğuna aşağıdaki css ifadesini ekleyelim.

<style>
.kenarlikTable td, .kenarlikTable th {
      border: 1px solid green;}
</style>
Ögr No adı soyadı mobil dtarihi bölümü
75050917 Temel Demir 5557779777 1989-01-28 Fizik
91050075 Gülçin Demircan 532100011 NULL NULL
91050099 Yahya Demircan 532100010 2022-03-10 Matematik

Böylece tablomuza kenarlık; çizgiden oluşan, 1px kalınlığında ve yeşil  renk tanımlamış olduk.