Bu yazıda, HTML tablolarını kullanarak tablo verilerinin nasıl görüntüleneceğini öğreneceksiniz.
HTML tablosu, verileri satırlara ve sütunlara göre düzenlemenize olanak tanır. Genellikle sekmeli analiz yapılarında kullanılır. Öğrenci listeleri, ürün listesi, gelir gider listesi vs.
Html tablolarını oluşturmak basit ve etkilidir. Çok gelişmiş datatable gibi yapılar temel olarak bu sistemin uzantısıdır.
<table>
<tr>
<th>No.</th>
<th>Adı</th>
<th>Yaşı</th>
<th>Sınıfı</th>
</tr>
<tr>
<td>1</td>
<td>Erkan</td>
<td>16</td>
<td>Lise 3</td>
</tr>
<tr>
<td>2</td>
<td>Selim</td>
<td>17</td>
<td>Lise 4</td>
</tr>
</table>
<!-- Stil kodları ekleyerek tabloyu görsel olarak iyileştirebilirsiniz.-->
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 15px;
}
table {
border-collapse: collapse;
}
th {
text-align: center;
}
<!--Kullanıcının iki telefonu varsa bunun için 1 başlığa ihtiyacınız olur.Böyle durumlarda yatayda colspan kullanabilirsiniz.-->
<table>
<tr>
<th>Ad</th>
<th colspan="2">Telefon</th>
</tr>
<tr>
<td>Eda Taşçı</td>
<td>555 555 55 55 </td>
<td>333 333 33 33 </td>
</tr>
</table>
<!--Kullanıcının iki telefonu varsa bunun için 1 başlığa ihtiyacınız olur.Böyle durumlarda dik düzlemde rowspan kullanabilirsiniz.-->
<table>
<tr>
<th>Adı:</th>
<td>Adem Büyük</td>
</tr>
<tr>
<th rowspan="2">Telefon:</th>
<td>111 111 11 11</td>
</tr>
<tr>
<td>222 222 22 22</td>
</tr>
</table>Yayma, tablo satırlarını ve sütunlarını diğer birden çok satıra ve sütuna genişletmenize olanak tanır.
Normalde, bir tablo hücresi başka bir tablo hücresinin altındaki veya üzerindeki boşluğa geçemez. Ancak, bir tabloda birden çok satıra veya sütuna yaymak için rowspan veya colspan özniteliklerini kullanabilirsiniz .
Colspan yatay olarak yaymak için rowspan dikey olarak yaymak
Tablolar tüm siteyi oluştururken kullanılmamalıdır. Belli bir bilgi alanına veri göstermek için kullanılmalıdır. Diğer türlü siteni yavaş açılır ve tasarım süreçleriniz zorlaşır.
Web Tasarım Ajansı