Skip to main content

Belajar HTML Dasar #6 - Membuat Tabel Pada HTML

Belajar HTML Dasar #6 - Membuat Tabel Pada HTML

Membuat Tabel Pada HTML

Tabel merupakan struktur yang digunakan untuk nmenampilkan informasi dalam bentuk baris dan kolom. Pada html, untuk pembuatan tabel menggunakan tag <table> dan menggunakan tag <tr>  untuk membuat baris dan <td> untuk membuat kolom. Untuk lebih mudah dalam memahami pembuatan table pada html, berikut ini akan saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.

Tag <table> merupakan tag pembuka dalam pembuatan sebuah table pada html, tanpa tag <table>  ini, penggunaan <tr> dan <td> tidak bisa digunakan dengan baik. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table html. <td> atau dikenak dengan tabel data merupakan tag yang digunakan untuk membuat kolom  dalam baris dan tag <th> untuk membuat tablehead atau bagian kepala pada table.

Dibawah ini adalah contoh pembuatan table pada HTML berikut :

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td>baris 1 / kolom 1</td>
<td>baris 1 / kolom 2</td>
<td>baris 1 / kolom 3</td>
</tr>
<tr>
<td>baris 2 / kolom 1</td>
<td>baris 2 / kolom 2</td>
<td>baris 2 / kolom 3</td>
</tr>
<tr>
<td>baris 3/ kolom 1</td>
<td>baris 3/ kolom 2</td>
<td>baris 3/ kolom 3</td>
</tr>
<tr>
<td>baris 4/ kolom 1</td>
<td>baris 4/ kolom 2</td>
<td>baris 4/ kolom 3</td>
</tr>
</table>
</body>
</html>


Hasil Outputnya


Belajar HTML Dasar #6 - Membuat Tabel Pada HTML

Dari contoh diatas dapat anda lihat semdiri fungsi dari masing-masing tag yang sudah kita bahas diatas. Namun pada tag table saya memberikan atribut border='1'. Atribut border ini digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi ( 1 untuk membuat garis, dan 0 jika tidak ingin menggunakan garis ).

Dan dibawah ini adalah contoh membuat table html dengan menggunakan tag head atau bagian kepala tabel :

<!DOCTYPE html>
<html>
<head>
    <title>belajar membuat tabel di html</title>
</head>
<body>
    <table border="1">
        <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
        </tr>
    <tr>
        <td>1</td>
        <td>Badrul</td>
        <td>Sumedang</td>
        </tr>
    <tr>
        <td>2</td>
        <td>Andi</td>
        <td>Jakarta</td>
        </tr>
    <tr>
        <td>3</td>
        <td>Budi</td>
        <td>Bandung</td>
        </tr>
    </table>
</body>
</html>


Hasil Outputnya 


Belajar HTML Dasar #6 - Membuat Tabel Pada HTML


Mungkin cukup sampai disini dulu mengenai pembahasan mengenai membuat tabel pada HTML, untuk selanjutnya kita akan belajar mengenai membuat hyperlink dan list pada HTML. Semoga sampai disini teman-teman bisa mengikutinya dengan baik, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.

Sekian dan terimakasih...


Daftar Belajar HTML Dasar




Labels:
Location: Indonesia

Comments

Post a Comment

Artikel Populer

Cara Instal Windows 7 lengkap dengan Gambarnya

Assalammualaikum wr.wb Pada kesempatan kali ini kita akan belajar tentang bagaimana cara install ulang windows7. Tapi sebelum itu, Apa sih itu Install Ulang?. Nah, jadi Install ulang windows itu merupakan sebuah usaha untuk memasukan kembali file-file windows kedalam sebuah part/drive tertentu pada sebuah hardisk, sehingga komputer bisa berjalan normal. Instal ulang bisa di lakukan jika laptop/komputer kita mengalami gannguan seperti komputer lelet, dll. Okee tanpa berlama-lama lagi, kita langsung saja ke tutorialnuya Proses Installasi Persiapan alat dan bahan PC/Laptop Flasdisk berisi program windows 7 Proses Installasi Masukan bios dengan menekan tombol F2 atau yang lainnya disetiap komputer/laptop berbeda-beda silahkan coba-coba saja. Setelah itu lalu setting bios untuk booting lewat CD ROOM pada boot device priority Masukan CD/DVD windows 7 dan tunggu sampai muncul press any key to boot from cd or dvd kemudian tekan enter Kemudian akan muncul tampilan starting windows   Tunggu ...
4 comments
Read more »

Program Menghitung Pendapatan Karyawan Perusahaan Cat

Assallammualaikum wr.wb Pada kesempatan kali ini kita akan membuat sebuah program lagi menngunakan bahasa c yaitu tentang menghitung pendapatan karyawan suatu perusahaan Cat. C ontoh persoalannya seperti dibawah ini. Suatu perusahaan cat memberikan komisi kepada para karyawannya dengan ketentuan sebagai berikut : Bila karyawannya bisa menjual cat hingga Rp. 200.000,akan diberikan uang jasa sebesar Rp. 20.000,- ditambah dengan uang komisi 10% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 200.000,-akan diberikan uang jasa sebesar Rp. 50.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 400.000,-akan diberikan uang jasa sebesar Rp. 75.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Buatl ah program if-else untuk menghitung pendapatan karyawan perusahaan tersebut? Program bahasa C #include <stdio.h> int main() {   ...
2 comments
Read more »

Program Menghitung Luas Persegi Panjang Menggunakan Bahasa C

  Assallammualaikum wr.wr Pada kesempatan kali ini kita akan membuat suatu program menggunakan bahasa C. Program yang akan kita buat kali ini yaitu tentang program menghitung luas persegi panjang. Tapi sebelum melanjutkan tutorialnya, pastikan terlebih dahulu kalian membacaartikel saya yang berjudul Belajar Bahasa C agar bisa dengan mudah dalah memahami pemprogaman bahasa C. Okee, langsung saja tanpa panjang lebar kita mulai saja tutorialnya. Kode Program Kode program bahasa C untuk menhitung luas persegi panjang adalah sebagai berikut #include <stdio.h> int main () { int panjang, lebar, luas; printf ( "Masukkan panjang : " ) ; scanf ( "%d" , &panjang ) ; printf ( "Masukkan lebar : " ) ; scanf ( "%d" , &lebar ) ; luas = panjang * lebar; printf ( "Luas persegi panjang adalah %d\n" , luas ) ; return 0 ; } Simpan source code dengan nama persegipanjang.c, tetapi sesuaikan aja dengan nama file yang dingi...
Post a Comment
Read more »

Download Driver Printer Canon Pixma Ip2770

  Silahkan Download file driver printer Canon Pixma Ip 2770   melalui link di bawah ini, semoga bisa bermanfaat buat kita semua. Jika ada yang mau ditanyakan atau ada kesusahan dalam proses install Visual Studionya. bisa langsung comment di bawah iyoo atau juga bisa melalui Contak Person . Link Download driver printer   Canon Pixma Ip 2770 iP2700 series Printer Driver Ver. 2.56c (Windows) (id.canon) Sekian Dan Terimakasih ....
Post a Comment
Read more »