Tabel merupakan fungsi yang digunakan untuk menyajikan data dalam kolom dan baris. Lalu,bagaimana cara membuat tabel dengan HTML. Ada unsur-unsur apa saja untuk membuat tabel dengan HTML?. Di bawah ini akan menjawab semua pertanyaan tersebut.
1. Cara Membuat Tabel dengan HTML
Untuk membuat tabel dengan HTML harus diawali dengan tag <table> dan diakhiri dengan tag </ table>.
2. Elemen yang ada di HTML
| Elemen | Fungsi |
| caption | Mendifinisikan judul tabel |
| th | Table Heading. Membuat heading dalam cell |
| tr | Table Row. Membuat baris tabel |
| td | Table Data. Membuat kolom |
3.Cara Membuat Tabel
Sebelum melanjutkan belajar ini, mari kita tahu ada atribut dalam tag td.
| Attibute | Fungsi |
| align="center|left|right" | Perataan teks di dalam cell secara horizontal |
| valign="top|middle|bottom" | Pertaaan teks di dalam cell secara vertikal |
| colspan="n" | Menggabungkan kolom sebanyak n |
| rowspan="n" | Menggabungkan baris sebanyak n |
| cellspacing="n" | Memberikan jarak antar sel |
| cellpadding="n" | Memberikan jarak dengan border |
| bgcolor="color" | Memberi warna pada background |
| background="gambar" | Memberi background bergambar |
Sekarang kita membuat tabelnya:
1. Dengan Atribut menyelaraskan, bgcolor, dan background
Untuk menggunakan atribut background diperkirakan sudah tahu cara memasukkan alamat file dalam HTML.
<html>
<head> <title> Table </ title> </ head>
<body>
<table border = "1" background = "gambar.ekstensi" align = "center">
<tr>
<td> Android Versi Nomor </ td> <td> Android Nama Versi </ td>
</ tr>
<tr>
<td align = "center" bgcolor = "green"> 1,5 </ td> <td> Cupcake </ td>
</ tr>
<tr>
<td align = "center" bgcolor = "biru"> 1.6 </ td> <td> Donut </ td>
</ tr>
<tr>
<td align = "center" bgcolor = "kuning"> 2.0 </ td> <td> Eclair </ td>
</ tr>
</ table>
</ body>
</ html>
Disimpan dengan ekstensi .html
Hasilnya:
Penggunaan atribut bgcolor dan menyelaraskan dalam tabel menggunakan HTML
Tabel dengan pusat menyelaraskan dan bgcolor.
2 Menggunakan Atribut colspan dan rowspan
A. colspan
<html>
<head> <title> Table </ title> </ head>
<body>
<table border = "1">
<tr>
<td colspan = "2"> Kolom Yang digabungkan </ td>
</ tr>
<tr>
<td> Android Versi Nomor </ td> <td> Android Nama Versi </ td>
</ tr>
</ table>
</ body>
</ html>
Hasilnya:
Merger kolom dengan atribut colspan
Menggabungkan Kolom.
B. rowspan
<html>
<head> <title> Table </ title> </ head>
<body>
<table border = "1">
<tr>
<td rowspan = "2"> Kolom Yang digabungkan </ td> <td> Nomor Versi Android </ td>
</ tr>
<tr>
<td> Nama Versi Android </ td>
</ tr>
</ table>
</ body>
</ html>
Hasilnya:
Menggunakan atribut rowspan
Menggabungkan Line.
3 Menggunakan cellspacing dan cellpadding Atribut
A. cellspacing
<html>
<head> <title> Table </ title> </ head>
<body>
<table border = "1" cellspacing = "15">
<tr>
<td> Android Nama Versi </ td> <td> Android Versi Nomor </ td>
</ tr>
<tr>
<td> 1.5 </ td> <td> Cupcake </ td>
</ tr>
</ table>
</ body>
</ html>
Hasilnya:
Mengatur jarak ke atribut cellspacing
Mengatur Sel Spacing.
B. cellpadding
<html>
<head> <title> Table </ title> </ head>
<body>
<table border = "1" cellpadding = "15">
<tr>
<td> Android Nama Versi </ td> <td> Android Versi Nomor </ td>
</ tr>
<tr>
<td> 1.5 </ td> <td> Cupcake </ td>
</ tr>
</ table>
</ body>
</ html>
Hasilnya:
Menggunakan cellpadding untuk tabel
Penggunaa cellpadding.
Posted by Unknown on Minggu, 31 Agustus 2014 - Rating: 4.5
Title : Cara Membuat Tabel Data Menggunakan HTML
Description : Tabel merupakan fungsi yang digunakan untuk menyajikan data dalam kolom dan baris. Lalu,bagaimana cara membuat tabel dengan HTML . Ada uns...
Description : Tabel merupakan fungsi yang digunakan untuk menyajikan data dalam kolom dan baris. Lalu,bagaimana cara membuat tabel dengan HTML . Ada uns...
0 Response to "Cara Membuat Tabel Data Menggunakan HTML"
Posting Komentar
Silahkan berkomentar relevan atau berhubungan dengan artikel diatas.