HTML tablo yapısı, verilerin düzenli bir şekilde sunulmasını sağlamak için kullanılan etkili bir araçtır. Tablo yapısı, başlık, satır ve sütunlardan oluşur ve kolayca özelleştirilebilir.

Bir HTML tablosu oluşturmak için aşağıdaki adımları izleyebilirsiniz:

1. İlk olarak, <table> etiketini kullanarak bir tablo elemanı oluşturun.
2. Tablonun başlığını oluşturmak için <thead> etiketini kullanın. Bu etiket, tablo başlığını içeren bir satır oluşturmanızı sağlar.
3. Tablonun satırlarını oluşturmak için <tr> etiketini kullanın.
4. Her satırda, sütun başlıklarını oluşturmak için <th> etiketini kullanın. Bu etiket, sütun başlığını içeren bir hücre oluşturmanızı sağlar.
5. Veri hücrelerini oluşturmak için <td> etiketini kullanın. Bu etiket, veri hücresini içeren bir hücre oluşturmanızı sağlar.

Bu adımları izledikten sonra, HTML tablonuz hazır olacaktır. Tabloyu özelleştirmek için CSS kodlarını kullanabilirsiniz. Tablonun genel görünümünü değiştirmek için tabloya sınıf veya id öznitelikleri ekleyebilirsiniz. Ayrıca, tablonun satır ve sütunlarını da düzenleyebilirsiniz.

HTML tabloları, verileri organize etmek ve sunmak için etkili bir yöntemdir. Bu nedenle, tablo yapısını öğrenmek ve kullanmak önemlidir.

Tablo Oluşturma

Tablo Oluşturma

Bir HTML tablosu oluşturmak için aşağıdaki adımları izleyebilirsiniz:

1. Tablo Etiketi Oluşturma: Tablonun başlangıcı için <table> etiketini kullanın. Bu etiketi açarken tablonun stilini de dahil edebilirsiniz, örneğin: <table style="width:100%">.
2. Satır Etiketi Oluşturma: Her satırı oluşturmak için <tr> etiketini kullanın. Bu etiketi açarken satırın stilini de belirleyebilirsiniz, örneğin: <tr style="background-color:#f2f2f2">.
3. Hücre Etiketi Oluşturma: her hücreyi oluşturmak için <td> etiketini kullanın. Her hücreyi bu etiketle açıp kapatabilirsiniz, örneğin: <td>Hücre 1</td>. Bu şekilde istediğiniz kadar hücre ekleyebilirsiniz.
4. Başlık Etiketi Oluşturma: Tablonun başlığını oluşturmak için başlık etiketi olan <th> kullanın. Her başlık hücresini bu etiketin içerisine yerleştirin, örneğin: <th>Başlık 1</th>.
5. Kapatma Etiketlerini Ekleyin: Satır etiketi olan <tr> ve tablo etiketi olan <table> etiketlerini kapatmayı unutmayın, örneğin: </tr> ve </table>.

Bu adımları izleyerek, tablonuzu dilediğiniz gibi oluşturabilir ve içerisine veri ekleyebilirsiniz. Tablonun daha iyi görünmesi için CSS kullanabilir veya diğer tablo özelliklerini de kullanabilirsiniz. HTML tabloları sayesinde verilerinizi düzenli bir şekilde sunabilir ve kullanıcıların bilgilerinize kolayca erişmesini sağlayabilirsiniz.

Tablo Başlıkları

Bir HTML tablosu oluştururken, tablonun başlıklarını belirtmek için özel etiketler kullanılır. Tablo başlıkları, kullanıcıya tablonun içeriği hakkında ön bilgi veren kısa açıklamalardır. Bu başlıklar ayrıca sıralama, filtreleme veya diğer tablo işlemleri için kullanılabilir.

Tablo başlıklarını oluşturmak için <th> etiketi kullanılır. Bu etiketler tabloda bir veya daha fazla hücreyi kapsayabilir. Başlık hücreleri normal hücrelerden farklı olarak bold olarak vurgulanır ve genellikle tablonun ilk satırında yer alır.

Örneğin, aşağıdaki gibi bir tablo başlığı oluşturabilirsiniz:

<table>   <tr>      <th>Adı</th>      <th>Soyadı</th>      <th>Yaş</th>   </tr>   <tr>      <td>Ali</td>      <td>Yılmaz</td>      <td>25</td>   </tr>   <tr>      <td>Ayşe</td>      <td>Demir</td>      <td>32</td>   </tr></table>

Bu örnekte, tablonun ilk satırı <tr> etiketi içinde yer alır ve başlıklar <th> etiketi ile belirtilir. Geri kalan satırlar ise normal veri hücreleri olarak <td> etiketi ile oluşturulur.

Tablo Hücreleri

Tablo Hücreleri

HTML tablolarında hücreleri oluşturmak ve içine veri eklemek için çeşitli etiketler kullanılır. Tablo hücrelerini oluşturmanın en temel etiketi <td> etiketidir. Bu etiket, bir hücreyi tanımlar ve içine veri eklemek için kullanılır.

Örneğin, aşağıdaki kod bloğunda, bir HTML tablosunun içindeki hücreleri oluşturmak ve veri eklemek için <td> etiketi kullanılmıştır:

<table>  <tr>    <td>Veri 1</td>    <td>Veri 2</td>    <td>Veri 3</td>  </tr>  <tr>    <td>Veri 4</td>    <td>Veri 5</td>    <td>Veri 6</td>  </tr></table>

Bu kod bloğunda, her satırın içinde üç hücre bulunmaktadır. Her hücre, <td> etiketi ile tanımlanır ve içine veri eklemek için arasına yazılmıştır.

Ayrıca, tabloda başlık hücreleri kullanmak isterseniz, <th> etiketini kullanabilirsiniz. Başlık hücreleri genellikle tablonun ilk satırında yer alır ve genellikle yatay hücre boyunca hizalanır.

Bu örnekte, <th> etiketi kullanılarak tablo başlığı hücreleri tanımlanmıştır:

<table>  <tr>    <th>Başlık 1</th>    <th>Başlık 2</th>    <th>Başlık 3</th>  </tr>  <tr>    <td>Veri 1</td>    <td>Veri 2</td>    <td>Veri 3</td>  </tr></table>

Bu şekilde, tabloya başlık hücreleri ekleyerek, tablonun daha iyi anlaşılmasını ve organize olmasını sağlayabilirsiniz.

Bu etiketlerin kullanımı, tablonun düzenini belirler ve içine veri eklenmesine olanak sağlar, böylece tarayıcılar tarafından doğru şekilde görüntülenebilir.

Hücre Kapsamı

Hücre Kapsamı

HTML tablolarında hücreleri birleştirmek ve kapsam belirtmek için bazı etiketler kullanılır. Bu etiketler, tablodaki hücreleri daha düzenli bir şekilde göstermek ve içeriğin doğru biçimde görüntülenmesini sağlamak için önemlidir.

rowspan ve colspan etiketleri, hücrelerin nasıl birleştirileceğini belirlemek için kullanılır. rowspan, bir hücrenin kaç satırı kapsayacağını belirtirken, colspan ise bir hücrenin kaç sütunu kapsayacağını belirtir.

Örneğin, aşağıdaki tabloyu ele alalım:

Bu tabloda, “Fiyatlar” başlığı, iki sütunu kapsayan bir hücre olan colspan etiketiyle oluşturulmuştur. Aynı şekilde, “Telefon” hücresi de rowspan etiketiyle iki satırı kapsamaktadır.

Hücre kapsamları, HTML tablolarını daha anlaşılır ve düzenli bir hale getirmek için kullanışlı bir araçtır. Doğru bir şekilde kullanıldığında, tablo içindeki verilerin anlaşılması ve okunması daha kolay olacaktır.

Hücre Birleştirme

Hücre birleştirme işlemi, HTML tablosunda birden fazla hücreyi birleştirerek tablonun yapısını belirlemek için kullanılan önemli bir işlemdir. Bu işlem, tablonun daha düzenli ve anlaşılır bir şekilde sunulmasını sağlar.

Birleştirilecek hücrelerin belirlenmesi için rowspan ve colspan özelliklerinden yararlanılır. Rowspan özelliği, hücreyi birden fazla satıra genişletirken, colspan özelliği ise hücreyi birden fazla sütuna genişletir.

Örneğin, aşağıdaki gibi bir tabloya sahip olduğumuzu düşünelim:

Yukarıdaki örnekte, colspan="2" özelliği İletişim Bilgileri başlığını iki sütuna genişletirken, rowspan="2" özelliği de John adlı kişinin hücresini iki satıra genişletir.

Bu şekilde hücre birleştirme işlemi yapılarak tablonun daha düzenli ve anlaşılır bir şekilde sunulması sağlanabilir. Hücre birleştirme işlemi, HTML tablolarını daha etkili bir şekilde kullanmamızı sağlar.

Tablo Verileri

Tablo Verileri

HTML tablolarında veri eklemek için <tr> etiketi kullanılır. Bu etiket, tabloya yeni bir satır ekler. Satırın içine verileri eklemek için ise <td> veya <th> etiketleri kullanılır.

