Pada kesempatan kali ini saya akan membagikan
materi bagaimana cara membuat tabel didalam tampilan web menggunakan bahasa
pemrograman HTML.
Untuk lebih jelas kita pelajari terlebih
dahulu dasar-dasar atau element-elementnya.
ELEMENT TABLE
Element TABLE memiliki fungsi untuk membuat suatu data yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align untuk perataan teks, bgcolor untuk warna background, border untuk garis tepi, cellpadding untuk jarak antara tepi sel dengan isi sel, cellspacing untuk jarak antara sel, width untuk lebar tabel, height untuk tinggi tabel. Element TABLE berisikan element CAPTION, TH, TR dan TD.
Sintaks:
<table
align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%" >
........................
</table>
ELEMENT CAPTION
Element CAPTION berfungsi untuk membuat judul dari sebuah tabel yang kita buat. Element ini harus ada dalam element TABLE dan mempunyai attribute align dengan nilai top atau judul terletak di atas tabel, dan bottom atau judul terletak di bawah tabel.
Sintaks:
<caption align="top"|"bottom">
..........................
</caption>
ELEMENT TR (Table Row)
Element TR berfungsi mendefinisikan baris pada sebuah tabel, element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.
Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>
ELEMENT TH (Table Header) dan TD (Table Data)
Element TH dan TD merupakan sebuah informasi yang terdapat pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan
Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>
<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>
Element TABLE memiliki fungsi untuk membuat suatu data yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align untuk perataan teks, bgcolor untuk warna background, border untuk garis tepi, cellpadding untuk jarak antara tepi sel dengan isi sel, cellspacing untuk jarak antara sel, width untuk lebar tabel, height untuk tinggi tabel. Element TABLE berisikan element CAPTION, TH, TR dan TD.
Sintaks:
<table
align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%" >
........................
</table>
ELEMENT CAPTION
Element CAPTION berfungsi untuk membuat judul dari sebuah tabel yang kita buat. Element ini harus ada dalam element TABLE dan mempunyai attribute align dengan nilai top atau judul terletak di atas tabel, dan bottom atau judul terletak di bawah tabel.
Sintaks:
<caption align="top"|"bottom">
..........................
</caption>
ELEMENT TR (Table Row)
Element TR berfungsi mendefinisikan baris pada sebuah tabel, element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.
Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>
ELEMENT TH (Table Header) dan TD (Table Data)
Element TH dan TD merupakan sebuah informasi yang terdapat pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan
Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>
<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>
Untuk menambah pemahaman seperti biasa
silahkan kalian copy dan simpan source code html berikut dan simpan dengan nama
terserah anda.
<html>
<head>
<title>Latihan membuat tabel dalam HTML</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel daftar barang</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Daftar barang</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>CPU</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Monitor</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Mouse</td>
</tr>
</table>
</body>
</html>
<head>
<title>Latihan membuat tabel dalam HTML</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel daftar barang</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Daftar barang</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>CPU</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Monitor</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Mouse</td>
</tr>
</table>
</body>
</html>
0 komentar:
Posting Komentar