Cara menggunakan contoh tabel html

Hallo coders, kali ini kita akan belajar membuat tabel di Html. Tabel ini penting lo gaess, kegunaanya buat menampilkan atau menyajikan data dalam bentuk tabel biasanya diimplementasikan di dashboard admin. Yaitu dashboard untuk mengedit konten website. Tabel terdiri dari kolom dan baris.

Table of Contents Show

Tag untuk Membuat Tabel di HTML
Atribut Cellpadding Untuk Mengatur Jarak
Atribut Cellspacing tag Table
Menggabungkan Baris dan Kolom di Tabel
Bagaimana membuat tabel HTML?
Bagaimana struktur tabel dalam HTML?
Bagaimana cara untuk membuat baris pada table?
Jika ingin membuat sebuah tabel di dalam HTML tag Apakah yang pertama di buat?

Daftar Isi

Tag untuk Membuat Tabel di HTML

Seperti yang kita ketahui html terdiri dari sebuah tag. Sama juga dengan tabel, untuk membuat tabel kita membutuhkan beberapa tag yang nantinya akan disusun atau dikombinasikan.

Berikut adalah beberapa tag tabel nya :

Tag <table> untuk membungkus tabelnya
Tag <thead> untuk membungkus bagian kepala tabel
Tag <tbody> untuk membungkus bagian badan tabel
Tag <tfoot> untuk membungkus bagian kaki tabel
Tag <tr> (tabel row) untuk membuat baris
Tag <td> (tabel data) untuk membuat sel atau coloumn
tag <th> (tabel head) sama seperti td bedanya th untuk judul tabel

Tag diatas yang paling penting dan sering digunakan adalah tag table tr dan td, yang lainnya opsional gaes. Nanti bakal kita praktekan perbedaanya dan kegunaan dari masing masing tag. Berikut ini adalah contoh tabel menggunakan tag table tr dan td.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel</title>
</head>
<body>
    <table>
        <tr>
            <td>No</td>
            <td>Nama Jenis</td>
            <td>Harga</td>
            <td>Satuan</td>
            <td>Jumlah</td>
            <td>Total</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Beras</td>
            <td>Rp. 35.000</td>
            <td>Kg</td>
            <td>2</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Daging Ayam</td>
            <td>Rp. 50.000</td>
            <td>Potong</td>
            <td>5</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Teh Botol</td>
            <td>Rp. 5.000</td>
            <td>Biji</td>
            <td>2</td>
            <td>Rp. 10.000</td>
        </tr>
    </table>
</body>
</html>

Maka hasilnya seperti ini.

Pasti kalian bertanya tanya kenapa tabel tapi gak ada garisnya ?. Itu dikarenakan didalam tag table ada atribut atribut khusus juga. kalian bisa mendambahkan atribut border seperti ini.

<table border="1">

maka seharusnya sudah ada bordernya.

nilai bordernya menentukan ketebalan baris.

Atribut Cellpadding Untuk Mengatur Jarak

Selain atribut border ada atribut cellpadding atribut ini digunakan untuk mengatur jarak antara text dengan garis didalam sel.

Contoh penggunaanya seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel</title>
</head>
<body>
    <table border="1" cellpadding="10">
        <tr>
            <td>No</td>
            <td>Nama Jenis</td>
            <td>Harga</td>
            <td>Satuan</td>
            <td>Jumlah</td>
            <td>Total</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Beras</td>
            <td>Rp. 35.000</td>
            <td>Kg</td>
            <td>2</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Daging Ayam</td>
            <td>Rp. 50.000</td>
            <td>Potong</td>
            <td>5</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Teh Botol</td>
            <td>Rp. 5.000</td>
            <td>Biji</td>
            <td>2</td>
            <td>Rp. 10.000</td>
        </tr>
    </table>
</body>
</html>

10 adalah ukuran jaraknya. Jika kalian copas kode diatas maka hasilnya akan menjadi seperti ini.

Atribut Cellspacing tag Table

