Bagaimana cara menuliskan tag untuk membuat tabel pada struktur html?

Tabel digunakan untuk menampilkan data dalam bentuk baris (row) dan kolom (column). Tabel pada HTML memakai tag table. Tabel tidak bisa berdiri sendiri dan harus mempunyai tag pendukung di dalam tag table. Beberapa tag pendukung penting seperti tag th untuk membuat header pada tabel, tag tr untuk membuat baris baru pada tabel, tag td untuk membuat kolom baru pada suatu baris dan beberapa tag lain. Di bawah ini contoh pemakaian tag table, tag th, tag tr dan tag td untuk menampilkan data dalam bentuk tabel.

Table of Contents

• Tag tr dan td
• Atribut colspan
• Atribut rowspan
• Tag thead, tbody dan tfoot
• Cara Membuat Tabel di HTML dan CSS
• 1. Menampilkan Tabel
• 2. Memberi Warna pada Tabel HTML
• 3. Menggabungkan Kolom dan Baris di Tabel HTML
• Langkah langkah membuat tabel HTML?
• Bagaimana cara membuat tabel pada HTML tuliskan strukturnya?
• Apa itu tag table pada HTML?
• Bagaimana cara untuk membuat baris pada tabel?

Tutorial sebelumnya : Cara Membuat List Di HTML

<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

Atribut border digunakan untuk memberikan garis batas antara baris dan kolom pada tabel.

Tag tr dan td

Tag tr adalah tag untuk menambahkan baris (row) baru di dalam tabel. Sedangkan tag td adalah tag untuk menambahkan kolom baru di dalam baris yang dibuat oleh tag tr. Dua tag ini membentuk barisan data pada tabel dalam bentuk baris dan kolom. Setiap data di dalam baris dan kolom tertentu dinamakan cell.

Referensi Elemen Table

<table border="1">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table> 

Tag th

Tag th adalah tag untuk menambahkan kolom baru di dalam tag tr. Tag ini dipakai untuk membuat kolom-kolom header pada tabel. Tag th fungsinya hampir sama dengan tag td, bedanya tag th diperuntukkan khusus untuk membuat kolom pada header tabel.

 <table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Atribut colspan

Atribut colspan dipakai pada tag th dan td. Atribut colspan berguna untuk menggabungkan beberapa kolom menjadi satu kolom.

 <table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table> 

Atribut rowspan

Atribut rowspan dipakai pada tag th dan td. Atribut rowspan berguna untuk menggabungkan beberapa baris menjadi satu baris.

 <table border="1">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table> 

Tag thead, tbody dan tfoot

Tag thead, tbody dan tfoot dipakai secara bersamaan untuk mengelompokkan header, body dan footer di dalam tabel.

 <table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table> 

Tutorial selanjutnya : Membuat Halaman Web Dengan HTML Dan CSS
Daftar tutorial : Tutorial Belajar HTML

Ilustrasi membuat tabel di HTML. Foto: Lukas/Pexels

Pada artikel ini How To Tekno akan membagikan tutorial cara membuat tabel di HTML. Berbeda dengan membuat tabel di Microsoft Word atau aplikasi lainnya, lewat HTML membuat tabel menjadi lebih rumit karena menggunakan formula.

Tabel dipakai jika pengguna ingin mendapatkan tampilan data dalam bentuk baris dan kolom, sehingga data yang ingin ditunjukkan pada pembaca bisa lebih mudah untuk dipahami.

Membuat tabel di HTML umumnya menggunakan tiga tag, yaitu Tabel, TR, dan TD. Ketiga tag tersebut wajib dipakai untuk pembuatan tabel yang memiliki fungsi berikut:

• <table>: tag untuk membuat tabel.

• <tr>: tag untuk membuat baris, TR adalah kepanjangan dari Table Rows.

• <td>: tag untuk untuk membuat kolom pada tabel, TD memiliki kepanjangan Table Data.

Supaya lebih jelas, simak artikel mengenai cara membuat tabel di HTML berwarna berikut.

Cara Membuat Tabel di HTML dan CSS

