Tabel Pada HTML Dasar | Kita Ngoding HTML #09

Tag Table HTML.- Tutorial HTML Dasar yang akan kita bahas pada halaman ini yaitu tentang Cara Membuat Tabel Dengan Kode HTML.

Mengenal Tabel Pada HTML

Sebuah tabel HTML memungkinkan para pengembang web (web developers) untuk mengatur data ke dalam baris dan table. Misalnya kita ingin menampilkan score pertandingan, anggaran, kalender dan lain sebagainya kita pasti membutuhkan sebuah tabel untuk mengorganisir data-data tersebut.

Admin telah merangkum tag sebuah tabel HTML berserta penjelasannya adalah sebagai berikut :

Tag	Keterangan
<table>	Element pertama untuk mendifinisikan sebuah table
<tr> “Tabel Row”	Element untuk membuat baris / row
<th> “Tabel Header”	Element untuk membuat judul setiap kolom
<td> “Tabel Data”	Element untuk memasukkan data
<caption>	Element untuk menambahkan keterangan terhadap sebuah tabel.

Baca Juga : Styles Dan Formating Pada HTML

Contoh Coding HTML Dasar

Silahkan kalian ketik kode dibawah ini atau kalian juga bisa men-Copy paste kode html dibawah ini ke editor yang kalian gunakan.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Tabel</title>
</head>
<body>
<table border="1">
  <caption>Contoh Tabel Hasil Penjualan</caption>
  <tr>
    <th>Nama Siswa</th>
    <th>Umur</th>
    <th>Alamat</th>
  </tr>
  <tr>
    <td>Nispul</td>
    <td>29</td>
    <td>Lombok Timur</td>
  </tr>
  <tr>
    <td>Watoni</td>
    <td>25</td>
    <td>Lombok Timur</td>
  </tr>
</table>
</body>
</html>

Output :

Admin juga telah merangkum property yang dibutuhkan oleh sebuah tabel HTML adalah sebagai berikut:

Nama Property	Keterangan
Border	Memberikan batas antara cell
Cellspacing	Mengatur jarak antar border
cellpadding	Memberikan ruang dalam cell
Text-align	Perataan text dalam cell
Colspan	Memotong / Menggabungkan Kolom
Rowspan	Memotong / menggabungkan baris
id	Memberikan kode uniq pada sebuah tabel

Baca Juga : List Pada HTML

Contoh penggunaan colspan dan rowspan antara lain:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Tabel</title>
</head>
<body>
<table border="1">
  <caption>Contoh Penggunaan Rowspan Dan Collspan</caption>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td rowspan="2" colspan="2"> Kosongkan?? </td>
    <td>2.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
  </tr>
</table>
</body>
</html>

Output :

Baca Juga : Cara Menggunakan CSS Di HTML

Admin rasa cukup singkat dan jelas bahasan kita diatas. untuk pembahasan kita selanjutnya kita akan membahas tentang list html.

Namun sebelum itu, admin ingin merekomendasikan kepada kalian yang ingin menambah pengetahuan kalian tentang HTML. Silahkan pilih pembahasan dibawah ini, untuk pergi kehalaman materi yang terkait.

Artikel Lainnya :

Tutorial HTML #11 | Form Pada HTML Dasar

Tutorial HTML #10 | List Pada HTML

Tutorial HTML #09 | Tabel Pada HTML Dasar

Tutorial HTML #08 | Tag Image HTML Dasar

Tutorial HTML #07 | Membuat Link HTML

Tutorial HTML #06 | Styles Dan Formating Pada HTML

Tutorial HTML #05 | Tentang Tag Heading

Tutorial HTML #04 | Tentang Tag Paragraf HTML

Tutorial HTML #03 | Pengenalan Struktur HTML

Tutorial HTML #02 | Persiapan Sebelum Mulai Menulis Kode HTML

Tutorial HTML #01 | Pengenalan HTML Dasar