Bagaimana cara untuk membuat baris pada tabel?

Question

Estimasi Waktu Baca: 5 menit

Table of Contents Show

Cara Membuat Tabel di HTML
Aksi yang Dapat Diterapkan Pada Tabel
Memberi Warna Untuk Sel Tabel
Mengatur Padding Pada Sel Tabel
Menggabungkan Sel Tabel
Memasukkan Elemen Lain ke dalam Sel
Bagaimana cara membuat baris pada tabel?
Yang mana baris dan kolom pada tabel?
Bagaimana cara membuat tabel?
Apa itu baris pada tabel?

Pemanasan

Tabel merupakan salah satu elemen penting dalam sebuah wesbite. Tabel sering kali digunakan untuk menampilkan informasi berupa daftar data, selain itu juga biasa dipakai untuk membandingkan antar data.

Dengan penggunaan tabel, informasi yang ada dapat diringkas dan ditunjukkan secara gamblang kepada pembaca.

Ada 4 unsur pembentuk utama dalam tabel, antara lain:

Sel
Garis
Baris
Kolom

Untuk lebih jelasnya kalian bisa lihat gambar anatomi tabel di bawah ini:

Nah, pertanyaannya sekarang bagaimana cara membuat tabel di HTML?

Untuk menjawabnya silahkan ikuti materi di bawah ini….

Cara Membuat Tabel di HTML

Tercatat ada 6 tag yang digunakan untuk membuat tabel di HTML antara lain:

<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
<th> – berfungsi untuk membuat judul pada header tabel, singkatan dari Table Header
<td> – berfungsi untuk membuat sel tabel, singkatan dari Table Data

Tidak semua tag di atas bersifat wajib digunakan, seringkali para pengembang dan programmer ketika membuat sebuah tabel hanya menggunakan tag <table>, <tr>, <th>, dan <td>. Sedangkan untuk tag <thead> dan <tbody> boleh kalian gunakan atau tidak (opsional).

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h2>Belajar Tabel di HTML</h2>
	<table>
		<tr>
			<td>Baris 1 Kolom 1</td>
			<td>Baris 1 Kolom 2</td>
		</tr>
		<tr>
			<td>Baris 2 Kolom 1</td>
			<td>Baris 2 Kolom 2</td>
		</tr>
		<tr>
			<td>Baris 3 Kolom 1</td>
			<td>Baris 3 Kolom 2</td>
		</tr>
	</table>
</body>
</html>

Keluaran:

Hasil dari kode di atas pada dasarnya sudah membentuk sebuah tabel, hanya saja tidak ada garisnya. Untuk memberi garis pada tabel kita memerlukan atribut border.

Nilai dari atribut border berupa angka yang mewakili ukuran dari garis, semakin besar angkanya maka garis yang dibuat juga akan semakin tebal.

Agar seluruh tubuh tabel memiliki garis maka tambahkan atribut border pada tag <table>.


<table border="1">

Hasil:

Pada contoh di atas saya memberikan atribut border nilai 1 yang mana nilai tersebut akan menghasilkan garis dengan ukuran terkecil.

Aksi yang Dapat Diterapkan Pada Tabel

Ada bermacam aksi yang dapat diterapkan pada tabel, aksi ini meliputi bagaimana cara kita memberi warna, menggabungkan sel, memberi padding pada sel, dan lain-lain.

Memberi Warna Untuk Sel Tabel

Tabel yang kita buat dapat kita percantik dengan memberi warna untuk tiap sel menggunakan atribut bgcolor pada tag <td>. Sedangkan bila ingin memberi warna perbaris, maka tambahkan atribut tersebut pada tag <tr>.


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h2>Belajar Tabel di HTML</h2>
	<table border="1">
		<tr bgcolor="pink">
			<td>Baris 1 Kolom 1</td>
			<td>Baris 1 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="cf1b1b">Baris 2 Kolom 1</td>
			<td bgcolor="cf1b1b">Baris 2 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="yellow">Baris 3 Kolom 1</td>
			<td bgcolor="fddb3a">Baris 3 Kolom 2</td>
		</tr>
	</table>
</body>
</html>

Nilai dari atribut bgcolor bisa berupa nama warna dalam bahasa inggris atau nilai dalam bentuk heksadesimal.

Mengatur Padding Pada Sel Tabel

Padding sederhananya merupakan jarak. Tujuan untuk mengatur jarak pada sel supaya tabel terlihat lebih rapi dan tidak sempit. Hal ini berhubungan dengan teks dan garis yang mengelilinginya.

Pada contoh sebelumnya teks dan garis terlihat tidak memiliki jarak, hal ini membuat kesan berdesakan.

