HTML tablo etiketi Verileri tablo halinde (satır * sütun) görüntülemek için kullanılır. Arka arkaya çok sayıda sütun olabilir.

Verileri tablo halinde görüntülemek için aşağıdakileri kullanarak bir tablo oluşturabiliriz:

Her tabloda, tablo satırı şu şekilde tanımlanır:etiketi, tablo başlığı şu şekilde tanımlanır:ve tablo verileri şu şekilde tanımlanır:Etiketler.

HTML tabloları sayfanın düzenini yönetmek için kullanılır; başlık bölümü, gezinme çubuğu, gövde içeriği, alt bilgi bölümü vb. Ancak sayfa düzenini yönetmek için tablo üzerinden div etiketinin kullanılması önerilir.

HTML Tablo Etiketleri

HTML Tablo Örneği

HTML tablo etiketi örneğini görelim. Çıkışı yukarıda gösterilmiştir.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Çıktı:

kova sıralaması

Yukarıdaki HTML tablosunda 5 satır ve 3 sütun = 5 * 3 = 15 değer bulunmaktadır.

Kenarlıklı HTML Tablosu

HTML tabloları için kenarlığı belirtmenin iki yolu vardır.

1. HTML'deki tablonun kenarlık özelliğine göre
2. CSS'deki border özelliğine göre

1) HTML Kenarlık özelliği

Kenarlığı belirtmek için HTML'deki tablo etiketinin kenarlık özelliğini kullanabilirsiniz. Ancak şu anda tavsiye edilmiyor.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Çıktı:

2) CSS Kenarlığı özelliği

Artık tabloda kenarlığı belirtmek için CSS'nin border özelliğinin kullanılması öneriliyor.

 table, th, td { border: 1px solid black; } 

Border-collapse özelliği ile tek kenarlıktaki tüm kenarlıkları daraltabilirsiniz. Sınırı tek bir noktaya indirecek.

kali linux terminali

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Çıktı:

Hücre dolgulu HTML Tablosu

Tablo başlığı ve tablo verileri için dolguyu iki şekilde belirleyebilirsiniz:

1. HTML'deki tablonun cellpadding niteliğine göre
2. CSS'deki özelliği doldurarak

HTML tablo etiketinin cellpadding özelliği artık kullanılmıyor. CSS kullanılması tavsiye edilir. Şimdi CSS kodunu görelim.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Çıktı:

HTML Tablo genişliği:

HTML tablo genişliğini şunu kullanarak belirtebiliriz: CSS genişliği mülk. Piksel veya yüzde olarak belirtilebilir.

Masa genişliğimizi ihtiyacımıza göre ayarlayabiliriz. Aşağıda tabloyu genişlikle görüntüleme örneği verilmiştir.

 table{ width: 100%; } 

Örnek:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Çıktı:

Colspan'lı HTML Tablosu

Bir hücreyi birden fazla sütuna yaymak istiyorsanız colspan özelliğini kullanabilirsiniz.

Bir hücreyi/satırı birden fazla sütuna böler ve sütunların sayısı colspan özelliğinin değerine bağlıdır.

İki sütuna yayılan örneği görelim.

CSS kodu:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

HTML Kodu:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Çıktı:

Satır genişliğine sahip HTML Tablosu

Bir hücrenin birden fazla satıra yayılmasını istiyorsanız rowspan özelliğini kullanabilirsiniz.

Bir hücreyi birden fazla satıra böler. Bölünen satırların sayısı satır aralığı değerlerine bağlı olacaktır.

İki satıra yayılan örneği görelim.

CSS kodu:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

HTML Kodu:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Çıktı:

Altyazılı HTML tablosu

HTML başlığı tablonun üzerinde görüntülenir. Yalnızca tablo etiketinden sonra kullanılmalıdır.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

HTML tablosunun çift ve tek hücrelerini şekillendirme

CSS kodu:

excel ilk karakteri kaldır

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Çıktı:

NOT: Tablonuzdaki farklı CSS özelliklerini kullanarak da çeşitli türde tablolar oluşturabilirsiniz.

Destekleyen Tarayıcılar

Öğe	Krom	IE	Firefox	Opera	Safari
	Evet	Evet	Evet	Evet	Evet