HTML'de Tablolar: HTML'de Tablo Oluşturma ve Biçimlendirme Kılavuzu

Tablo, verileri satırlar ve sütunlarla yapılandırılmış bir biçimde görüntülemek için HTML'de önemli bir bileşendir. HTML'de tablolar <table>, <tr> ve <td> etiketleri kullanılarak oluşturulur.

<table> etiketi, tüm satırları ve sütunları içeren ana tablo kapsayıcısını temsil eder. Satırlar <tr>(tablo satırı) etiketi kullanılarak, satırların içindeki hücreler ise <td>(tablo verileri) etiketi kullanılarak tanımlanır. Ek olarak, tablonun başlık hücrelerini tanımlamak için <th>(tablo başlığı) etiketini kullanabilirsiniz.

Tablodaki hücreleri birleştirmek veya hücreleri birden çok satır ve sütuna yaymak için colspan ve rowspan gibi öznitelikleri kullanabilirsiniz. Ayrıca, tablonun görünümünü ve düzenini özelleştirmek için CSS özelliklerini uygulayabilirsiniz.

Tablo( <table>)

- <table> Öğe, HTML'de bir tablo oluşturmak için kullanılır.

<tr>- Veriler satırlara() ve sütunlara( <td> veya) yerleştirilir <th>.

<td>- Her veri hücresi,(veri hücresi) veya <th>(başlık hücresi) öğelerinin içine yerleştirilir .

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Sütun Başlığı( <th>)

- <th> Öğe, bir tabloda sütun başlıkları oluşturmak için kullanılır.

- Genellikle tablonun ilk satırına yerleştirilir.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

Veri Satırları( <tr>):

- <tr> Öğe, bir tabloda veri satırları oluşturmak için kullanılır.

- Veri hücreleri( <td>) veya başlık hücreleri() bu elemanların <th> içine yerleştirilir. <tr>

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Sütun Genişletme( colspan)

Nitelik, colspan bir veri hücresinin veya başlık hücresinin tabloda yayılacağı sütun sayısını belirlemek için kullanılır.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

Satır Genişletme( rowspan)

Nitelik, rowspan bir veri hücresinin veya başlık hücresinin tabloda yayılacağı satır sayısını belirlemek için kullanılır.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

Hücreleri Birleştirme( colspan ve rowspan)

Tablodaki hücreleri birleştirmek için hem nitelikleri colspan hem de nitelikleri birleştirebilirsiniz. rowspan

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

border mülk

- border Özellik, tablo kenarlığının kalınlığını belirtir.

- değeri, border negatif olmayan bir tam sayıdır.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

cellpadding mülk

-, cellpadding Özellik, tablodaki hücre içeriği ile hücrenin sınırı arasındaki mesafeyi belirtir.

- değeri cellpadding negatif olmayan bir tam sayıdır

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

cellspacing mülk

- cellspacing Özellik, tablodaki hücreler arasındaki aralığı belirtir.

- değeri, cellspacing negatif olmayan bir tam sayıdır.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

Bu nitelikler ve öğeler, ihtiyaçlarınıza göre HTML'de tablolar oluşturmanıza ve özelleştirmenize olanak tanır. Verileri web sitenizde net ve düzenli bir şekilde görüntülemek için bunları kullanabilirsiniz.