Html Tag: Cara membuat tabel dengan tag table pada HTML

HTML merupakan bahasa markup yang digunakan untuk membuat halaman web. Salah satu elemen yang penting pada halaman web adalah tabel. Tabel digunakan untuk menampilkan data secara terstruktur dan sering digunakan dalam membuat laporan atau daftar. Di dalam HTML, dibutuhkan elemen khusus untuk membuat tabel, yaitu menggunakan tag <table>.

Tutorial Membuat tabel pada HTML

Berikut ini adalah beberapa langkah untuk membuat tabel pada HTML:

1. Membuat Struktur Tabel

Pertama-tama, buatlah struktur tabel menggunakan tag <table>. Kemudian gunakan tag <tr> (table row) untuk menambahkan baris ke dalam tabel. Dan gunakan tag <td> (table data) untuk menambahkan sel ke dalam baris. Contoh kode sebagai berikut:

<table>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>

Hasilnya akan seperti berikut:

2. Mengatur Atribut pada Tabel

Tag <table> memiliki beberapa atribut untuk mengatur tabel. Berikut adalah beberapa atribut umum yang bisa digunakan:

• border: untuk menentukan ketebalan garis antar sel.
• cellspacing: untuk menentukan jarak antara sel.
• cellpadding: untuk menentukan jarak antara isi sel dengan tepi sel.

Contoh kode sebagai berikut:

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>

Hasilnya akan seperti berikut:

Anda bisa menyesuaikan nilai atribut tersebut sesuai keinginan anda.

3. Menggabungkan Sel pada Tabel

Sometimes, Anda memerlukan sel yang lebih besar dari satu kolom atau satu baris. Ada dua atribut yang bisa digunakan dalam situasi ini, yaitu colspan dan rowspan. Contoh kode sebagai berikut:

<table>
    <tr>
        <td colspan="2">Tabel dengan kolom gabungan</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>

Hasilnya akan seperti berikut:

4. Menggunakan CSS untuk Styling Tabel

Anda bisa menggunakan CSS untuk menambahkan gaya (style) pada tabel. Anda bisa menambahkan atribut class atau id pada tag <table>. Kemudian, Anda bisa menulis gaya di dalam tag <style>. Contoh kode sebagai berikut:

<table class="styled-table">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>

<style>
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}
</style>

Hasilnya akan seperti berikut:

Demikian tutorial membuat tabel pada HTML. Semoga bermanfaat untuk anda.

Html Tag: Tips dalam menggunakan tag table pada HTML

Tag table di HTML adalah salah satu tag yang digunakan untuk membuat tabel. Tabel sendiri merupakan pengelompokan dari data-data dalam bentuk grid. Ada beberapa hal yang perlu diperhatikan dalam menggunakan tag table pada HTML agar dapat menghasilkan tabel yang baik dan rapi. Berikut ini adalah beberapa tips yang perlu diperhatikan ketika menggunakan tag table pada HTML:

Menentukan Header Tabel

Header atau bagian atas dari tabel digunakan untuk memberi nama pada setiap kolom dan menjelaskan isinya. Header akan memberi petunjuk mengenai kategori apa saja yang akan muncul dalam tabel dan memudahkan pembaca untuk memahami informasi pada tabel. Header dapat ditambahkan dengan menggunakan tag

.

Menentukan Isi Tabel

Isi tabel adalah bagian utama dari tabel yang berisi informasi dari setiap kolom dan baris dalam tabel. Isi tabel dapat ditambahkan menggunakan tag

di dalam tag. Pada bagian isi tabel, disarankan untuk menghindari menggunakan karakter spasi atau enter yang berlebihan untuk menjaga tabel agar tetap rapi dan mudah dibaca.

Memberikan Warna Tabel

Tabel dengan warna yang menarik dapat meningkatkan kualitas dan tampilan dari tabel tersebut. Pemberian warna dapat dilakukan dengan dua cara, yaitu memberikan warna pada latar belakang kolom atau baris atau memberikan warna pada teks pada kolom atau baris. Pemberian warna pada tabel dapat dilakukan menggunakan CSS. Untuk menentukan warna pada latar belakang atau teks, dapat digunakan atribut background-color atau color pada tag

. Menambahkan Border pada Tabel Dalam membuat tabel, kita dapat menambahkan border atau garis pinggir pada tabel agar terlihat lebih rapi dan mudah dibaca. Border dapat ditambahkan menggunakan atribut border pada tag . Selain itu, kita juga dapat menambahkan border pada kolom atau baris tertentu dengan menggunakan atribut border pada tag atau . Menggabungkan Sel atau Kolom Ketika membuat tabel, kita mungkin akan menemukan baris atau kolom yang kosong dan tidak memiliki nilai. Anda bisa menggabungkan sel atau kolom yang memiliki nilai yang sama. Hal ini dapat dilakukan dengan menggunakan atribut rowspan atau colspan pada tag atau . Demikianlah beberapa tips yang perlu diperhatikan dalam menggunakan tag table pada HTML. Dengan mengikuti tips tersebut, diharapkan tabel yang kita buat akan terlihat lebih baik dan mudah dibaca oleh pembaca. Semoga bermanfaat!