HTML Tablo Örnekleri – Tasarım Kodlama
HTML

HTML Tablo Örnekleri

Bazı içerikler, bir tabloda sunulması doğal olarak uygundur. Çoğu kişi de tabloları sever, çünkü içeriği hızlıca taramak ve almak kolaydır. Bu bölümde HTML’de tabloların nasıl oluşturulacağını örneklerle öğreneceksiniz.

Tabloyu görüntüleme

Bir tablo, HTML’de oluşturulacak karmaşık öğelerden biridir. Bir araya gelmeleri için çok sayıda etikete ihtiyacınız var. Aşağıda göreceğiniz gibi birkaç farklı varyasyon var ancak temel düzen aşağıdaki gibidir:

Çıktı:

HTML Tablo Örnekleri 1

HTML Tablo Örnekleri 1

Yukarıdaki kod, bir satıra (tr) sahip bir tablo üretir. Satır içinde, tablo verisi (td) etiketleriyle belirtilen iki sütun veya iki hücre vardır.

Tablonuzda istediğiniz her satır için başka bir tr etiket çifti ekleyin. Her satır daha sonra içinde gereken sayıda td etiketine sahip olabilir.

td‘yi, başlıklar olmak istediğimiz hücreler için th ile değiştirebiliriz.

İşte bir örnek:

Çıktı:

HTML Tablo Örnekleri 2

HTML Tablo Örnekleri 2

Satırları Gruplandırma

Yukarıda tanımlandığı gibi standart bir tablo, bir dizi satır ve sütun içeren bir varlıklar oluşturur. HTML’nin içeriği tanımlaması beklenir ve bir tablonun farklı bölümlere sahip olması nadir değildir. Normalde üstte sütunlarımız için başlıklar, sonra ortada içerik ve altta bir özet bulunur. Bunu yansıtmak için bir tabloyubir tablo başı (thead), bir tablo gövdesi (tbody) ve tablo altlığı (tfoot) olarak ayırabiliriz.

İşte bir örnek:

Çıktı:

HTML Tablo Örnekleri 3

HTML Tablo Örnekleri 3

 

Colspan niteliği

Bazen bir hücrenin birkaç sütuna bölmek isteye bilirsiniz. Bunun için colspan niteliğini kullanırız. Colspan, bir hücreyi birkaç sütun üzerinde uzatmamızı sağlar.

Yazımı: aşağıdaki kod bir hücreyi 3 hücrelik olacak şekilde uzatır.

İşte örnek:

rowspan niteliği

rowspan, bir hücrenin birkaç satır boyunca genişlemesini sağlar.

Yazımı: Aşağıdaki kod bir ücreyi aşağı doğru 3 hücrelik uzatır.

İşte örnek:

Özet

<table> </table>
Tablo oluşturur.
<tr> </tr>
Satır oluşturur.
<th> </th>
Başlık hücresi oluşturur.
<td> </td>
Hücre oluşturur.
<thead> </thead>
Tablo başlığı oluşturur.
<tbody> </tbody>
Tablo gövdesi oluşturur.
<tfoot> </tfoot>
Tablo sonu oluşturur.
<td colspan=”3″> </td>
Tabloyu 3 hücre genişletir.
<td rowspan=”3″> </td>
Tabloyu 3 hücre uzatır.

HTML Tablo Örnekleri

Yukarıdaki açıklama ve örneklerin dışında table ve css ile yapılmış diğer örnekler de şunlardır.

HTML Tablo Örnekleri 5:

Çıktı:

HTML Tablo Örnekleri 5

HTML Tablo Örnekleri 5

 

HTML Tablo Örnekleri 6:

Çıktı:

HTML Tablo Örnekleri 6

HTML Tablo Örnekleri 6

 

HTML Tablo Örnekleri 7:

Çıktı:

HTML Tablo Örnekleri 7

HTML Tablo Örnekleri 7

 

HTML Tablo Örnekleri 8:

Çıktı:

HTML Tablo Örnekleri 8

HTML Tablo Örnekleri 8

 

 

Yorum bırak