Pada kesempatan kali ini saya akan berbagi cara membuat table dengan html. untuk lebih memudahkan kita dalam belajar terlebih dahulu kita harus mengetahui element-element table pada 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.
Sintaksnya adalah sebagai berikut:
<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 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>
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 lengkap table dengan html
<html>
<head>
<title>Latihan4-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>Rina
Hastuti</td>
</tr>
<tr>
<td>2.</td>
<td>Ali
Amran</td>
</tr>
<tr>
<td>3.</td>
<td>Rahmat</td>
</tr>
</table>
</body>
</html>
Demikian sedikit tentang cara membuat table pada html untuk tutorial selnjutnya akan dibahas tutorial membuat table dengan html dan css.
0 Komentar untuk "Membuat Table Pada HTML"