Belajar HTML : HTML Tabel
Belajar HTML : HTML Tabel - Hello gans, ketemu lagi untuk membahas tentang html. Disini saya akan membahas tentang HTML tabel. Langsung saja kite ke materi nya ya dibawah ini.Element Tabel
Element tabel berfungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding, cellspacing, width dan height. Element tabel berisikan element CAPTION, TH, TR dan TD. Berikut sintaks nya:
<table align="align" | "center" | "right " bgcolor="color" border="pixel" cellpadding="pixel" cellspacing="pixel" width="pixel" | "%" height="pixel" | "%">Atribut pada <table> </table>
. . . . .
</table>
- border
- align (perataan table)
- width
- height
- bgcolor
- align
- bgcolor
- width
- height
- align
- bgcolor
- width
- height
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 diatas tabel) dan bottom (judul terletak dibawah tabel). Berikut sintaks nya:
<caption align="top" | "bottom">Element TR (Table Row)
. . . . .
</caption>
Element TR mendefinisikan beris 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. Berikut sintaks nya:
<tr align="left" | "right" | "center" valign="top" | "middle" | "bottom" bgcolor="color">Element TH (Table Header) dan TD (Table Data)
. . . . .
</tr>
Element TR mendifinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attibut yang terdapat pada element ini ialah align, valign, bgcolor, colspan dan rowspan. berikut sintaksnya :
<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>
Example:
Membuat tabel nama, berikut sintaknys:
<html>Maka, hasilnya seperti dibawah ini:
<head>
<title>Contoh 1</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="1" cellspacing="0">
<caption align="top"><b>Tabel 1.1</b></caption>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<th>1.</th>
<th>Rina Hastuti</th>
</tr>
<tr>
<th>2.</th>
<th>Ali Amran</th>
</tr>
<tr>
<th>3.</th>
<th>Rahmat</th>
</tr>
</table>
</body>
</html>
