HTML Tablo Oluşturma !

See the Pen html tabloları by ArmyYazılım (@armyyazilim) on CodePen.
<table>
Etiketi ile bir HTML tablosu tanımlanır .
Her tablo satırı <tr>
etiketi ile tanımlanır . <th>
Etiketi ile birlikte bir tablo başlığı tanımlanır .
Varsayılan olarak, tablo başlıkları kalın ve ortalanmıştır. Bir tablo verisi / hücresi <td>
etiketi ile tanımlanır .
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Not:<td>
elementler tablosunun veri listelendiği yerdir.
Her türlü HTML öğesini içerebilirler; metin, resimler, listeler, diğer tablolar vb.
HTML Tablosu – Kenarlık Ekleme
Tablo için bir kenarlık belirtmezseniz, kenarlıksız olarak gösterilir.
CSS border
özelliği kullanılarak bir sınır belirlenir :
table, th, td {
border: 1px solid black;
}
Hem tablo hem de tablo hücreleri için kenarlıkları tanımlamayı unutmayın.
HTML Tablosu – Daraltılmış Kenarlıklar
Kenarlıkların bir kenarlığa daralmasını istiyorsanız, CSS border-collapse
özelliğini ekleyin :
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Tablosu – Hücre Dolgusu Ekleme
Hücre dolgusu, hücre içeriği ile sınırları arasındaki boşluğu belirtir.
Bir dolgu belirtmezseniz, tablo hücreleri dolgu olmadan görüntülenir.
Dolgu ayarlamak için CSS padding
özelliğini kullanın :
th, td {
padding: 15px;
}
HTML Tablosu – Sola Hizalama Başlıkları
Varsayılan olarak, tablo başlıkları kalın ve ortalanmıştır.
Tablo başlıklarını sola hizalamak için, CSS text-align
özelliğini kullanın :
th {
text-align: left;
}
HTML Tablosu – Kenarlık Boşluğu Ekleme
Kenarlık boşluğu, hücreler arasındaki boşluğu belirtir.
Bir tablonun kenar boşluğunu ayarlamak için, CSS border-spacing
özelliğini kullanın :
table {
border-spacing: 5px;
}
Çıktısı;
See the Pen html tablo iç boşluk by ArmyYazılım (@armyyazilim) on CodePen.
Not: Tablo sınırları daralttıysa, border-spacing
hiçbir etkisi olmaz.
HTML Tablosu – Birçok Sütunlara Yayılan Hücreler
Bir hücrenin birden fazla sütuna yayılması için, colspan
niteliği kullanın :
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Çıktısı;
See the Pen html tablolar colspan by ArmyYazılım (@armyyazilim) on CodePen.
HTML Tablosu – Birçok Satıra Yayılan Hücreler
Bir hücrenin birden fazla satırdan yayılması için, rowspan
niteliği kullanın :
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Çıktısı;
See the Pen html tabloları rowspan by ArmyYazılım (@armyyazilim) on CodePen.
HTML Tablosu – Başlık Ekleme
Bir tablonun üstüne üst yazı eklemek için <caption>
etiketi kullanın :
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Çıktısı;
See the Pen html tabloları caption by ArmyYazılım (@armyyazilim) on CodePen.
Not:<caption>
etiketi <table>
etiketinden hemen sonra eklenmelidir .
Bir Tablo İçin Özel Bir Stil
Özel bir masa için özel bir stil tanımlamak id
için, tabloya bir özellik ekleyin :
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Şimdi bu tablo için özel bir stil tanımlayabilirsiniz:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Çıktısı;
See the Pen table id by ArmyYazılım (@armyyazilim) on CodePen.
Ve daha fazla stil ekleyin:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Çıktısı;
See the Pen daha fazlası by ArmyYazılım (@armyyazilim) on CodePen.
Bölüm özeti
<table>
Tablo tanımlamak için HTML öğesini kullanın
<tr>
Bir tablo satırı tanımlamak için HTML öğesini kullanın
<td>
Tablo verilerini tanımlamak için HTML öğesini kullanın
<th>
Bir tablo başlığı tanımlamak için HTML öğesini kullanın
<caption>
Tablonun üst genel başlığını tanımlamak için HTML öğesini kullanın
border
Kenarlık tanımlamak için CSS özelliğini kullanın.
border-collapse
Hücre kenarlıklarını daraltmak için CSS özelliğini kullanın
padding
Hücrelere dolgu eklemek için CSS özelliğini kullanın
text-align
Hücre metnini hizalamak için CSS özelliğini kullanın
border-spacing
Hücreler arasındaki boşluğu ayarlamak için CSS özelliğini kullanın.
colspan
Bir hücrenin birçok sütuna yayılması için niteliği kullanın
rowspan
Bir hücreyi birçok satıra yaymak için niteliği kullanın
id
Bir tabloyu benzersiz bir şekilde tanımlamak için niteliği kullanın.
Etiketler | Açıklamalar |
---|---|
<table> | Bir tablo tanımlar |
<th> | Tablodaki başlıklar hücresini tanımlar |
<tr> | Tablodaki bir satırı tanımlar. |
<td> | Tablodaki bir hücreyi tanımlar |
<caption> | Tablonun genel başlığını tanımlar |
<colgroup> | Biçimlendirme için bir tabloda bir veya daha fazla sütun grubunu belirtir. |
<col> | Bir <colgroup> öğesindeki her sütun için sütun özelliklerini belirtir |
<thead> | Başlık içeriğini bir tabloda gruplandırır |
<tbody> | İçeriği bir tabloda gruplandırır |
<tfoot> | Tablodaki altbilgi içeriğini gruplandırır |
İlginizi çekebilir…
WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …