HTML Tablolar – Tablo Ekleme – Bilişim & Programlama
HTML

HTML Tablolar – Tablo Ekleme

HTML tabloları, web geliştiricilerinin verileri satırlar ve sütunlar halinde düzenlemesine olanak tanır.

Bir HTML tablosu <table>..</table> etiketleri arasında tanımlanır. Fakat <table> etiketi tek başına tablo tanımlamak için yeterli değildir. Tablodaki satırlar(<tr>) ve satırların içindeki hücreleri (<td>,<th>) tanımlamak için bir kaç tane daha etikete ihtiyaç duyulmaktadır.

Daha önce excel tablolar ile çalıştıysanız, excel tablolarda satırlar, sütünların kesişinine hücre denildiğini duymuşsunuzdur. HTML’de hücreleri satır, sütunların kesişimi diye ifade etmek mümkün değildir.

HTML Tablo Oluşturma

<table>: table etiketi tablonun dış çerçevesini oluşturmak için kullanılır. Tablo tanımlamak, tablonun ekranda görünmesi için yeterli olmaz. border değeri verilerek tablodaki nesnelere kenarlık verilebilir.

 

tr: Tablo içindeki satırları ifade etmek için kullanılan etikettir. Hücreleri bu etiket içine yerleştiriz.

td: satırlar içindeki hücreleri ifade etmek için kullanılır.

th:satırlar içindeki hücreleri ifade etmek için kullanılır. td etiketinden farklı olarak bu hücrelerdeki veriler genellikle başlık olarak kullanılır.Varsayılan stili kalın ve ortalıdır.

Yukarıdaki tabloyunun son şekli aşağıdaki kodlarla tamamlanacaktır.

 

 

Tablodan hücre silinirse Ne Olur?

Tablo içinden bir hücre silinirse görüntüde silinecektir. Silinen hücre tabloda boşluk oluşmasına neden olacaktır.

 

Hücre genişletme (ColSpan)

Yukarıdaki resim ile devam edelim. Tablodaki bazı hücrelerin diğerlerinden daha geniş olması gerekebilir. Hücreleri uzatmak için ColSpan niteliğine kaç hücrelik genişletileceği girilir. yazilimbilisim.net

Hücre Kaydırma(rowspan)

Hücrelerinin bir alt hücreye uzatılması yada bir alt satırla birleştirilmesi anlamına gelen kavram olarak açıklayabiliriz. rowspan kullanılırken dikkat edilmesi gereken en önemli nokta uzatılan hücrenin alt satırlarda boşluk oluşturacağıdır. Bu nedenle hücre uzatma işlemi yapıldıktan sonra alt satırlardaki fazlalık olan hücreler silinmesi gerekir. Hücreler silinmezse alt satırlardaki hücrelerin sayısı fazla olacağı için tablo genişletilecek ve tablonun sonunda boşluklar oluşacaktır. Animasyonda göründüğü gibi 90 değeri olan hücre silinmezse belirli bir boşluk oluşmasına neden olmaktadır.

 


 

Tablo Örnekleri ve Tablo kavramı ile ilgili diğer açıklamalar

  • Table Border

Kenarlılık Eklemek isterseniz aşağıdaki stil tanımlaması HTML dökümamınıza eklemelisiniz. Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.

  • Border Spacing

  • Cell Padding

Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır. yazilimbilisim.net

untitled-2

th, td {
padding: 15px;
}

  • ColSpan

Sütun düzeyinde hücre birleştirmek için kullanılır.

  • RowSpan

Satır düzeyinde hücre birleştirmek için kullanılır.

  • Caption

Tablonuza bir başlık satırı eklemek için kullanılır. yazilimbilisim.net

 

Yorum yap

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d blogcu bunu beğendi: