En son web geliştirme öğreticiler

HTML Tablolar

❮ Önceki Sonraki Bölüm ❯

HTML Tablo Örneği

Numara İsim Soyadı makas
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

HTML Tabloları Tanımlama

Örnek

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Kendin dene "

Örnek açıklanmıştır:

Tablolar ile tanımlanır <table> etiketi.

Tablolar ile tablo satırları ayrılır <tr> etiketi.

Tablo satırları ile tablo verileri ayrılır <td> etiketinin.

Bir tablo satırı ayrıca tablo başlıkları ayrılabilir <th> etiketi.

Tablo veriler <td> tablosunun veri kaplardır.
Bunlar metin, resim, listeler, diğer tablolar, vb gibi HTML öğelerinin her türlü içerebilir

Bir Sınır Özelliğine Sahip Olan Bir HTML Tablo

Eğer tablo için bir sınır belirtmezseniz, bu sınırları olmayan görüntülenecektir.

Bir sınır kullanılarak eklenebilir border niteliğini:

Örnek

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Kendin dene "

border nitelik HTML standardı dışına yolda! CSS kullanmak daha iyidir.

Sınırları eklemek için, CSS sınır özelliğini kullanın:

Örnek

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

Masa ve tablo hücrelerinin her ikisi için de sınırlarını tanımlamak unutmayın.

Daraltılmış Sınır ile bir HTML Tablo

İsterseniz sınırları, tek sınır içine çökmeye CSS eklemek için border-collapse :

Örnek

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

Hücre Dolgu ile bir HTML Tablo

Hücre dolgusu hücre içeriği ve sınırları arasındaki boşluğu belirtir.

Eğer bir dolgu belirtmezseniz, tablo hücreleri padding'siz görüntülenecektir.

Dolgu ayarlamak için kullanın CSS padding özelliği:

Örnek

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
Kendin dene "

HTML Tablo Başlıklar

Tablo başlıkları ile tanımlanır <th> etiketi.

Varsayılan olarak, tüm büyük tarayıcılar tablo başlıkları olarak cesur ve ortalanmış görüntüler:

Örnek

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Kendin dene "

Tablo başlıkları sola hizalamak için kullanmak CSS text-align özelliğini:

Örnek

th {
    text-align: left;
}
Kendin dene "

Sınır Aralığı ile bir HTML Tablo

Sınır aralık hücreleri arasındaki boşluğu belirtir.

Bir tablo için sınır boşluğunu ayarlamak için, kullanmak CSS border-spacing özelliğini:

Örnek

table {
    border-spacing: 5px;
}
Kendin dene "

tablo sınırları çöktü ise border-spacing etkisi yoktur.

Birçok Sütun aş Tablo Hücreleri

Bir sütun daha bir hücre aralığını yapmak için kullanın colspan niteliğini:

Örnek

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
Kendin dene "

Çok sayıda satır aş Tablo Hücreleri

Bir satırda daha bir hücre aralığını yapmak için kullanın rowspan niteliğini:

Örnek

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
Kendin dene "

Bir Caption ile bir HTML Tablo

Bir tabloya başlık eklemek için kullanın <caption> etiketi:

Örnek

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Kendin dene "

<caption> etiketi hemen sonra takılmalıdır <table> etiketi.

Bir Tablo için Özel Stil

Özel bir tablo için özel bir stil tanımlamak için, bir ekleme id tabloya niteliğini:

Örnek

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Şimdi bu tablo için özel bir stil tanımlayabilirsiniz:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
Kendin dene "

Ve daha stilleri ekleyin:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
Kendin dene "

Bölüm özeti

  • HTML'yikullanın <table> bir tablo tanımlamak için eleman
  • HTML kullan <tr> bir tablo satırını tanımlamak için eleman
  • HTML kullan <td> bir tablo verileri tanımlamak için eleman
  • HTML'yikullanın <th> öğesi bir tablo başlığı tanımlamak için
  • HTML kullan <caption> bir tablo başlığını tanımlamak için eleman
  • CSS kullanın border bir sınır belirtmek için özellik
  • CSS kullanın border-collapse hücre sınırlarını daraltmak için özellik
  • CSS kullanın padding hücrelere dolgu eklemek için özellik
  • CSS kullanın text-align hücre metni hizalama özelliği
  • CSS kullanın border-spacing hücreleri arasındaki boşluğu ayarlamak için özellik
  • Kullanım colspan bir hücre aralığı sayıda sütun yapmak niteliği
  • Kullanım rowspan bir hücre aralığı sayıda satır yapmak niteliği
  • Kullanım id benzersiz bir tablo tanımlamak için öznitelik

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»

HTML Tablo Etiketler

Etiket Açıklama
<table> Bir tablo tanımlar
<th> Bir tablodaki bir başlık hücre tanımlar
<tr> Bir tablodaki bir satır tanımlar
<td> Bir tablodaki bir hücreyi tanımlar
<caption> Bir tablo başlığını tanımlar
<colgroup> biçimlendirme için bir tabloda bir veya daha fazla sütun bir grup belirtir
<col> Bir dahilinde her sütun için sütun özelliklerini belirtir <colgroup> elemanı
<thead> Gruplar bir tablo içinde bir başlık içeriği
<tbody> Gruplar bir tablo içinde vücut içerik
<tfoot> Gruplar bir tablo içinde altbilgi içeriği

❮ Önceki Sonraki Bölüm ❯