Ilustrasi membuat tabel di HTML. Foto: Digital Buggu/Pexels

Mengutip Modul Membuat Tabel Pada HTML, berikut ini adalah tutorial cara membuat tabel di tengah HTML yang disertai dengan contoh kueri yang digunakan:

1. Menampilkan Tabel

Langkah pertama adalah menampilkan tabel. Perintah dasar HTML yang dipakai adalah <table></table>. Sekarang, simak contoh rumus coding yang dipakai untuk membuat tabel 2 x 2.

<html>

<head>

<title>Data Kelas A</title>

</head>

<body>

<h2>Data Kelas A</h2>

<table border="1">

<tr>

<td>Andi</td>

<td>Laki-Laki</td>

</tr>

<tr>

<td>Putri</td>

<td>Perempuan</td>

</tr>

</table>

</body>

</html>

Perhatikan pada perintah <table border="1">, maksudnya adalah tebal garis tabel yang digunakan adalah 1 pixel. Kamu bisa menggantinya sesuai dengan keinginan.

2. Memberi Warna pada Tabel HTML

Ilustrasi membuat tabel di HTML. Foto: Negative/Pexels

Agar tabel yang kamu buat terlihat lebih menarik, kamu bisa memberi warna pada tabel HTML dengan memasukkan tambahan kueri di bagian <tr> menjadi <tr bgcolor=warna yang dipilih>. Misalnya:

3. Menggabungkan Kolom dan Baris di Tabel HTML

Selanjutnya adalah bagaimana cara menggabungkan kolom dan baris di table HTML, seperti fitur merger ketika kamu membuat tabel di lembar kerja Microsoft Word.

Kamu bisa menggunakan perintah <td colspan=n> jika ingin merger kolom dan perintah <td rowspan=n> jika ingin merger baris.

Pada perintah di atas, ubah n dengan jumlah kolom atau baris yang akan digabungkan. Bisa lihat contoh perintah di bawah ini:

<td rowspan=2>NO.</td>

<td rowspan=2>NAMA BARANG </td>

<td colspan=3><center>UKURAN</td>

<td rowspan=2><center>PRODUSEN</td>

Dari contoh perintah di atas, maka kamu akan mendapatkan tabel dengan dua baris di-merger untuk kolom pertama, kedua, dan keenam.

Sementara itu, kamu juga akan mendapatkan kolom tiga, empat, lima yang sudah digabungkan.

Itulah beberapa tutorial cara membuat tabel di HTML. Sebenarnya belajar HTML tidaklah sulit jika kamu mengetahui struktur dasarnya, kemudian hanya perlu mengubah sesuai dengan keinginan dan kebutuhanmu.

Langkah langkah membuat tabel HTML?

Cara Membuat Tabel di HTML <table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel. <thead> – berfungsi untuk membungkus kepala tabel. <tbody> – berfungsi untuk membungkus tubuh tabel. <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row.

Bagaimana cara membuat tabel pada HTML tuliskan strukturnya?

Struktur dasar membuat tabel pada HTML adalah tag <table>, <tr> dan <td>. Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.

Apa itu tag table pada HTML?

Penjelasan HTML table. Tabel (Table) adalah sebuah data tabular dalam bentuk grid yang terdiri dari kolom (column), baris (row) dan celll yang merupakan pertemuan antara kolom dan baris. HTML <table> element merepresentasikan data dengan lebih dari satu dimensi dalam bentuk sebuah tabel (table).

Bagaimana cara untuk membuat baris pada tabel?

Klik sel di atas atau di bawah tempat yang ingin Anda tambahkan baris. Di bawah Alat Tabel, di tab Tata Letak, lakukan salah satu hal berikut: Untuk menambahkan baris di atas sel, klik Sisipkan di Atas dalam grup Baris dan Kolom. Untuk menambahkan baris di bawah sel, klik Sisipkan di Bawah dalam grup Baris dan Kolom.

Bagaimana Membuat tabel di HTML?

Bagaimana cara membuat tabel pada HTML tuliskan strukturnya?

Jika ingin membuat tabel HTML menggunakan tag apa?

Apa itu tag table HTML?