Cara menggunakan table html border

Question

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk membuat tabel menggunakan tag <table>. Biasanya tag <table> digunakan untuk menampilkan data yang struktur atau tampilan data dari database.

Table of Contents Show

Apa itu tabel Border?
Bagaimana cara untuk membuat baris pada table?
Apa perintah HTML untuk membuat tabel?
Apa fungsi atribut border?

Tabel terdiri dari 4 unsur utama:

Baris
Kolom
Sel
Garis

Lalu, bagaimana cara membuat tabel di HTML?. Teman-teman bisa membuatnya dengan beberapa tag yang sudah disediakan di HTML.

Tag-tag Pada Tabel

Berikut ini tag-tag yang digunakan untuk membuat tag table pada HTML:

Nama TagKeterangan/Fungsi<table>Tag digunakan sebagai tag pembuka untuk membuat sebuah tabel, tanpa tag <table> penggunaan tag <tr> dan <td> tidak berfungsi dengan baik.<tr> (Table Row)Tag digunakan untuk membuat baris dalam sebuah tabel.<td> (Table Data)Tag digunakan untuk membuat kolom di dalam baris dan untuk menampilkan data didalam tabel.<th> (Table Head)Tag digunakan untuk membuat bagian kepala pada pada tabel.<caption>Tag digunakan untuk membuat caption pada tabel.<thead>Tag digunakan untuk mengelompokan isi header dalam sebuah tabel.<tbody>Tag digunakan untuk mengelompokan isi body dalam sebuah tabel.<tfoot>Tag digunakan untuk mengelompokan isi footer dalam sebuah tabel.<colgroup>Tag digunakan untuk menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat.<col>Tag digunakan untuk menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>.

Tag yang paling penting teman-teman gunakan dalam membuat tabel adalah, tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh teman-teman gunakan boleh tidak.

Selain tag, ada juga beberapa atribut yang digunakan dalam tag <table>, yaitu:

Border
Cellspacing
Cellpadding
Colspan
Rowspan
Rules

Selain atribut tersebut teman-teman bisa menambahkan atribut lainnya sebagai penunjang atribut lainnya, seperti atribut, bgcolor, width, height, dan lain sebagainya.

Langsung saja kita coba praktikan ya teman teman.. silahkan teman-teman ikuti source code dibawah ini.

Cara membuat tabel menggunakan tag <table>, <tr>, dan <td>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <table>
 <tr>
            <td>Baris ke 1, Kolom ke 1</td>
            <td>Baris ke 1, Kolom ke 2</td>
            <td>Baris ke 1, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 2, Kolom ke 1</td>
            <td>Baris ke 2, Kolom ke 2</td>
            <td>Baris ke 2, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 3, Kolom ke 1</td>
            <td>Baris ke 3, Kolom ke 2</td>
            <td>Baris ke 3, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 4, Kolom ke 1</td>
            <td>Baris ke 4, Kolom ke 2</td>
            <td>Baris ke 4, Kolom ke 3</td>
        </tr>
    </table>
</body>
</html>

maka hasilnya seperti ini:

Dari source code diatas menghasilkan 1 tabel berisi 4 baris dan 4 kolom, lalu mengapa pada tabel tersebut tidak ada garisnya?, penyebab tidak ada garisnya, karena pada source code tadi yang sudah kita buat tidak ditambahkan atribut “border”, maka supaya tabelnya memiliki garis kita tambahkan atribut “border” di dalam tag <table> nya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Baris ke 1, Kolom ke 1</td>
            <td>Baris ke 1, Kolom ke 2</td>
            <td>Baris ke 1, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 2, Kolom ke 1</td>
            <td>Baris ke 2, Kolom ke 2</td>
            <td>Baris ke 2, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 3, Kolom ke 1</td>
            <td>Baris ke 3, Kolom ke 2</td>
            <td>Baris ke 3, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 4, Kolom ke 1</td>
            <td>Baris ke 4, Kolom ke 2</td>
            <td>Baris ke 4, Kolom ke 3</td>
        </tr>
    </table>
</body>
</html>

hasilnya seperti ini:

Setelah kita menambahkan atribut border=”1” pada tag <table> maka garis pada tabelnya akan muncul seperti gambar diatas. Nilai “1” pada atribut border adalah ukuran garisnya. Nilai “1” adalah ukuran garis yang paling kecil. Jadi, semakin besar nilainya, maka akan semakin besar pula ukuran garisnya.

contohnya seperti ini:

Tabel yang pertama menggunakan border ukuran 1, sehingga akan tampil garis tepi dengan ukuran 1 pixel.
Tabel yang kedua menggunakan border ukuran 8, sehingga akan tampil garis tepi dengan ukuran 8 pixel.

Tag Caption

Tag <caption> digunakan untuk memberikan judul dari tabel, teman-teman bisa saja langsung menuliskan judul dari tabel dengan langsung menuliskan teks yang diletakkan di atas bagian tabel menggunakan tag heading <h1>, tetapi tag <caption> ini digunakan secara khusus untuk membuat judul pada tabel.

Tag <caption> bisa teman-teman letakkan setelah tag tabel pembuka dan sebelum tag <tr> untuk baris pertama.

Contohnya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <h1>Membuat judul tabel menggunakan caption</h1>
<table border="1">
    <caption>Peserta Nusantech Academy</caption>
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Amar</td>
        <td>Purbalingga</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Ahmad Maliki</td>
        <td>Madiun</td>
    </tr>
</table>
</body>
</html>

Hasilnya seperti ini.

Tag thead, tbody, dan tfoot

Tag <thead>, ,tbody., dan <tfoot> ini biasanya digunakan untuk membagi struktur tabel menjadi beberapa bagian dan juga digunakan sebagai Style CSS pada tabel. Untuk penjelasan dari masing-masing tag sudah saya jelaskan diatas ya teman-teman.

oke kita langsung saja ke contohnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
    <style type="text/css">
        thead
        {
            background-color:grey;
        }
        tbody
        {
            background-color: tomato;
        }
        tfoot
        {
            background-color: seagreen;
        }
    </style>
<body>
    <h1>Membuat Tabel menggunakan thead, tbody, dan tfoot</h1>
<table border="1">
    <thead>
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Amar</td>
        <td>Purbalingga</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>2</td>
        <td>Ahmad Maliki</td>
        <td>Madiun</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

Hasilnya seperti ini.

Tag Colgroup dan Tag Col

Tag Colgroup dan tag Col ini digunakan untuk mengelompokan data pada tabel, menggunakan kedua tag ini teman-teman dapat menambahkan style yang berbeda pada masing-masing kolom dengan mudah, sehingga memudahkan dalam membuat style CSS pada masing-masing kolom dengan memberikan style pada tag Col nya.

Contohnya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
<body>
    <h1>Membuat Tabel menggunakan tag colgroup dan tag col</h1>
<table border="1" width="50%">
    <colgroup>
        <col style="background-color:red">
        <col style="background-color:orange">
        <col style="background-color:yellow">
    </colgroup>
    <tr height='50px'>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
    <tr>
        <td height='50px'>1</td>
        <td>Amar</td>
        <td>Purbalingga</td>
    </tr>
    <tr height='50px'>
        <td>2</td>
        <td>Ahmad Maliki</td>
        <td>Madiun</td>
    </tr>
</table>
</body>
</html>

Hasilnya seperti ini.

Fungsi dari tag Colgroup dan tag Col pada tabel yaitu agar teman-teman dapat mengatur masing – masing kolom di dengan hanya mengatur Style CSS pada masing – masing tag col. Kemudian saya menambahkan atribut height, dan width untuk mengatur tinggi dan lebar sel nya.

Atribut Cellspacing

Attribute Cellspacing digunakan untuk mengatur jarak luar antar masing masing sel. Cara penggunaannya sama seperti atribut border yaitu disisipkan pada tag <table>.

Contohnya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <table border="1" cellspacing="1">
        <h1>Tabel border 1 dan cellspacing 1</h1>
        <tr>
            <td>Baris ke 1, Kolom ke 1</td>
            <td>Baris ke 1, Kolom ke 2</td>
            <td>Baris ke 1, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 2, Kolom ke 1</td>
            <td>Baris ke 2, Kolom ke 2</td>
            <td>Baris ke 2, Kolom ke 3</td>
        </tr>
    </table>
    <table border="1" cellspacing="5">
        <h1>Tabel border 1 dan cellspacing 5</h1>
        <tr>
            <td>Baris ke 3, Kolom ke 1</td>
            <td>Baris ke 3, Kolom ke 2</td>
            <td>Baris ke 3, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 4, Kolom ke 1</td>
            <td>Baris ke 4, Kolom ke 2</td>
            <td>Baris ke 4, Kolom ke 3</td>
        </tr>
    </table>
    <table border="1" cellspacing="10">
        <h1>Tabel border 1 dan cellspacing 10</h1>
        <tr>
            <td>Baris ke 3, Kolom ke 1</td>
            <td>Baris ke 3, Kolom ke 2</td>
            <td>Baris ke 3, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 4, Kolom ke 1</td>
            <td>Baris ke 4, Kolom ke 2</td>
            <td>Baris ke 4, Kolom ke 3</td>
        </tr>
    </table>
</body>
</html>

Hasilnya seperti ini:

Tabel pertama menggunakan border “1” dan Cellspacing “1”, sehingga jarak antar sel nya hanya 1 pixel.
Tabel kedua menggunakan border “1” dan Cellspacing “5”, sehingga jarak antar sel nya adalah 5 pixel.
tabel ketiga menggunakan border “1” dan Cellspacing “10”, sehingga jarak antar sel nya adalah 10 Pixel.

Jadi semakin besar nilai Cellspacing nya maka jarak antar selnya semakin lebar.

Atribut Cellpadding

Attribute Cellpadding digunakan untuk mengatur jarak antara garis pada masing masing sel dengan objek yang ada didalamnya.

Contohnya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <table border="1" cellpadding="1">
        <h1>Tabel border 1 dan cellpadding 1</h1>
        <tr>
            <td>Baris ke 1, Kolom ke 1</td>
            <td>Baris ke 1, Kolom ke 2</td>
            <td>Baris ke 1, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 2, Kolom ke 1</td>
            <td>Baris ke 2, Kolom ke 2</td>
            <td>Baris ke 2, Kolom ke 3</td>
        </tr>
    </table>
    <table border="1" cellpadding="5">
        <h1>Tabel border 1 dan cellpadding 5</h1>
        <tr>
            <td>Baris ke 3, Kolom ke 1</td>
            <td>Baris ke 3, Kolom ke 2</td>
            <td>Baris ke 3, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 4, Kolom ke 1</td>
            <td>Baris ke 4, Kolom ke 2</td>
            <td>Baris ke 4, Kolom ke 3</td>
        </tr>
    </table>
    <table border="1" cellpadding="10">
        <h1>Tabel border 1 dan cellpadding 10</h1>
        <tr>
            <td>Baris ke 3, Kolom ke 1</td>
            <td>Baris ke 3, Kolom ke 2</td>
            <td>Baris ke 3, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 4, Kolom ke 1</td>
            <td>Baris ke 4, Kolom ke 2</td>
            <td>Baris ke 4, Kolom ke 3</td>
        </tr>
    </table>
</body>
</html>

hasilnya seperti ini:

Tabel pertama menggunakan border “1” dan Cellpadding “1”, sehingga jarak antara garis dan teksnya hanya 1 pixel.
Tabel pertama menggunakan border “1” dan Cellpadding “5”, sehingga jarak antara garis dan teksnya adalah 5 pixel.
Tabel pertama menggunakan border “1” dan Cellpadding “10”, sehingga jarak antara garis dan teksnya adalah 10 pixel.

Jadi semakin besar nilai cellpadding nya maka jarak antara garis dan teks atau objek nya semakin besar.

Menambahkan Atribut Warna

Atribut yang akan digunakan adalah bgcolor, atribut ini digunakan untuk menambahkan warna pada sel dan baris. Atribut bgcolor akan kita tambahkan di dalam tag <td> (untuk warna sel) dan <tr> (untuk warna baris).

Contohnya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <table border="1">
        <tr>
            <td bgcolor="red">Baris ke 1, Kolom ke 1</td>
            <td bgcolor="yellow">Baris ke 1, Kolom ke 2</td>
            <td bgcolor="blue">Baris ke 1, Kolom ke 3</td>
        </tr>
        <tr>
            <td>Baris ke 2, Kolom ke 1</td>
            <td>Baris ke 2, Kolom ke 2</td>
            <td>Baris ke 2, Kolom ke 3</td>
        </tr>
    </table>
</body>
</html>

Hasilnya seperti ini:

Atribut Rowspan dan Colspan

Atribut Colspan dan Rowspan memiliki fungsi yang hampir sama, yaitu digunakan untuk menggabungkan beberapa sel tabel. Perbedaannya adalah :

Atribut Colspan digunakan untuk menggabungkan bagian tabel atau sel yang berada di sebelahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara horizontal (menggabungkan kolom).
Atribut Rowspan digunakan untuk menggabungkan bagian tabel atau sel yang berada di bawahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara vertikal (menggabungkan baris).

Contohnya seperti ini:

Tabel pertama menggunakan colspan secara otomatis akan menggabungkan 3 baris vertical, dari baris ke 1, kolom ke 1 sampai baris ke 3, kolom ke 3.
Tabel kedua menggunakan Rowspan secara otomatis akan menggabungkan 3 baris secara horizontal, dari baris ke1, Kolom ke 1 sampai baris ke 3, kolom ke 3.

Langsung saja kita buat tabel menggunakan atribut Rowspan dan Colspan nya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2">Jenis Ikan</th>
            <th colspan="3">Harga Ikan /Kg</th>
        </tr>
        <tr>
            <th>Pasar A</th>
            <th>Pasar B</th>
        </tr>
        <tr>
            <td>Bawal</td>
            <td>Rp. 50.000</td>
            <td>Rp. 52.000</td>
        </tr>
        <tr>
            <td>Kembung</td>
            <td>Rp. 35.000</td>
            <td>Rp. 33.000</td>
        </tr>
        <tr>
            <td>Gurame</td>
            <td>Rp. 38.000</td>
            <td>Rp. 38.000</td>
        </tr>
    </table>
</body>
</html>

hasilnya seperti ini:

Pada contoh tersebut saya menyisipkan tag <th>, tag <th> ini bisa digunakan sebagai pengganti tag <td>, perbedaannya jika kita menggunakan tag <th> maka teks yang akan ditampilkan dengan huruf yang bercetak tebal (bold) serta teks akan berada ditengah sel (center).

Atribut Rules

Atribut rules pada tabel digunakan untuk membuat dan mengatur garis yang ada pada di antara Cell satu dengan Cell lain di tabel, dalam attribute rules html memiliki 4 values antara lain:

rows, (digunakan untuk menampilkan garis pada bagian baris tabel di html).
cols, (digunakan untuk menampilkan garis pada bagian kolom tabel di html).
all, (digunakan untuk menampilkan garis pada bagian baris dan kolom tabel di html).
none, (digunakan untuk mengatur agar garis pada kolom dan tabel tidak tampil).

Contohnya seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel Nusantech Academy</title>
</head>
<body>
    <h1>Tabel menggunakan atribut rules rows</h1>
    <table rules="rows">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Class</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Amar</td>
            <td>Nusantech Academy</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ahmad Maliki</td>
            <td>Nusantech Academy</td>
        </tr>
    </table>
    <h1>Tabel menggunakan atribut rules cols</h1>
    <table rules="cols">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Class</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Amar</td>
            <td>Nusantech Academy</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ahmad Maliki</td>
            <td>Nusantech Academy</td>
        </tr>
    </table>
    <h1>Tabel menggunakan atribut rules all</h1>
    <table rules="all">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Class</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Amar</td>
            <td>Nusantech Academy</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ahmad Maliki</td>
            <td>Nusantech Academy</td>
        </tr>
    </table>
    <h1>Tabel menggunakan atribut rules none</h1>
    <table rules="none">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Class</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Amar</td>
            <td>Nusantech Academy</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ahmad Maliki</td>
            <td>Nusantech Academy</td>
        </tr>
    </table>
</body>
</html>

Hasilnya seperti ini:

Jika teman-teman perhatikan dari hasil tersebut ada perbedaan dari ke 4 value tersebut.

Pada tabel pertama garis yang ditampilkan pada bagian baris (vertical).
Pada tabel kedua garis yang ditampilkan pada bagian kolom (horizontal).
Pada tabel ketiga garis yang ditampilkan pada bagian baris dan kolom, artinya semua values digunakan (vertical dan horizontal).
Pada tabel ke empat tidak garis yang ditampilkan, kecual teman-teman menambahkan atribut border maka akan muncul garis pada tepi luar tabel.

Jadi tabel digunakan untuk menampilkan informasi dalam bentuk baris dan kolom, tabel juga digunakan untuk menampilkan data yang struktur atau tampilan data dari database. Bagian yang tersulit dalam pembuatan tabel yaitu pada bagian menggabungkan sel menggunakan atribut Rowspan dan Colspan, karena membutuh ketelitian dalam membuatnya.

Baik, teman-teman. Kita rasa cukup untuk materi membuat tabel pada HTML. Tetap semangat mengikuti Course HTML & CSS dari Nusantech Academy.

Apa itu tabel Border?

Atribut border dalam tabel HTML Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa garis tepi.

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.

Apa perintah HTML untuk membuat tabel?

Tag 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.

Apa fungsi atribut border?

Pada kode di atas terdapat atribut border dalam tag table, atribut border tersebut berfungsi untuk memberikan garis pada tabel. Sedangkan angka 1 di dalam atribut border merupakan nilai ketebalan garis yang akan ditampilkan, semakin besar nilai tersebut maka semakin tebal garis yang ditampilkan.

kode html