Setelah kita belajar cellpadding untuk mengatur jarak antara text dengan garis didalam sel. Selanjutnya ada atribut khusus lagi untuk mengatur jarak antara garis tepi bagian dalam dan luar border. Bisa dibilang untuk mengatur ketebalan garis border di table kita. Kalian bisa menambahkannya di samping tag cellpadding seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel</title>
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td>No</td>
            <td>Nama Jenis</td>
            <td>Harga</td>
            <td>Satuan</td>
            <td>Jumlah</td>
            <td>Total</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Beras</td>
            <td>Rp. 35.000</td>
            <td>Kg</td>
            <td>2</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Daging Ayam</td>
            <td>Rp. 50.000</td>
            <td>Potong</td>
            <td>5</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Teh Botol</td>
            <td>Rp. 5.000</td>
            <td>Biji</td>
            <td>2</td>
            <td>Rp. 10.000</td>
        </tr>
    </table>
</body>
</html>

Karena saya memberikan nilai 0 maka tabel nya akan menjadi tidak ada jaraknya seperti ini.

Menggabungkan Baris dan Kolom di Tabel

Kita tahu bahwa ketika kita membuat tabel waktu belajar statistik ada tabel yang digabungkan biasanya untuk total dan juga jumlah keseluruhan. Digabung ini tujuanya agar menjadi lebih rapi ketika dilihat. Nah di html kita bisa melakukan itu menggunakan atribut khusus untuk tag td atau th yaitu rowspan dan colspan.

Rowspan untuk menggabungkan baris
Colspan untuk menggabungkan kolom

Disini saya akan melanjutkan kodingan yang tadi gaes. Kita akan menampilkan total keseluruhan harga.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel</title>
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td>No</td>
            <td>Nama Jenis</td>
            <td>Harga</td>
            <td>Satuan</td>
            <td>Jumlah</td>
            <td>Total</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Beras</td>
            <td>Rp. 35.000</td>
            <td>Kg</td>
            <td>2</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Daging Ayam</td>
            <td>Rp. 50.000</td>
            <td>Potong</td>
            <td>5</td>
            <td>Rp. 250.000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Teh Botol</td>
            <td>Rp. 5.000</td>
            <td>Biji</td>
            <td>2</td>
            <td>Rp. 10.000</td>
        </tr>
        <tr>
            <th colspan="5">Total Keseluruhan</th>
            <th>Rp. 330.000</th>
        </tr>
    </table>
</body>
</html>

Disini ya meletakan colspan 5 karena saya ingin menggabungkan 5 kolom kenapa gak enam ?, karena yang satunya kita akan berikan total keseluruhannya.

Bagaimana dengan rowspan ?, cara penggunaanya kurang lebih sama gaes. Oke karena kurang sinkron aja kalo diterapin di tabel produk. Disini saya akan membuat studi kasus baru yaitu tabel absensi. Kodingannya seperti ini.

Bagaimana membuat tabel HTML?

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:.

Tag <table> untuk membungkus tabelnya..

Tag <thead> untuk membungkus bagian kepala tabel..

Tag <tbody> untuk membungkus bagian body dari tabel..

Tag <tr> (tabel row) untuk membuat baris..

Tag <td> (table data) untuk membuat sel..

Bagaimana struktur tabel dalam HTML?

Struktur dasar membuat tabel pada HTML adalah tag <table>, <tr> dan <td>. Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.

Bagaimana cara untuk membuat baris pada table?

Klik sel di atas atau di bawah tempat yang ingin Anda tambahkan baris. Di bawah Alat Tabel, di tab Tata Letak, lakukan salah satu hal berikut: Untuk menambahkan baris di atas sel, klik Sisipkan di Atas dalam grup Baris dan Kolom. Untuk menambahkan baris di bawah sel, klik Sisipkan di Bawah dalam grup Baris dan Kolom.

Jika ingin membuat sebuah tabel di dalam HTML tag Apakah yang pertama di buat?

<table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel. <thead> – berfungsi untuk membungkus kepala tabel. <tbody> – berfungsi untuk membungkus tubuh tabel. <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row.