Tuesday, March 7, 2017

Membuat Table di HTML

Diterbitkan 11:30:00 PM

Sobat jamane komputer kali ini saya ingin menyampaikan tentang pembuatan tabel di dalam bahasa pemrograman HTML, silahkan teman-teman untuk menyimak uraian sebagai berikut ya:

Element TABLE
Element TABLE digunakan untuk membuat data multidimensi yang terdiri kolom dan baris. Element ini memiliki atribut seperti align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antara sel), width (lebar tabel), height (tinggi tabel). Element TABLE berisi element CAPTION, TH, TR dan TD.

Sintaks sebagai berikut:

<table
align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%" >
........................
</table>

Element CAPTION
Element CAPTION digunakan untuk membuat judul dari tabel. Element ini berada dalam element TABLE dan memiliki attribute align dengan nilai top (posisi judul terletak di atas tabel), dan bottom (posisi judul terletak di bawah tabel).

Sintaks sebagai berikut:
<caption align="top"|"bottom">
..........................
</caption>

Element TR (Table Row)
Element TR berupa baris pada tabel dan element berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Atribut yang terdapat pada element ini adalah align, valign (posisi vertikal), dan bgcolor.

Sintaks sebagai berikut:
<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 menggambarkan isi sel sebagai header sel pada kolom tabel dan data tersebut tercetak tebal dan pada posisi ditengah sel. Element TH dan TD ini terletak di dalam element TR. Atribut kedua element ini adalah align, valign, bgcolor, colspan, rowspan

Sintaks sebagai berikut:
<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>

Uji Coba

Untuk lebih memahami uraian di atas, silahkan sobat jamane komputer untuk mencoba latihan di bawah ini ya:

Uji Coba 1:
Buatlah tabel untuk teks di bawah ini ya sobat:

Tabel 1

No. Nama
1. Adam Hanafi
2. Firman Utina
3. Rahmat Fauzi

Nama file: uji_coba_1.html

<html>
<head>
<title>Uji Coba 1</title>
</head>
<body>
<table align="center" border="1" bgcolor="yellow" cellpadding="4" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Adam Hanafi</td>
</tr>
<tr>
  <td>2.</td>
<td>Firman Utina</td>
</tr>
<tr>
  <td>3.</td>
<td>Rahmat Fauzi</td>
</tr>
</table>
</body>
</html>