Perşembe , 19 Ekim 2017
Anasayfa » WEB » HTML » HTML Tablolar

HTML Tablolar

Aşağıda  örneği görülen HTML türden tablolar oluşturulabilir.

Şirket Ad Soyad Telefon
Wordy GSM Ahmet ÖZSOY +90 505 555 55 55
VoiceData LTD Mehmet KILIÇ +90 545 757 77 77
Kestel A.Ş Murat ÖZTÜRK +90 515 844 44 44
Sportif A.Ş Özay BAYRAK +90 585 212 22 22

 

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

 

Hakkında Recep ORTAKÖYLÜ

İlginizi Çekebilir

HTML Label Kullanımı

Form kontrolleri için başlık bilgisini temsil etmek için kullanılmaktadır. Etiket içindeki yazıya tıklandığında form kontrolleri …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir