• Sen. Sep 26th, 2022

    Sih4nk

    Dari Kita Untuk Kita

    #7 Belajar HTML Tabel

    Byh4nk

    Sep 7, 2022 , ,

    Belajar HTML Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> utuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat kolom.

    Tabel terdiri dari 4 unsur utama:

    1. Baris
    2. Kolom
    3. Sel
    4. Garis

    Belajar HTML Tabel

    untuk lebih memahami pembuata table pada HTML berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.

    1. <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.
    2. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML
    3. <td> atau dikenal dengan table data merpakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table
    4. <th> untuk membuat table head atau bagian kepala pada table.

    perhatikan contoh pembuatan table pada HTML berikut :

    Hasilnya

    Belajar HTML Tabel

    dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita bahas diatas. namun pada tag table saya memberikan atribut border=’1′. atribut border ini digunakan untuk memberika garis tepi pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi.

    dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel.contoh

    Hasilnya

    Belajar HTML Tabel

    Menambahkan Warna pada Sel dan Baris

    Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

    Hasilnya

    Belajar HTML Tabel

    Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.

    Menggabungkan Sel Tabel

    Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:

    • rowspan untuk menggabungkan baris;
    • colspan untuk menggabungkan kolom.

    Atribut ini bisa kita berikan kepada tag <td> atau <th>.

    Belajar HTML Tabel

    contoh penerapannya

    Hasilnya

    Belajar HTML Tabel

    Menyisipkan Elemen yang Lain ke dalam Sel

    Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, video, list, dsb.

    Contoh:

    Hasilnya

    Belajar HTML Tabel

    Catatan :

    Bagian tersulit saat membuat tabel di HTML adalah saat menggabungkan sel. Karena kita harus teliti, berapa ukuran sel yang akan digabungkan dengan rowspan dan colspan.

    Materi HTML Dasar Lainnya :

    #1 Belajar HTML : Pengertian HTML
    #2 Belajar HTML : Text Editor
    #3 Belajar HTML Mengenal Tag, Element, Atribut HTML
    #4 Belajar HTML Heading
    #5 Belajar HTML Format Text
    #6 Belajar HTML Paragraf
    #7 Belajar HTML Tabel
    #8 Belajar HTML Hyperlink
    #9 Belajar HTML List
    #10 Belajar HTML Form
    #11 Belajar HTML Atribut Form
    #12 Belajar HTML Symbol
    #13 Belajar HTML Gambar
    #14 Belajar HTML Tag Iframe
    2 thoughts on “#7 Belajar HTML Tabel”

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan.