HTML Tablo - Uzmanim Akademi

uzmanimAkademi ❯ HTML CSS JAVASCRIPT ANGULAR

HTML Öğren

HTML Genel HTML Giriş HTML Editörler HTML Temeller HTML Element HTML Öznitelik HTML Başlık HTML Paragraf HTML Stil HTML Metin Biçimlendirme HTML Alıntı HTML Yorum HTML Renk HTML CSS HTML Link HTML Resim HTML Tablo HTML Listeler HTML Blok ve Satiriçi HTML Class Özniteliği HTML iFrame HTML JavaScript HTML Dosya Yolu HTML Head HTML Düzeni HTML Responsive HTML Tablo ❮ Önceki Sonraki ❯

HTML Tablo Örneği

 

Ad	Soyad	Puan
Ali	Veli	50
Ayse	Hece	94
Mehmet	Pek	67
Ece	Sak	35

HTML ile Tablo Oluşturmak

Bir HTML tablosu <table> etiketi ile oluşturulur.

Tablonun her satırı <tr> etiketi ile oluşturulur.

Tablo içindeki hücre <td> etiketi ile oluşturulur.

Tablo içindeki başlık alanları <th> etiketi ile oluşturulur.

Örnek

<table style="width:100%"> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>Veli</td> <td>50</td> </tr> <tr> <td>Hakan</td> <td>Pek</td> <td>94</td> </tr> <tr> <td>Cem</td> <td>Cuma</td> <td>80</td> </tr> </table>

Kendin Dene »

Not:

<td>elementi tablo içinde veri yerleştirilecek alanlardır.

Bu alanlar içine resim, yazı, liste veya başka bir tablo yerleştirilebilir.

HTML Tablo - Tabloya Kenar Çizgisi Eklemek

Tabloyu oluşturduğunuzda eğer border yani sınır çizgisi özelliğini ayarlamazsanız, tablonun çerçevesiz bir yapısı olduğunu fark edeceksiniz.

Bir tabloya sınır çizgisi oluşturmak için CSS border özelliğinden faydalanırız.

Örnek

table, th, td { border: 1px solid black; }

Kendin Dene »

HTML Tablo - Kenar Çizgisini Birleştirmek

Dikkat ettiyseniz tablonun kenar çizgisi iki çizgiden oluşur.

Genelde bu istenen bir özellik değildir.

CSS border-collapse özelliği bir bu ikili çizgi tek çizgi yapılabilir:

Örnek

table, th, td { border: 1px solid black; border-collapse: collapse; }

Kendin Dene »

HTML Tablo - Hücrelere İç Boşluk Eklemek (Padding)

Hücre içindeki veri ile kenar çizgisi arasındaki boşluk CSS padding özelliği ile yapılır.

Eğer padding değerini belirtmezseniz, tablonun içindeki hücreler ile veriler arasında boşluk olmaz.

Örnek

th, td { padding: 15px; }

Kendin Dene »

HTML Tablo - Başlıkları Sola ya da Sağa Yaslamak

Varsayılan olarak tablo başlıkları içindeki metinler ortalanmış olarak gelir.

Başlık içindeki yazıyı sağa ya da sola yaslamak için CSS text-align özelliği kullanılır.

text-align:left yazıyı sola yaslar.

text-align:right yazıyı sağa yaslar.

Örnek

th { text-align: left; }

Kendin Dene »

HTML Tablo - Hücre Dışına Boşluk Vermek

Tablo hücrelerinin dışına boşluk vermek için CSS border-spacing özelliği kullanılır.

Bu özellik hücreler arasında boşluk oluşturur.

Örnek

table { border-spacing: 10px; }

Kendin Dene »

Not: Eğer border-collapse özelliği kullanılırsa border-spacing özelliğinin etkisi görülemez.

HTML Tablo - Hücre Birleştirme

Tablo içindeki birkaç hücreyi birleştirmek mümkündür.

Tablo içindeki hücreleri birleştirmek için colspan özniteliği kullanılır.

Örnek

<table style="width:100%"> <tr> <th>Ad</th> <th colspan="2">Telefon</th> </tr> <tr> <td>Ali</td> <td>2425566</td> <td>4440232</td> </tr> </table>

Kendin Dene »

HTML Tablo - Satırları Birleştirmek

Tablo içindeki birkaç satırı birleştirmek mümkündür.

Tablo içindeki satırları birleştirmek için rowspan özniteliği kullanılır.

Örnek

<table style="width:100%"> <tr> <th>Ad</th> <td>Ali Veli</td> </tr> <tr> <th rowspan="2">Telefon</th> <td>23344554</td> </tr> <tr> <td>55566778</td> </tr> </table

Kendin Dene »

HTML Tablo - Tabloya Başlık Eklemek

HTML tabloya başlık eklemek için <caption> etiketi kullanılır.

Örnek

<table style="width:100%"> <caption>Öğrenciler</caption> <tr> <th>Ad</th> <th>Soyad</th> </tr> <tr> <td>Ali</td> <td>Veli</td> </tr> <tr> <td>Cem</td> <td>Tem</td> </tr> </table>

Kendin Dene »

Not:<caption> etiketi <table> etiketinden hemen sonra kullanılmalıdır.

 

❮ Önceki Sonraki ❯

Anlamadığınız bir konu mu var?

Konu ile ilgili sorunuzu uzmanim.net'e sorabilirsiniz: uzmanim.net'e sor!

AD

AD