Html'de tablolar, uygulamalarımızda öğelerimizin düzenli görünmesi için yardımcı bir elementtir. <table></table> elementleri arasında kullanılır.
Hesap makinesinde butonların düzenli görünmesi, başvuru formlarında inputların hizalı görünmesini istiyorsak tablolardan yararlanabiliriz.
th:Table head-Tablo başlığı
td:Table data- Tablo sütunları
tr:Table row-Tablo satırları
td ile th elementi içerik olarak aynı olabilir. th elementi içerisine yazılan içerik varsayılan olarak kalın(bold) ve center (ortalanmış) halde oluşur.
Temel bir tablo örneği: 2X4 lük bir tablo
Colspan:Tablomuzda kolonları birleştirip tek bir kolon haline getirmemizi sağlar.En çok, tablodaki maksimum kolon sayısı kadar kolon birleştirebiliriz. 2x3'lük bir tabloda en fazla 3 tane kolonu birleştirebiliriz. Tırnak içine yazdığımız değer birleştirilecek kolon sayısıdır.
Colspan örneği: 3.satırdaki 4 kolon birleştirilerek tek bir kolon haline getirilmiş.
Rowspan: Tablodaki satırların birleştirilip tek bir satır haline getirmemizi sağlar. Aynı sütunda birden fazla satır varmış gibi görünür. En fazla,tablodaki maksimum satır sayısı kadar birleştirme yapabiliriz. 2x3'lük bir tabloda en fazla 2 tane satırı birleştirebiliriz. Tırnak içine yazdığımız değer birleştirilecek satır sayısıdır.
Rowspan örneği: 1.sütunda 3 satır birleştirilmiştir.
Colspan ile Rowspan bir arada kullanılabilir. Örnek bir uygulamada 4x5'lik bir tabloda rowspan'da 2 satırı, colspan'de 3 sütun birleştirdim.
Daha iyi nasıl anlayabilirim diyorsanız,satır bazlı düşünün.Her satırda 5 tane kolon var.1 satırda 5 kolon doldu.2. satırda 3 tane <td>tagı kullanmamın sebebi 1. <tr> tag'ında rowspan ile satırları birleştirdim ve 2. satırdaki 1. ve 5. sütunları doldurmuş oldum.Kaldı 3 tane sütunum, bunlar colspan ile rowspan'e maruz kalmadığı için sütunları <td> tagı kullanarak eklemiş oldum.3. ve 4. satırlar ise ilk iki satırın yansımasıdır.
Colspan için ise 1. ve 4. satırda 3 tane sütunu birleştirerek tek sütun haline getirdim bu yüzden 1. ve 4. <tr> tagları içerisinde 3 tane <td> tagı kullandım.
Hesap makinesinde butonların düzenli görünmesi, başvuru formlarında inputların hizalı görünmesini istiyorsak tablolardan yararlanabiliriz.
th:Table head-Tablo başlığı
td:Table data- Tablo sütunları
tr:Table row-Tablo satırları
td ile th elementi içerik olarak aynı olabilir. th elementi içerisine yazılan içerik varsayılan olarak kalın(bold) ve center (ortalanmış) halde oluşur.
Temel bir tablo örneği: 2X4 lük bir tablo
Colspan:Tablomuzda kolonları birleştirip tek bir kolon haline getirmemizi sağlar.En çok, tablodaki maksimum kolon sayısı kadar kolon birleştirebiliriz. 2x3'lük bir tabloda en fazla 3 tane kolonu birleştirebiliriz. Tırnak içine yazdığımız değer birleştirilecek kolon sayısıdır.
Colspan örneği: 3.satırdaki 4 kolon birleştirilerek tek bir kolon haline getirilmiş.
Rowspan: Tablodaki satırların birleştirilip tek bir satır haline getirmemizi sağlar. Aynı sütunda birden fazla satır varmış gibi görünür. En fazla,tablodaki maksimum satır sayısı kadar birleştirme yapabiliriz. 2x3'lük bir tabloda en fazla 2 tane satırı birleştirebiliriz. Tırnak içine yazdığımız değer birleştirilecek satır sayısıdır.
Rowspan örneği: 1.sütunda 3 satır birleştirilmiştir.
Colspan ile Rowspan bir arada kullanılabilir. Örnek bir uygulamada 4x5'lik bir tabloda rowspan'da 2 satırı, colspan'de 3 sütun birleştirdim.
Daha iyi nasıl anlayabilirim diyorsanız,satır bazlı düşünün.Her satırda 5 tane kolon var.1 satırda 5 kolon doldu.2. satırda 3 tane <td>tagı kullanmamın sebebi 1. <tr> tag'ında rowspan ile satırları birleştirdim ve 2. satırdaki 1. ve 5. sütunları doldurmuş oldum.Kaldı 3 tane sütunum, bunlar colspan ile rowspan'e maruz kalmadığı için sütunları <td> tagı kullanarak eklemiş oldum.3. ve 4. satırlar ise ilk iki satırın yansımasıdır.
Colspan için ise 1. ve 4. satırda 3 tane sütunu birleştirerek tek sütun haline getirdim bu yüzden 1. ve 4. <tr> tagları içerisinde 3 tane <td> tagı kullandım.
Yorumlar
Yorum Gönder