Home » , » Membuat Tabel pada HTML

Membuat Tabel pada HTML

Written By Teguh Aljauza on Jumat, 02 Agustus 2013 | 06.35

HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Tabel tag setidaknya membutuhkan 3 buah tag, yaitu <tabel>, <tr>, dan <td>.

  • <tabel> digunakan untuk memulai tabel
  • <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  • <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Tag table menggunakan atribut border sebagai ukuran ketebalan garis, jika tanpa garis maka isi dengan 0.
Contoh penggunaan tag:

<table border="1">
    <tr>
        <td> Baris 1, Kolom 1</td>
        <td> Baris 1, Kolom 2</td>
        <td> Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 2, Kolom 1</td>
        <td> Baris 2, Kolom 2</td>
        <td> Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 3, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>

Hasil Output:

Baris 1, Kolom 1 Baris 1, Kolom 2 Baris 1, Kolom 3
Baris 2, Kolom 1 Baris 2, Kolom 2 Baris 2, Kolom 3
Baris 3, Kolom 1 Baris 3, Kolom 2 Baris 3, Kolom 3
Baris 4, Kolom 1 Baris 4, Kolom 2 Baris 4, Kolom 3

Penggunaan atribut cellpadding dan cellspacing:
cellpadding => untuk jarak antara teks dengan garis
cellpacing   => untuk jarak antara garis pinggir cell

Memberi warna pada background cell/kolom/baris dengan atribut  bgcolor="";
Isi dengan nama warna dalam bahasa inggris, misalkan bgcolor="yellow";

Contoh Penggunaan:
<table border="1" cellpadding="5" cellspacing="5">
    <tr bgcolor="yellow">
        <td> Baris 1, Kolom 1</td>
        <td> Baris 1, Kolom 2</td>
        <td> Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 2, Kolom 1</td>
        <td> Baris 2, Kolom 2</td>
        <td> Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 3, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td bgcolor="orange"> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>


Hasil Output:
Baris 1, Kolom 1 Baris 1, Kolom 2 Baris 1, Kolom 3
Baris 2, Kolom 1 Baris 2, Kolom 2 Baris 2, Kolom 3
Baris 3, Kolom 1 Baris 3, Kolom 2 Baris 3, Kolom 3
Baris 4, Kolom 1 Baris 4, Kolom 2 Baris 4, Kolom 3

Gunakan atribut width="" untuk menentukan lebar tabel/kolom
Kita dapat memerge cell dalam tabel seperti contoh berikut ini:

<table border="1" width="400" align="center">
  <tr>
    <td scope="col">Teks</td>
    <td colspan="3" scope="col" align="center">Teks</td>
  </tr>
  <tr>
    <td rowspan="2" align="center">Teks</td>
    <td>Teks</td>
    <td>Teks</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Teks</td>
    <td>Teks</td>
    <td>Teks</td>
  </tr>
</table>

Hasil Output:

Teks Teks
Teks Teks Teks Teks
Teks Teks Teks
Share this article :

0 komentar:

Poskan Komentar

 
Link : Google | My Facebook | Follow Twitter | Harga Market
Copyright © 2013. Script Web Tutorial - All Rights Reserved
Posted by Teguh Aljauza
Powered by Blogger