» » » » Dasar HTML : Membuat Tabel (Video)

Dasar HTML : Membuat Tabel (Video)

, , Edit

Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel. Tabel terdiri dari 4 unsur utama yaitu baris, kolom, sel dan garis. Lalu, bagaimana cara membuat tabel di HTML? Kita bisa membuatnya dengan beberapa tag yang sudah disediakan di HTML.


Bagaimana cara membuat tabel?

Untuk menampilkan data yang terstruktur memiliki banyak cara, mulai dari menggunakan grafik,sampai dengan menggunakan tabel, namun pada pembahasan ini kita akan sedikit mengulas tentang menampilkan data menggunakan tabel.

Sebuah tabel terdiri dari dua elemen utama, yaitu baris dan kolom. HTML sudah menyediakan beberapa elemen untuk membuat sebuah tabel, yaitu <table>, <tr>, <td>. Sebelum membuat baris dan kolom maka kita harus inisialisasi tabel terlebih dahulu menggunakan elemen <table>.

<table>
    <!-- Data -->
</table>
Selanjutnya, kita menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen <tr>.

<table>
    <tr>
        <!-- Isi baris tabel -->
    </tr>
    <tr>
        <!-- Isi baris tabel -->
    </tr>

</table>
Kemudian setiap baris dari tabel tentunya harus diisikan dengan data yang akan menghasilkan kolom tabel. untuk mengisi data pada kolom tabel pada html menggunakan elemen <td>.Tetapi, jika ingin membuat baris pertama pada tabel sebagai header, kita dapat mengisikan baris pertama dengan elemen <th>.

Dapat kita lihat hasil akhir dari tabel yang kita buat sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Dasar HTML</title>
</head>
<body>
    <table>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Roby</td>
            <td>Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ade</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Roni</td>
            <td>Surabaya</td>
        </tr>
    </table>
</body>
</html>
Bila kita buka halaman html tersebut di browser, maka akan muncul seperti ini:


Dapat kita lihat dari gambar diatas, tidak terlihat seperti tabel ya, kita perlu menambahkan border="1" pada elemen tabel tersebut.

<!DOCTYPE html>
<html>
<head>
    <title>Dasar HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Roby</td>
            <td>Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ade</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Roni</td>
            <td>Surabaya</td>
        </tr>
    </table>
</body>
</html>
Bila kita buka halaman html tersebut di browser, maka hasilnya akan muncul seperti ini:


Seperti itu kira-kira bentuk table pada HTML. Sekarang kita lanjut pada fungsi penggabungan baris dan kolom. Pada HTML terdapat perintah colspan dan rowspan. Colspan adalah perintah untuk menggabungkan beberapa kolom menjadi satu. Contohnya kalian bisa rubah htmlnya menjadi seperti ini.

<!DOCTYPE html>
<html>
<head>
    <title>Dasar HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">No</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Roby</td>
            <td>Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ade</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Roni</td>
            <td>Surabaya</td>
        </tr>
    </table>
</body>
</html>
Bila kita buka halaman html tersebut di browser, maka hasilnya akan menjadi seperti ini:


Lalu ada rowspan yang berfungsi untuk menggabungkan beberapa baris menjadi satu. Contohnya seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title>Dasar HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Roby</td>
            <td rowspan="3">Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ade</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Roni</td>
        </tr>
    </table>
</body>
</html>
Bila kita buka halaman html tersebut di browser, maka hasilnya akan menjadi seperti ini:


Selain itu kita juga dapat menambahkan atribut border dan yang lainya kedalam tag <style>, coba kita lihat contoh dibawah ini :

<!DOCTYPE html>
<style>
    table,
    th,
    td{
        border: 1px solid red; 
    }
    table{
        border-collapse: collapse;
        width: 100%;
    }
    th{
        height: 50px;
    }
    th,
    td{
        padding: 15px;
        text-align: left;
    }
</style>
<html>
<head>
    <title>Dasar Html</title>
</head>
<body>
    <table>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Roby</td>
            <td rowspan="3">Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ade</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Roni</td>
        </tr>
    </table>
</body>
</html>
Bila kita buka halaman html tersebut di browser, maka hasilnya akan menjadi seperti ini:


Demikian tutorial Dasar HTML Tentang Cara Membuat Tabel. Silahkan bisa Anda kembangkan lagi menjadi bentuk tabel yang sesuai dengan kebutuhan Anda. Terima kasih.

Subscribe to receive free email updates:

Related Posts :

4 Responses to "Dasar HTML : Membuat Tabel (Video)"

Langganan: Posting Komentar (Atom)