Cara Membuat Tabel Menggunakan HTML Mudah

Apa kabar kalian sobat negaraweb? Pada artikel kita kali ini, cocok banget rasanya admin memberi tutorial mengenai HTML untuk kamu yang baru belajar pemrograman web.

Oh iya, sedikit wejangan dari admin negaraweb nih, buat kamu yang baru belajar dan tahu mengenai pemrograman website, kamu harus tetap konsisten belajar walaupun kamu merasa ini agak sulit.

Memulai pembelajaran dengan mempelajari HTML memang pilihan yang sangat tepat jika ingin jago di bidang pemrograman web. Baik, kita akan mulai tutorial membuat tabel mudah dan gampang menggunakan HTML. Langsung saja yang pertama!

Pahami Elemen Tabel HTML

Sekedar dasar pengetahuan bagi kamu, bahwa sebenarnya ada tiga (3) elemen dasar tabel menggunakan HTML atau HyperText Markup Language.

Tiga elemen itu yaitu:

  1. Elemen <table> berfungsi untuk mendefinisikan pembuatan tabel.
  2. Elemen <tr> berfungsi untuk mendefinisikan pembuatan baris pada tabel.
  3. Elemen <td> berfungsi untuk membuat kolom atau sel di setiap baris pada tabel.

Karena perkembangan zaman terus meningkat, kebutuhanpun ikut harus meningkat olehnya. Maka dari itu ada elemen-elemen opsional yang bisa kamu gunakan dan patut ketahui, yaitu:

  1. Elemen <th> berfungsi untuk mendefinisikan header di dalam tabel.
  2. Elemen <thead> berfungsi untuk membungkus konten bagian judul atau kepala tabel.
  3. Elemen <tbody> berfungsi untuk membungkus konten bagian isi atau tubuh dari tabel.
  4. Elemen <tfoot> berfungsi untuk membungkus konten bagian kaki atau bawah dari tabel.

Nah, mari kita mulai mengkoding tabel menggunakan HTML.

Eits, sebelum itu pastikan kamu sudah menginstall dan memiliki text editor untuk pemrograman web. Text editor yang bisa kamu pilih yakni: Notepad++, Dreamweaver, Sublime Text, dan lain-lain, bisa kamu download dan install terlebih dahulu jika belum memilikinya.

Setelah itu, buka text editor yang ingin kamu gunakan, dan silakan salin coding di bawah ini dan tempelkan di text editor pilihanmu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2">Nama</th>
            <th colspan="3">Nilai</th>
        </tr>
        <tr>
            <th>Kimia</th>
            <th>Fisika</th>
            <th>Biologi</th>
        </tr>
        <tr>
            <td>Robby</td>
            <td>76</td>
            <td>80</td>
            <td>81</td>
        </tr>
        <tr>
            <td>Rendi</td>
            <td>84</td>
            <td>70</td>
            <td>75</td>
        </tr>
        <tr>
            <td>Alfian</td>
            <td>96</td>
            <td>70</td>
            <td>71</td>
        </tr>
    </table>
</body>
</html>

Setelah itu, save coding di atas dengan menekan CTRL+S secara bersamaan dan simpan dengan nama index.html.

Jika sudah, silakan bukan browser yang kamu inginkan (bisa Microsoft Edge, bisa Google Chrome ataupun Mozilla Firefox.

Tarik halaman belajar buat tabel tersebut ke tempat URL pencarian. Lalu tekan Enter pada keyboard.

Nah, jika sudah selamat! Anda sudah bisa membuat tabel menggunakan HTML saat ini. Kembangin terus yuk belajarmu dengan mencari tutorialnya hanya di blog negaraweb!