Tabel HTML dan Contohnya

Petik.net - Table HTML adalah elemen HTML yang digunakan untuk membuat tabel data. Setiap tabel terdiri dari baris dan kolom, di mana masing-masing kolom memiliki header dan beberapa baris data.

Berikut ini adalah contoh kode HTML untuk membuat tabel:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

Penjelasan kode:

• <table> adalah elemen HTML yang menandakan bahwa ini adalah sebuah tabel.
• <tr> adalah elemen yang menandakan sebuah baris dalam tabel.
• <th> adalah elemen yang menandakan sebuah header kolom.
• <td> adalah elemen yang menandakan sebuah sel dalam tabel.

Anda bisa menambahkan atribut seperti border atau width untuk memformat tabel sesuai keinginan. Sebagai contoh:

<table border="1" width="100%">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

Di sini, atribut border="1" menambahkan garis pada tabel dan atribut width="100%" menentukan lebar tabel sebesar 100% dari lebar tampilan.

Selain itu, Anda juga bisa menambahkan gaya CSS ke tabel untuk memformatnya dengan lebih baik. Berikut adalah contoh kode yang menggunakan CSS:

<style>

  table {

    border-collapse: collapse;

    width: 100%;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

    text-align: left;

  }

  th {

    background-color: #f2f2f2;

  }

</style>