Sunday, November 20, 2016

Langkah Pembuatan Tabel pada HTML



Advertisement


Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>.
Elemen table berisi property <tr> untuk menentukan baris(table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table(table data).
Struktur elemen table adalah sebagai berikut:


   <table>
       <tr>
          <td>data baris 1 kolom 1</td>
          <td>data baris 1 kolom 2</td>
       </tr>
    </table>

CONTOH PENGGUNAAN DARI TAG <td>..</td>


<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html
maka hasilnya akan seperti ini : 

Untuk mendifinisikan table heading atau judul tiap kolom dapat menggunakan tag

<th> ….. </th>

Contoh dari penggunaan tag <th> ….. </th> adalah : 


<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>---Name---</th>
<th>---Salary---</th>
</tr>
<tr>
<td>Fahing</td>
<td>7000</td>
</tr>
<tr>
<td>Umiey</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Jika kode diatas diaplikasikan, maka akan tampil seperti dibawah ini 


Atribut Elemen Tabel

  Width                   =panjang(lebar table, pixel atau persen)
  Height                 =panjang(tinggi table, pixel atau persen)
  Border                 =pixel(tebal garis tepi)
  Cellspacing         =pixel(spasi antar sel)
  Cellpadding         =pixel(spasi di dalam sel)
  Align                    =[left|center|right](perataan table)
  Bgcolor                =warna(warna latar belakang table)

Atribut Table Row

  Align        =[left|center|right](perataan sebaris sel secara horizontal)
  Valign      =[top|middle|bottom](perataaan sebaris sel secara vertical)
  Bgcolor    =warna(warna latar belakang baris)

Atribut Tabel Data

Align          =[left|center|right](perataan horizontal)
Width         =[top|middle|bottom](perataan vertical)
Height        =pixel(tinggi sel, pixel atau persen)
Bgcolor      =warna(warna latar belakang sel)

Untuk meningkatkan pengetahuan anda tentang tabel pada html. baca artikel berikutnya yang membahas tentang kumpulan contoh pembuatan tabel pada html

[[ Berikutnya : Contoh Pembuatan Tabel pada Html >>



Artikel Terkait

Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.

Terima Kasih.

EmoticonEmoticon