<td> etiketi, normal tablo hücrelerinde kullanılırken, <th> etiketi tablonun başlıklarında kullanılır. Bu etiketler, tablonun düzgün görünümünü sağlamak için kullanılır ve hücrelere içerik eklenmesini sağlar.

Yukarıdaki örnekte, bir tablonun içerisine öğrenci adları ve aldıkları notlar eklenmiştir. Tablonun başlıkları <th> etiketi kullanılarak oluşturulmuş, veriler ise <td> etiketi ile eklenmiştir.

Tablonun içindeki verileri daha düzenli hale getirmek için tablo hücrelerini birleştirmek de mümkündür. Bu durumda colspan ve rowspan özelliklerini kullanabilirsiniz. Bu özellikler, belirli hücreleri diğer hücrelerle birleştirmenize olanak sağlar.

Aşağıda verilen örneklerde, colspan özelliği kullanılarak bir hücrenin birden fazla sütunu kaplaması sağlanmıştır.

Yukarıdaki örnekte, “Notlar” başlığı colspan="2" özelliği ile iki sütunu kaplamaktadır. Bu sayede tablonun yapısı daha anlaşılır hale gelmiştir.

Tablo Stilleri

Tablo Stilleri

HTML tablolarınızın görünümünü düzenlemek için CSS kullanabilirsiniz. CSS, Cascading Style Sheets’in kısaltmasıdır ve web sayfalarına stil ve düzen katmaya yardımcı olur. Tabloları özelleştirmek için bazı CSS özelliklerini kullanabilirsiniz.

Aşağıda, tablolarınıza nasıl stil ekleyeceğinizi ve görünümlerini nasıl değiştirebileceğinizi gösteren bazı örnekler bulunmaktadır.

Yukarıdaki örnekler, tablolarınıza uygulayabileceğiniz sadece birkaç CSS özelliğidir. CSS kullanarak tablolarınızı istediğiniz gibi özelleştirebilir ve görsel olarak daha çekici hale getirebilirsiniz. Daha fazla CSS özelliği ve detaylı kullanımları öğrenmek için CSS dokümantasyonuna göz atabilirsiniz.

Satır ve Sütun Stilleri

Satır ve Sütun Stilleri

Tablo oluştururken, tablonun satır ve sütunlarını düzenlemek, onlara farklı stiller vermek mümkündür. CSS (Cascading Style Sheets) kullanarak tablodaki satır ve sütunların görünümünü kolayca düzenleyebiliriz.

Bir tablonun satır ve sütunlarını düzenlemek için şu CSS özelliklerini kullanabiliriz:

Satır ve sütun stillerini belirlemek için tablo etiketlerine veya tabloya sınıf veya id atayabiliriz. Ardından CSS dosyasında bu sınıfları veya id’leri kullanarak istediğimiz stillemeleri yapabiliriz.

Örneğin, tablonun tek satırını sarı arka plan rengine, metin rengini beyaz yapmak ve hizalamayı ortalamak istiyorsak, aşağıdaki CSS kodunu kullanabiliriz:

      .sari-satir {      background-color: yellow;      color: white;      text-align: center;    }  

Tablo etiketine “class” atribütü ile “sari-satir” değerini eklersek, o satıra bu stil uygulanır.

Satır ve sütun stillemeleri, tabloya daha profesyonel ve göze çarpıcı bir görünüm kazandırabilir. CSS ile istediğimiz renkleri, boyutları ve hizalamaları belirlemek için bu özellikleri kullanabiliriz.

Tablo Kenarlık

HTML tablolarında görünümü düzenlemek için CSS stil kodları kullanılır. Tablonun kenarlık ve çizgi özelliklerini belirlemek için çeşitli stil kodları kullanılabilir. İşte tablo kenarlık özelliklerinin belirlenmesinde sıkça kullanılan CSS stil kodları:

Bu kodların kullanımıyla tablonun kenarlık ve çizgilerini istediğiniz şekilde özelleştirebilirsiniz. CSS stil kodlarıyla tablonun görünümünü belirlemek, kullanıcıya daha estetik bir deneyim sunar ve tablodaki verileri daha iyi anlamanızı sağlar.

Tablo Özellikleri

HTML tabloları, kullanıcıların tablolarda gezinme, sıralama ve filtreleme gibi işlemler gerçekleştirmelerini sağlamak için çeşitli özelliklere sahiptir. Bu özellikler, tablo içerisindeki verileri daha etkili bir şekilde yönetmeyi ve tabloyu kullanıcı dostu hale getirmeyi amaçlar.

Tabloda gezinme işlemi, kullanıcıların tablo içerisindeki veriler arasında kaydırma yapmalarını sağlar. Bu özellik, tabloda fazla veri bulunan durumlarda kullanıcıların istedikleri veriye daha kolay erişmelerini sağlar. Tabloda gezinme işlemi için HTML sayfalama özelliği kullanılabilir. Bu özellik sayesinde, tablo içerisindeki sayfalar arasında geçiş yapmak mümkündür. Örneğin, bir e-ticaret sitesindeki ürün tablosunda, kullanıcılar sayfalara geçerek istedikleri ürünü bulabilirler.

Sıralama işlemi, tablodaki verilerin belirli bir sıraya göre düzenlenmesini sağlar. HTML tablolarında sıralama için HTML sıralama özelliği kullanılır. Bu özellik, kullanıcılara tablodaki verileri istedikleri bir sıraya göre sıralama imkanı sunar. Örneğin, bir işletme tablosunda çalışanların isimlerine göre sıralama yaparak, çalışanların alfabetik olarak listelenmesi sağlanabilir.

Filtreleme işlemi, tablodaki verilerin belirli bir kriteri karşılayan verilerin görüntülenmesini sağlar. HTML tablolarında filtreme için HTML filtreleme özelliği kullanılabilir. Bu özellik sayesinde, kullanıcılar tablodaki verileri belirli bir kriteri karşılayan verilere göre filtreleyebilirler. Örneğin, bir müşteri tablosunda, sadece belirli bir şehirde yaşayan müşterilerin görüntülenmesi için filtreleme özelliği kullanılabilir.

Sıralama

=Tablodaki verileri sıralama işlemi için kullanılan HTML özellikleri ve örnekler.

HTML’in table etiketi sayesinde, tablodaki verileri sıralamak mümkündür. Sıralama işlemi için kullanılan bazı HTML özellikleri ve örnekler mevcuttur. Bunlar, tabloya kolaylıkla eklenebilir ve tablodaki verileri istenilen sıralamaya göre düzenlemeye yardımcı olur.

Öncelikle, sıralama işlemi için kullanılan thead etiketi ile bir tablo başlığı oluşturulur. Bu başlık, tablodaki verilerin sıralanacağı hücreleri belirtmek için önemlidir. Ardından, sıralanacak verileri içeren tbody etiketi kullanılır. Bu etiket, tablodaki verileri içeren satırların gruplandırılmasını sağlar.

Sıralama işlemi için th etiketi kullanılır. Bu etiket, tablonun başlık hücrelerini belirtir. Örneğin, bir tabloda isimlerin sıralanması gerekiyorsa, “İsim” başlığına sahip bir hücre oluşturulabilir. Verilerin sıralanacağı hücreler ise td etiketi ile oluşturulur.

Yukarıdaki örnekte, bir isim tablosu bulunmaktadır. İsim, soyisim ve yaş bilgilerini içeren hücreler sıralanabilir. Örneğin, “İsim” başlığına tıklandığında, tablodaki isimler alfabetik olarak sıralanabilir. İstenilen sıralamada veri görüntülemek için HTML özellikleri kullanılarak bu işlem gerçekleştirilebilir.

Bu şekilde, tablodaki verilerin sıralanması kolaylaşır ve kullanıcılar istedikleri düzenlemeyi yapabilir. HTML tablolarının sıralama özellikleri, verilerin düzenli bir şekilde görüntülenmesini sağlayarak bilgi okunurluğunu artırır.

Filtreleme

=Tablodaki verileri filtreleme işlemi için kullanılan HTML özellikleri ve örnekler.

HTML tablolarında verileri filtrelemek, kullanıcının istediği bilgilere daha hızlı erişimini sağlayan önemli bir işlemdir. Bu işlemi gerçekleştirmek için HTML’de bazı özellikler bulunmaktadır. İşte tablodaki verileri filtrelemek için kullanılan bazı HTML özellikleri ve örnekler:

<td rowspan="2">Bu hücre iki satıra yayıldı.</td>

<td colspan="3">Bu hücre üç sütuna yayıldı.</td>

Filtreleme işlemi için ayrıca JavaScript gibi programlama dilleri kullanılarak dinamik olarak verileri filtrelemek mümkündür. Bu şekilde kullanıcılar, tablodaki verileri istedikleri kriterlere göre filtreleyerek istedikleri sonuçlara ulaşabilirler. Örneğin, bir e-ticaret sitesinde kullanıcılar fiyata, markaya veya kategoriye göre ürünleri filtreleyebilirler.

HTML tabloları, verileri düzgün bir şekilde görüntülemek ve işlemek için önemli bir araçtır. Filtreleme işlemi sayesinde kullanıcılar, tablolar içindeki karmaşık veri setlerini daha anlaşılır hale getirebilir ve istedikleri verilere daha hızlı erişebilirler.