Maka dari itu dibuatlah cellpadding yang berfungsi untuk membuat jarak pada sel. Jarak ini yang akan membuat sel dalam tabel akan terlihat lebih luas karena tolak ukurnya adalah teks di dalam sel dan garis yang mengelilingi teks tersebut.

Untuk lebih pahamnya perhatikan penerapan di bawah ini.

Agar seluruh bagian tabel terkena imbas penggunaan atribut cellpadding, maka kita perlu definisikan atribut ini pada tag <table>.


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h2>Belajar Tabel di HTML</h2>
	<table border="1" cellpadding="10">
		<tr bgcolor="pink">
			<td>Baris 1 Kolom 1</td>
			<td>Baris 1 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="cf1b1b">Baris 2 Kolom 1</td>
			<td bgcolor="cf1b1b">Baris 2 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="yellow">Baris 3 Kolom 1</td>
			<td bgcolor="fddb3a">Baris 3 Kolom 2</td>
		</tr>
	</table>
</body>
</html>

Keluaran:

Menggabungkan Sel Tabel

Ada kalanya baris atau kolom perlu disatukan atau digabungkan, sama seperti saat membuat tabel di excel kalian pasti pernah mengalami kasus serupa yang mana solusi dari kasus tersebut dengan menggunakan fitur merge.

Nah di HTML hal ini juga memungkinkan untuk dilakukan dengan penggunaan atribut rowspan dan colspan. Sesuai namanya atribut:

rowspan – digunakan untuk menyatukan sel tabel secara baris
colspan – digunakan untuk menyatukan sel tabel secara kolom

Ada dua tag yang dapat menggunakan atribut ini yaitu tag <th> dan <td>.

Contoh penerapan


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h2>Belajar Tabel di HTML</h2>
	<table border="1">
		<tr>
			<th rowspan="2" bgcolor="pink">Nama Siswa</th>
			<th colspan="3" bgcolor="lightblue">Mata Pelajaran</th>
		</tr>
		<tr>
			<th bgcolor="cd0a0a">MAT</th>
			<th bgcolor="28df99">IPA</th>
			<th bgcolor="fddb3a">IPS</th>
		</tr>
		<tr>
			<td>Lendis Fabri</td>
			<td>85</td>
			<td>95</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Nurul Huda</td>
			<td>80</td>
			<td>95</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Wahid Abdullah</td>
			<td>100</td>
			<td>90</td>
			<td>85</td>
		</tr>
		<tr>
			<td>Basit Djunaedi</td>
			<td>85</td>
			<td>90</td>
			<td>100</td>
		</tr>
	</table>
</body>
</html>

Hasilnya,

Memasukkan Elemen Lain ke dalam Sel

Selain elemen teks, tag <th> dan <td> juga mendukung masukan dari elemen lain seperti link, gambar, video, dan lain-lain.

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h2>Belajar Tabel di HTML</h2>
	<table border="1" cellpadding="10">
		<tr>
			<th colspan="3">Profil Website</th>
		</tr>
		<tr>
			<td rowspan="5"><img src="web-logo.png"></td>
		</tr>
		<tr>
			<td>Nama</td>
			<td>Kopiding.in</td>
		</tr>
		<tr>
			<td>Pemilik</td>
			<td>Kuro Neko</td>
		</tr>
		<tr>
			<td>Menu</td>
			<td>
				<ul>
					<li>Beranda</li>
					<li>Tutorial</li>
					<li>Blog</li>
					<li>Kontak</li>
					<li>Tentang</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>Alamat</td>
			<td><a href="https://kopiding.in">https://kopiding.in</a></td>
		</tr>
	</table>
</body>
</html>

Hasil:

Bagaimana cara 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.

Yang mana baris dan kolom pada tabel?

Baris merupakan susunan dalam bentuk horizontal atau dari kanan ke kiri. Sedangkan kolom merupakan susunan dalam bentuk vertikal atau dari atas ke bawah.

Bagaimana cara membuat tabel?

Cara Membuat Tabel di Microsoft Word Melalui Menu Insert.

Klik menu Insert, lalu pilih Table..

Setelah itu, akan muncul pilihan kolom dan baris yang bisa kamu pilih dalam membuat tabel..

Pilih jumlah kolom dan baris yang kamu inginkan..

Setelah itu, tabel akan muncul secara otomatis di halaman Microsoft Word kamu..

Apa itu baris pada tabel?

Setiap baris dalam tabel mewakili himpunan data yang berhubungan dan memiliki struktur sama. Sebagai contoh, sebuah tabel merepresentasi perusahaan, setiap baris akan mewakili satu perusahaan.

Cara Belajar Bagaimana