Membuat Table dengan HTML

Table adalah salah satu elemen yang ada pada HTML. Fungsi table adalah untuk membuat suatu tata letak data dengan rapih tersusun dari kolom dan baris. Seperti halnya kita membuat table pada word ataupu excel, pada HTML bentuk table seperti itu. Namun untuk membuat table ada beberapa code yang perlu kalian ketahui. Sesuai dengan pembahasan kita kali ini, kita akan mempelajari bagaimana cara membuat table dengan HTML.

Untuk membuat table pada HTML terbilang cukup mudah. Ada beberapa code yang kalian harus hapal seperti tag <table></table>, <tr></tr>, dan <td></td>. Ketiga tag tersebut adalah komponen untuk membuat suatu table yang utuh. Mari kita bahas satu persatu dimulai dari tag table. Table ini adalah code yang harus kalian buat sebelum membuat table. Fungsinya sebagai sintak pembuka lalu nanti didalamnya kita akan atur untuk tag tr dan td.

Tag tr ini adalah untuk membuat baris pada tabel, sedangkan tag td untuk membuat kolom pada table. Jadi semisalnya kalian ingin membuat 3 buah kolom dalam satu baris, maka kalian harus membuat 3 buah tag td dalam satu tag tr, dan seterusnya. Bila baris pertama memiliki 3 buah kolom dalam satu baris, maka baris selanjutnya pun harus memiliki 3 buah kolom. Jika kurang atau lebih biasanya tampilan table akan menjadi berantakan.

Baik sekarang kita mulai cara penulisannya pada HTML. Kalian bisa ikuti contoh code berikut ini.

table.html

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Nama</td>
    <td>Alamat</td>
    <td>No.Tlp</td>
  </tr>
  <tr>
    <td>samsul</td>
    <td>Jl.Merdeka1</td>
    <td>02145610</td>
  </tr>
   <tr>
    <td>Udin</td>
    <td>Jl.Merdeka2</td>
    <td>02145610</td>
  </tr>
   <tr>
    <td>Maleh</td>
    <td>Jl.Merdeka3</td>
    <td>02145610</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Jl.Merdeka4</td>
    <td>02145610</td>
  </tr>
</table>

</body>
</html>

Sekarang kalian simpan file tersebut dengan format HTML dengan nama sesuai keinginan kalian. Untuk melihat hasilnya kalian cukup buka file barusan pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-table-dengan-html-rangga1-240717

Mudah bukan ?

Sekian pembahasan mengenai cara membuat table pada HTML. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *