Cara Membuat Tabel dengan HTML

Hai Bangsawan Tua .... Membuat sebuah website tidak lepas dari peran kode HTML. Karena memang untuk membuat sebuah website membutuhkan kode HTML. Kode HTML ada beraneka ragam salah satunya adalah tabel.

Tabel sendiri memiliki fungsi untuk menampilkan sejumlah data yang bisanya berupa kata – kata atau angka sehingga orang yang melihat semakin mengerti yang dimaksudkan. Tabel memiliki dua komponen utama yaitu baris dan kolom. Jika kita ingin membuat tabel dibutuhkan elemen dan atribut apa saja ? berikut dibawah ini

            Kumpulan Elemen untuk membuat Tabel

<TR>  : Baris yang terdapat pada tabel, dapat dinyatakan dalam tag <TR> ... </TR>

<TD>  : Tabel Data, kolom pada tabel yang merupakan tempat untuk menyimpan informasi, dapat dinyatakan dalam tag <TD> ... </TD>

<TH>   : Tabel Header, yang diletakan pada bagian paling atas atau paling kiri dari tabel, dapat dinyatakan dalam tag <TH> ... </TH>

<CAPTION>  : Judul tabel yang terletak diluar tabel dan biasanya berada di atas maupun dibawah tabel, dapat dinyatakan dalam tag <CAPTION> ... </CAPTION>

            Kumpulan Atribut untuk membuat tabel

Border         : Digunakan untuk menetukan tebal garis tabel

Cellspacing  : Digunakan untuk menentukan jumlah spasi antar sel

Cellpadding : Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel

Width           : Digunakan untuk mengatur lebar tabel

Align            : Digunakan untuk mengatur perataan tabel secara horizontal

Valign          : Digunakan untuk mengatur perataan tabel secara Vertikal

Bgcolor        : Digunakan untuk pengaturan background tabel

Rowspan      : Digunakan untuk menggabungkan beberapa baris tabel

Colspan        : Digunakan untuk menggabungkan beberapa kolom tabel

Dari pada binggung, langsung saja kita praktek simak penjelasan saya dibawah ini

·        Contoh 1

 <table border = 1>

<caption><b>Contoh Tabel 1</b></caption>

<tr>

<td>Baris 1 Kolom 1</td>

<td>Baris 1 Kolom 2</td>

</tr>

<tr>

<td>Baris 2 Kolom 1</td>

<td>Baris 2 Kolom 2</td>

</tr>

</table> 

Hasilnya 

·        Contoh 2

<table border = 3>

<caption><b>Contoh Tabel 2</b></caption>

<tr>

<th> Contoh A </th>

<th> Contoh B </th>

</tr>

<tr>

<td>Baris 2 Kolom 1</td>

<td>Baris 2 Kolom 2</td>

</tr>

<tr>

<td>Baris 3 Kolom 1</td>

<td>Baris 3 Kolom 2</td>

</tr>

</table> 

Hasilnya

·        Contoh 3

<table border = 2 width = "50%">

<caption><b>Contoh Tabel 3</b></caption>

<tr>

<th>Atas</th>

<td align = left valign ="top">*</td>

<td align = right valign ="top">*</td>

</tr>

<tr>

<th>Bawah</th>

<td align = left valign ="bottom">*</td>

<td align = right valign ="bottom">*</td>

</tr>

</table> 

Hasilnya

·        Contoh 4

<table border = 1 width = "25%">

<caption><b>Contoh Tabel 4</b></caption>

<tr bgcolor="red">

<td align="center">Merah</td>

<td align="center">Merah</td>

</tr>

<tr>

<td align="center" bgcolor="green">Hijau</td>

<td align="center" bgcolor="blue">Biru</td>

</tr>

</table> 

Hasilnya

Baca Juga : Mengenal Lebih Dekat HTML