Programlama

HTML tablo temelleri

table, tr, td, th, colspan ve rowspan.

Tüm dersler · HTML dersleri: sıfırdan öğren

Tablonun temel elemanları

Tablo <table> ile başlar; her satır <tr>, normal hücre <td>, başlık hücresi <th> ile yazılır. Tablolar yalnızca tablo biçimindeki veriler içindir, sayfa düzeni için değil.

<table>
  <caption>Weekly plan</caption>
  <tr><th>Day</th><th>Task</th></tr>
  <tr><td>Mon</td><td>HTML</td></tr>
  <tr><td>Tue</td><td>CSS</td></tr>
</table>

colspan ve rowspan

Bir hücre birkaç sütuna yayılacaksa colspan, birkaç satıra yayılacaksa rowspan kullanılır. Sayı kaç hücrenin birleştiğini belirtir.

<table>
  <tr><th colspan="2">Prices</th></tr>
  <tr><td>Tea</td><td>1.00</td></tr>
  <tr><td rowspan="2">Cake</td><td>3.50</td></tr>
  <tr><td>4.00</td></tr>
</table>

Yapı ve erişilebilirlik

Uzun tabloları <thead>, <tbody> ve <tfoot> ile bölümlere ayır. <th> üzerinde scope="col" veya scope="row" yazmak, ekran okuyucuya başlığın neye ait olduğunu söyler. <caption> tabloya ad verir.

<table>
  <caption>Scores</caption>
  <thead><tr><th scope="col">Name</th><th scope="col">Points</th></tr></thead>
  <tbody>
    <tr><th scope="row">Aysel</th><td>92</td></tr>
    <tr><th scope="row">Murad</th><td>88</td></tr>
  </tbody>
</table>
  • Görünümü (kenarlık, renk) CSS ile ver, HTML öznitelikleriyle değil.

Yazar: Nibras Code