Cara menggunakan script tabel html

Question

Tabel di HTML merupakan sesuatu yang sering kita jumpai saat browsing di sebuah website. Penggunaan tabel memang diperlukan untuk menyajikan suatu data yang dapat mudah dipahami informasinya oleh pembaca. Dengan menggunakan tabel informasi yang disajikan menjadi lebih terstruktur dan jelas. Kali ini saya akan membahasas lengkap tentang cara membuat tabel pada html.

Table of Contents Show

Struktur sederhana Tag Table
Cara membuat tabel pada HTML dengan sturktur sederhana
Membuat Border Tabel di HTML
Mengatur Jarak Tabel pada HTML dengan Atribut Cellspacing dan Cellpadding
1. Atribut Cellspacing
2. Atribut Cellpadding
Menggabungkan Cell Tabel di HTML dengan Atribut Colspan dan Rowspan
1. Atribut Colspan
2. Atribut Rowspan
Apa perintah HTML untuk membuat tabel?
Bagaimana cara untuk membuat baris pada table?
Manakah dari tag berikut yang digunakan untuk menambahkan baris dalam tabel?
Apa yang dimaksud dengan tabel HTML?

Didalam pengembangan website, kita dapat membuat tabel dengan script tabel yang ada di HTML. Didalam postingan ini akan kita bahas bagaimana cara membuatnya. Sangat sederhana sebetulnya kode tabel di HTML diantaranya terdiri dari tag pembuka <table> dan tag penutup </table> , Didalam tag inilah yang nantinya akan kita buat tabel sesuai dengan keiinginan kita.

Daftar Isi

Struktur sederhana Tag Table

<table>
// Membuat Baris dan kolom disini
</table>

Tabel terdiri dari cell baris dan kolom. Dapat kita lihat contoh gambar dibawah nomor 1 hingga 6 merupakan baris dan huruf A & B adalah kolom di dalam tabel tersebut.

Untuk membuat baris dan kolom dengan menggunakan script tabel di HTML kita menggunakan tag:

<tr> = Untuk menyatakan baris tabel
<td> = Untuk menyatakan kolom tabel (digunakan untuk cell isi tabel)
<th> = Untuk menyatakan kolom sebagai header tabel (default akan Bold judul kolom)

Selain tag kolom dan baris diatas terdapat tag lain yang menjadi unsur penting dalam sebuah tabel yaitu

<thead> = Untuk meyatakan Header tabel
<tbody> = Untuk menyatakan bagian body tabel

Cara membuat tabel pada HTML dengan sturktur sederhana

<!DOCTYPE html>
<html>
<body>

<h2>Belajar Tabel</h2>

<table>
  <tr>
    <th>No</th>
    <th>Nama</th> 
    <th>Jurusan</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Setiawan Dimas</td>
    <td>Teknik Informatika</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Wahyu Widya</td>
    <td>Teknik Sipil</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Erik Wasis</td>
    <td>Teknik Listrik</td>
  </tr>
</table>

</body>
</html>

Membuat Border Tabel di HTML

Untuk membuat border kita dapat menggunakan atribut border dengan nilai border yang kita inginkan. Penambahan border dapat ditambahkan dibagian atribut pada tag pembuka tabel yang ingin dibuat bordernya

<table border="1px">

Selain cara diatas bisa juga ditambahkan di bagian <head> … </head> pada dokumen html yang dibuat.

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

Mengatur Jarak Tabel pada HTML dengan Atribut Cellspacing dan Cellpadding

1. Atribut Cellspacing

Atribut cellspacing digunakan untuk mengatur jarak spasi antar cell didalam tabel. Nilai dari atribut cellspacing menggunakan ukuran pixel (px).

2. Atribut Cellpadding

Atribut Cellpadding digunakan untuk mengatur jarak spasi antara dinding cell dengan isi cell itu sendiri. Atribut cellpadding juga menggunakan nilai dengan ukuran pixel (px).

Contoh Penggunaan:

<table border="1px" cellpadding="30px" cellspacing="15px">

Menggabungkan Cell Tabel di HTML dengan Atribut Colspan dan Rowspan

1. Atribut Colspan

Atribut colspan didalam tabel HTML digunakan untuk menggabungkan dua atau lebih cell kolom pada tabel.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Menggabungkan Kolom dengan Colspan</h2>

<table border="1px">
  <tr>
    <td>Baris 1 : Kolom 1</th>
    <td colspan="2">Baris 1 : Kolom 2</td>
  </tr>
  <tr>
   <td>Baris 2 : Kolom 1</th>
   <td>Baris 2 : Kolom 2</th>
   <td>Baris 2 : Kolom 3</th>
  </tr>
    <tr>
   <td>Baris 3 : Kolom 1</th>
   <td>Baris 3 : Kolom 2</th>
   <td>Baris 3 : Kolom 3</th>
  </tr>
</table>

</body>
</html>

Dapat dilihat dari kode tabel HTML diatas dimana kita membuat penggabungan kolom. Kolom yang digabungkan mulai dari kolom dua dan tiga. penggabungan cell kolom tersebut digabungkan pada baris pertama dengan menggunakan perintah colspan=”2″.

2. Atribut Rowspan

Atribut rowspan digunakan untuk menggabungkan dua atau lebih cell baris pada tabel.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Menggabungkan Baris Tabel dengan Rowspan</h2>

<table border="1px">
  <tr>
   <td rowspan="4">Baris 1 : Kolom 1</th>

  </tr>
  <tr>
   <td>Baris 1 : Kolom 1</th>
   <td>Baris 1 : Kolom 2</th>
   <td>Baris 1 : Kolom 3</th>
  </tr>
    <tr>
   <td>Baris 2 : Kolom 1</th>
   <td>Baris 2 : Kolom 2</th>
   <td>Baris 2 : Kolom 3</th>
  </tr>
     <tr>
   <td>Baris 3 : Kolom 1</th>
   <td>Baris 3 : Kolom 2</th>
   <td>Baris 3 : Kolom 3</th>
  </tr>
</table>

</body>
</html>

Dapat kita lihat dari contoh kode tabel dengan menggunakan atribut rowspan diatas. pada baris kedua hingga ke empat kolom pertama digabungkan dengan menggunakan perintah rowspan=4. Sehingga dapat dilihat hasil output untuk script diatas menghasilkan output berikut:

Kesimpulan

Demikian pembahasan Kelas Programmer mengenai cara membuat tabel pada HTML. Anda bila ingin belajar lebih lagi dapat membaca artikel di blog ini yang lain. Komentar dibawah bisa digunakan bila ada pertanyaan terkait pembahasan diatas, Terimakasih.

Apa perintah HTML untuk membuat tabel?

Tag untuk Membuat Tabel di HTML Tag <table> untuk membungkus tabelnya. Tag <thead> untuk membungkus bagian kepala tabel. Tag <tbody> untuk membungkus bagian body dari tabel. Tag <tr> (tabel row) untuk membuat baris.

Bagaimana cara untuk membuat baris pada table?

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.

Manakah dari tag berikut yang digunakan untuk menambahkan baris dalam tabel?

Tag <tr> (tabel row) untuk membuat baris. Tag <td> (table data) untuk membuat sel.

Apa yang dimaksud dengan tabel 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).

kode html