Selasa, 29 Mei 2018

Membuat tabel dalam html

Membuat tabel dalam html

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Kali ini kita akan membahas tentang membuat tabel dalam html.
Sebelum kita memasuki pembahasan, kita harus tahu dulu tag yang harus di gunakan dalam membuat tabel di html.

Tag-tag yang digunakan

Adapun tag-tag yang digunakan adalah tag :
  • <table></table> untuk pendeklarasian tabel dalam html
  • <th></th> untuk pendeklarasian header tabel di html
  • <tr></tr> untuk pendeklarasian row atau baris pada tabel di html
  • <td></td> untuk pendeklarasian data atau isi dari tabel yang ingin kita isi
Nah setelah kita mengetahui tag-tag apa saja yang perlu kita gunakan dalam pembuatan tabel di html ini, selanjutnya kita akan memasuki tahap dalam proses pengkodingan. Silahkan buka aplikasi editor anda misalnya Sublime Text 3 atau bisa juga Notepad++, atau yang sejenisnya lah. 

Code Html Untuk membuat Tabel 

Setelah anda buka silahkan ketik tag berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman </title>
</head>
<body>
<h1>Membuat Tabel di HTML</h1>
<table border="2px">
<th>kolom pertama</th>
<tr>
<td>Baris 1</td>
</tr>
<tr>
<td>Baris 2</td>
</tr>
<tr>
<td>Baris 3</td>
</tr>
<tr>
<td>Baris 4</td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan menampilkan seperti berikut.




Membuat dua tabel di html


Bagai mana untuk membuat 2 kolom?
Gampang kita tinggal deklarasikan lagi tag header tabelnya lagi dan menambahkan tag isi lagi sesuai dengan yang kita inginkan.

contoh:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman </title>
</head>
<body>
<h1>Membuat Tabel di HTML</h1>
<table border="2px">
<th>kolom pertama</th>
<th>kolom kedua</th>
<tr>
<td>Baris 1</td>
<td>Baris 1</td>
</tr>
<tr>
<td>Baris 2</td>
<td>Baris 2</td>
</tr>
<tr>
<td>Baris 3</td>
<td>Baris 3</td>
</tr>
<tr>
<td>Baris 4</td>
<td>Baris 4</td>
</tr>
</table>
</body>
</html>
Maka akan menampilkan hasil seperti berikut.



Seperti itu seterusnya mau 3 kolom mau 100 kolom tinggal kita deklarasikan header tabelnya dan tinggal kita isi bagian tabelnya.

Oke sekian dulu untuk hari ini, Semoga bermanfaat untuk kita semua, bila ada yang ingin di tanyakan silahkan berkomentar dibawah ini.
Jangan lupa Shere artikel ini agar Blog Giat Ngoding menjadi ramai. ^_^
Terimakasih.
Happy Coding :)

Tidak ada komentar:

Posting Komentar