Sudah Baca Dasar HTML 3 belum? Kalo belum saya Sarankan Baca Dulu dasar HTML dari pertama sampai akhir yah. langsung saja kita akan belajar membuat tabel dengan html.
ELEMENT TABLE
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar tabel), height(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>
contoh tabel
| <html> <head> <title>Tutorial4-1</title> </head> <body> <table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" > <caption align="top"><b>Tabel 1.1</b></caption> <tr> <th>No.</th> <th>Nama</th> </tr> <tr> <td>1.</td> <td>Ilmu Sebelas</td> </tr> <tr> <td>2.</td> <td>Cahyo</td> </tr> <tr> <td>3.</td> <td>Iman</td> </tr> </table> </body> </html> |
| No. | Nama |
|---|---|
| 1. | Ilmu Sebelas |
| 2. | Cahyo |
| 3. | Iman |
ELEMENT CAPTION
Element CAPTION berfungsi membuat tabel dengan html yaitu judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak di bawah tabel).
Sintaks:
<caption align="top"|"bottom">
..........................
</caption>
Contoh Penggunaan ELEMENT CAPTION
| <html> <head> <title>Tutorial4-2</title> </head> <body> <table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" > <caption align="top"><b>Tabel 1.1</b></caption> <tr bgcolor="green"> <th>No.</th> <th>Nama</th> </tr> <tr bgcolor="yellow"> <td>1.</td> <td>Ilmu Sebelas</td> </tr> <tr bgcolor="red"> <td>2.</td> <td>Cahyo</td> </tr> <tr bgcolor="blue"> <td>3.</td> <td>Iman</td> </tr> </table> </body> </html> |
| No. | Nama |
|---|---|
| 1. | Ilmu Sebelas |
| 2. | Cahyo |
| 3. | Iman |
ELEMENT TR (Table Row)
Element TR mendefinisikan baris pada tabel dan 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 informasi 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>
Contoh Table Header
| <html> <head> <title>Tutorial 4-3</title> </head> <body> <table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" > <caption align="top"><b>Tabel 1.1</b></caption> <tr bgcolor="fuchsia"> <th colspan="2">Data Siswa</th> </tr> <tr bgcolor="green"> <th>No.</th> <th>Nama</th> </tr> <tr bgcolor="yellow"> <td>1.</td> <td>Ilmu Sebelas</td> </tr> <tr bgcolor="red"> <td>2.</td> <td>Cahyo</td> </tr> <tr bgcolor="blue"> <td>3.</td> <td>Iman</td> </tr> </table> </body> </html> |
Tampilan html tersebut adalah
| Data Siswa | |
|---|---|
| No. | Nama |
| 1. | Ilmu Sebelas |
| 2. | Cahyo |
| 3. | Iman |
Cape juga yah... Jangan Lupa Baca juga Dasar HTML 5. Insya Allah akan saya posting secepatnya.
0 Komentar
Masukan Tanggapan Anda