HTML Dasar Part 12 : Cara Membuat Tabel di HTML

By -

HTML Dasar Part 12: Cara Membuat Tabel di HTML <table>

Pada tutorial sebelumnya, kita telah mempelajari mengenai cara menambahkan gambar di HTML. Pertemuan kita kali ini akan membahas cara membuat tabel di HTML menggunakan tag <table>.
Tag Table adalah salah satu tag yang memiliki atribut terbanyak dalam HTML. Membahas seputar tabel, juga terdapat 2 tag penting lainnya, yaitu tag <tr> dan tag <td>. Ketiga tag tersebut sama-sama pentingnya, terutama dalam pendesainan tampilan website. So, agan / aganwati harus cukup menguasai tag-tag seputar tabel ini.
----------------------------------------------------------------------------------------------------

Cara Membuat Tabel di HTML

Untuk membuat tabel di HTML, setidakya kita membutuhkan 3 tag tadi, yaitu tag <table>; tag <tr>; dan tag <td>. Tag <table> digunakan untuk membuat tabel itu sendiri. Dalam tabel, tentunya kita membutuhkan beberapa baris atau kolom. Pembuatan baris dalam tabel, kita dapat menggunakan tag <tr> yang merupakan singkatan dari Table Row, sedangkan untuk membuat kolom, kita menggunakan tag <td> yang merupakan singkatan dari Table Data. Tag <td> juga berisi tulisan yang akan ditampilkan di HTML. mahaamesha.com 
Agar lebih mudah dalam memahami ketiga tag tersebut, kita langsung berlaih ke contoh kode HTML berikut ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | &lt;table&gt;</title>
</head>
<body>
<h1>Cara Membuat Tabel di HTML</h1>
Baris adalah yang mendatar<br/>
Kolom adalah yang menurun
<table border="1" bgcolor="orange" width="40%">
<tr>
          <td align="center">Baris 1, Kolom 1</td>
          <td align="center">Baris 1, Kolom 2</td>
          <td align="center">Baris 1, Kolom 3</td>
</tr>
<tr>
          <td align="center">Baris 2, Kolom 1</td>
          <td align="center">Baris 2, Kolom 2</td>
          <td align="center">Baris 2, Kolom 3</td>
</tr>
<tr>
          <td align="center">Baris 3, Kolom 1</td>
          <td align="center">Baris 3, Kolom 2</td>
          <td align="center">Baris 3, Kolom 3</td>
</tr>
<tr>
          <td align="center">Baris 4, Kolom 1</td>
          <td align="center">Baris 4, Kolom 2</td>
          <td align="center">Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
Save file tersebut menggunakan Notepad ++ dengan format .html. Kemudian, launch dengan web browser dan hasilnya akan seperti ini.
mahaamesha.com Perhatikan kode HTML di atas, kode tersebut menggunkan beberapa atribut. Atribut border mengatur garis tepi dari tabel. Value “1” merupakan ketebalan garis tepinya, 1 berarti 1 pixel. Atribut bgcolor mengatur warna background dari tabel. Value-nya berupa pilihan warna dalam bahasa Inggris. Selanjutnya adalah atribut width yang mengatur lebar / panjang tabel. Value “40%” berarti panjang tabel 40% dari panjang halaman yang di tampilkan. Ada juga atribut align yang mengatur letak dari teks. Secara umum, HTML menyediakan letak di left / center / right. Selain itu semua, masih ada banyak tag dan atribut tentang tabel.


“NB : Dulu, dalam pendesainan tampilan website, para programmer menggunakan tag <table> sebagai modal mencipataknnya. Karenanya ada banyak tag dan atribut dari tabel. Namun, cara seperti ini rumit, butuh kesabaran dan ketelitian tinggi, bahkan nalar kita harus berjalan ketika membuatnya. mahaamesha.com menyarankan untuk desain website lebih baik menggunakan CSS saja.”
----------------------------------------------------------------------------------------------------
Setelah memahami bagaimana cara membuat tabel di HTML menggunakan tag <table>; tag <tr>; dan tag <td>. Pada tutorial selanjutnya, kita akan membahas cara menambahkan komentar di HTML.


Created by mahaamesha :}

Comments

Post a Comment