HTML Dasar | #7 Tabel

pada tanggal
Tabel dalam HTML
Thumbnail Tabel HTML

Tabel dalam HTML

Struktur Tabel: <table>, <tr>, <td>, <th>

Tabel dalam HTML digunakan untuk menyusun data secara terstruktur dalam bentuk baris dan kolom. Elemen utama yang digunakan untuk membuat tabel adalah tag <table>, <tr> (table row), <td> (table data), dan <th> (table header).

Contoh Struktur Tabel:


<table>
    <tr>
        <th>Nama</th>
        <th>Usia</th>
        <th>Pekerjaan</th>
    </tr>
    <tr>
        <td>Rizky</td>
        <td>25</td>
        <td>Programmer</td>
    </tr>
    <tr>
        <td>Lina</td>
        <td>23</td>
        <td>Desainer</td>
    </tr>
</table>

Dalam contoh di atas, tabel memiliki 3 kolom: Nama, Usia, dan Pekerjaan. Baris pertama menggunakan tag <th> yang menandakan bahwa ini adalah header tabel. Baris berikutnya menggunakan tag <td> untuk menampilkan data pada setiap kolom.

Menambahkan Atribut pada Tabel

Anda dapat menambahkan berbagai atribut ke tabel untuk mengatur tampilannya. Beberapa atribut yang umum digunakan antara lain:

  • border: Menentukan lebar batas (border) tabel.
  • cellpadding: Menentukan jarak antara isi sel dan batas sel.
  • cellspacing: Menentukan jarak antar-sel.
  • colspan: Menggabungkan beberapa kolom.
  • rowspan: Menggabungkan beberapa baris.

Contoh Atribut pada Tabel:


<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Nama</th>
        <th>Usia</th>
        <th>Pekerjaan</th>
    </tr>
    <tr>
        <td>Rizky</td>
        <td>25</td>
        <td>Programmer</td>
    </tr>
</table>

Dengan menggunakan atribut border, cellpadding, dan cellspacing, Anda dapat mengatur tampilan tabel sesuai keinginan Anda.

Contoh Penggunaan colspan dan rowspan:


<table border="1">
    <tr>
        <th colspan="2">Informasi Pribadi</th>
    </tr>
    <tr>
        <td>Nama</td>
        <td>Rizky</td>
    </tr>
    <tr>
        <td rowspan="2">Usia dan Pekerjaan</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Programmer</td>
    </tr>
</table>

Penggunaan colspan memungkinkan Anda menggabungkan dua kolom menjadi satu, sementara rowspan memungkinkan satu sel untuk mencakup beberapa baris.

Komentar

Posting Komentar