Tutorial Cara Membuat Table Di HTML

Cara Membuat Table Di HTML

Mungkin sobat pernah melihat para blogger yang menggunakan table dalam kontentnya ,nh..sebenarnya membuat table di blog/html  tak seperti membuat table di word / powerpoint .sehingga sobat harus ingat dan paham beberapa tag table.

Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Lihat Tabel Yang Ada Di bawah untuk melihat daftar tag.Dalam tag <tabble>juga terdapat 2 tag yang penting yang penting yaitu tag <tr> </td> untuk membuat baris dan tag <td></td> untuk membuat kolom.Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi anda harus cukup menguasai tag ini

Tag-Tag Penting untuk membuat table

NAMA tag	Keterangan
<table>	Tag ini merupakan inti dari perintah untuk membuat tabel pada dokumen HTML
</table>	Tag ini merupakan penutup dari perintah untuk membuat tabel pada dokumen HTML
<thead>	Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah HEADER atau Bagian yang paling atas dari sebuah tabel. dan dituliskan setelah Tag kemudian harus ditutup dengan perintah </thead>
<tfoot>	Tag ini merupakan bagian dari perintah pembuatan tabel Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah FOOTER atau bagian akhir dari suatu tabel, bisa juga merupakan sebuah penutup dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </tfoot>
<tr>	Tag ini digunakan untuk membuat BARIS pada suatu tabel, dan merupakan satu kesatuan dengan perintah <table> penulisan nya pun harus setelah Tag ini. Setiap perpindahan BARIS harus ditutup dengan perintah </tr>
<td>	Tag ini digunakan untuk membuat KOLOM pada suatu tabel Setiap perpindahan KOLOM harus ditutup dengan perintah </td>
<tbody>	Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah BODY atau badan dari suatu tabel, bisa juga isi dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah <tbody>

 Ada beberapa atribut dari sebuah tabel yang wajib Anda ketahui,
antara lain :

1. cellpadding

- Atribut ini dipakai untuk menentukan besarnya jarak bagian
dalam (cell) dengan bagian luar (border) dari sebuah tabel. contoh :
cellpadding="2"

2. cellspacing

- Atribut ini dipakai untuk menentukan besarnya jarak cell yang
satu dengan cell yang lainnya. contoh : cellspacing="5"

3. border

- Atribut ini dipakai untuk menentukan besarnya border (bingkai)
dari sebuah tabel. contoh : border="2"

4. width

- Atribut ini digunakan untuk menentukan lebar dari sebuah tabel,
ukuran ini bisa menggunakan satuan pixel atau persentasi. contoh :
width="75%", width="100%", width="800", width="200"

5. bordercolor

- Atribut ini digunakan untuk menentukan warna border atau
garis tepi dari sebuah tabel. contoh : bordercolor="black"

6. bgcolor

- Atribut ini digunakan untuk menentukan warna latar dari sebuah
tabel atau cell. contoh : bgcolor="#FFFFFF", bgcolor="#000000",
bgcolor="blue", bgcolor="red"

7. valign

 - Atribut ini digunakan untuk menentukan posisi Vertikal objek dari
sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan
dalam perintah pembuatan baris dari tabel / <tr>. Atribut ini punya beberapa
pilihan posisi yaitu :
o top - pilihan ini akan menempatkan objek berada pada posisi teratas
dari cell.
o middle - pilihan ini akan menempatkan objek berada pada tengah cell.
o bottom - pilihan ini akan menempatkan objek berada pada bagian
bawah dari cell.
Contoh : <tr valign="top">, <tr valign="middle">, <tr valign="bottom">

8. align

- Atribut ini digunakan untuk menentukan posisi Horizontal objek dari
sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan
dalan perintah pembuatan kolom dari tabel / <td>. Atribut ini juga punya
beberapa pilihan yaitu :
o left - pilihan ini akan menempatkan objek berada pada bagian kiri dari
cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata
kiri.
o center - pilihan ini akan menempatkan objek berada pada bagian
tengan dari cell, bila objek berbentuk teks maka teks tersebut akan
dijadikan rata tengah.
o right - pilihan ini akan menempatkan objek berada pada bagian kanan
dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan
rata kanan.
Contoh : <td align="left">, <td align="center">, <td align="right">.

9. rowspan

- Atribut ini digunakan untuk menyatukan dua buah baris tabel
menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah
pembuatan kolom dari tabel / <td>

10. colspan

 - Atribut ini digunakan untuk menyatukan dua buah kolom tabel
menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah
pembuatan kolom dari tabel / <td>
Contoh : <td rowspan="2">, <td colspan="2">

Untuk lebih jelasnya perhatikan gambar Dibawah ini!!!

• Garis yang berwarna hitam dan berada paling luar itu disebut border. 

• Jarak Antara garis merah dan hitam itu disebut padding. 

• Bidang yang berwarna biru langit, abu-abu dan hijau itu disebut cell. 

• Jarak antara cell yang satu dengan cell yang lainnya itu disebut cellspacing. 

• Cell yang diberi warna hijau merupakan gabungan dari dua buah cell atau 

lebih dalam satu kolom (merger) disebut dengan colspan dan dihasilkan dari 

perintah colspan.
• Cell yang diberi warna abu-abu merupakan gabungan dari dua buah cell atau
lebih dalam satu baris (merger) disebut dengan rowspan dan dihasilkan dari
perintah rowspan.

Penting !!!
Untuk rowspan dan colspan 
Anda harus mendeklarasikan banyaknya kolom atau baris yang akan Anda gabung, misalkan Anda akan menggabung dua buah cell dalam satu kolom, berarti Anda juga harus menuliskan nya dengan colspan="2", bila Anda menggabungkan tiga buah cell ,Anda harus menuliskannya dengan colspan="3" dan seterusnya

Mungkin sampai sudah situ aja teorinya nahhh sekarang waktunya qprakteeeeeek.....

Contoh 1 : Membuat Tabel sederahana dengan header dan footer

Nahh..sekarang siapkan aplikasi teks editor html kalian 
Coba kalian perhatikan dan ketik/salin kode dibawah ini 
(usahakan diketik jangan disalin supaya lebih terbiasa dan mudah masuk ke otak😅😅)

<!DOCTYPE html>
<html>
<head>
<tittle>membuat table</tittle>
</head>
<body>
<table cellpadding="5" cellspacing="5" border="1">
<thead>
<tr>
<td colspan="3" align="center">Ini adalah bagian HEADER dari TABEL</td>
</tr>
</thead>
<tbody>
<tr>
<td>BARIS ke 1 KOLOM ke 1</td>
<td>BARIS ke 1 KOLOM ke 2</td>
<td>BARIS ke 1 KOLOM ke 3</td>
</tr>
<tr>
<td>BARIS ke 2 KOLOM ke 1</td>
<td>BARIS ke 2 KOLOM ke 2</td>
<td>BARIS ke 2 KOLOM ke 3</td>
</tr>
<tr>
<td>BARIS ke 3 KOLOM ke 1</td>
<td>BARIS ke 3 KOLOM ke 2</td>
<td>BARIS ke 3 KOLOM ke 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">Ini adalah bagian FOOTER dari TABEL
</td>
</tr>
</tfoot>
</table>
</body>
</html>

Nah..Jika sudah silahkan jalankan dibrowser file HTML NYA maka Akan ditampilkan seperti ini

Ini adalah bagian HEADER dari TABEL
BARIS ke 1 KOLOM ke 1	BARIS ke 1 KOLOM ke 2	BARIS ke 1 KOLOM ke 3
BARIS ke 2 KOLOM ke 1	BARIS ke 2 KOLOM ke 2	BARIS ke 2 KOLOM ke 3
BARIS ke 3 KOLOM ke 1	BARIS ke 3 KOLOM ke 2	BARIS ke 3 KOLOM ke 3
Ini adalah bagian FOOTER dari TABEL

Note:Kalian bebas menambahkan kolom atau baris sesuka kalian ingat tag <td></td> itu kolom dan tag <tr></tr>membuat baris
Dan juga bagian kolom yang"Ini adalah bagian HEADER dari TABEL" Kode tetsebut terdapat colspan="3" yang artinya 3 kolom kesamping digabung jadi 1

---

Contoh 2:dengan cellpadding dan cellspacing

Ketik bahasa alien dibawah ini.ingat ,hindari kata yang typo karena itu sangat berpengaruh dan mengalibatkan kegagalan pembuatan table

<!DOCTYPE! html>

<html>
<head>
<tiitle>Membuat Tabel 2</title>
</head>
<body>
<p align="center">
<table cellpadding="5" cellspacing="5" border="1" bordercolor="blue">
<thead>
<tr>
<td colspan="2" align="center">NAMA NAMA BUAH DAN WARNANYA
</thead>
</tr>
<tbody>
<tr>
<td align="center"><b>Nama buah</b></td>
<td align="center">Warna</td>
</tr>
<tr>
<td align="center">pisang</td>
<td align="center"><font color="yellow">kuning</font></td>
</tr>
<tr>
<td align="center">Apel</td>
<td align="center"><font color="red">MERAH</font></td>
</tr>
<tr>
<td rowspan="2" align="center">pisang<br>apel<br></td>
<td rowspan="2" align="center">kuning dan merah</td>
</tr>
</body>
</html> 

Jika sudah diketik,maka hasilnya akan seperti ini:

NAMA NAMA BUAH DAN WARNANYA
Nama buah	Warna
pisang	kuning
Apel	MERAH
pisang apel	kuning dan merah

++=++
●Note:
-Tabel diatas dibuat dengan cellpadding="5" yang artinya besarnya jarak bagian
dalam (cell) dengan bagian luar (border) dari sebuah tabel adalah 5
-dan juga dengan cellspacing="5" yang artinya besarnya jarak cell yang
satu dengan cell yang lainnyaadalah 5,
(Supaya lebih paham kalian bisa eksperimen sendiri dengan border, cellpading dan cellspacing)

Contoh 3:dengan rowspan dan colspan

Ketik kode script dibawah ini:

<!DOCTYPE html>
<html>
<head>

<tittle>table 3</tittle>

</head>

<body>

<table border="1" cellpading="2" >
<thead>
<tr>
<th colspan="3" bgcolor="yellow">Game </th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="5"><img src="img/game.png" width="300"></img>
</tr>
<tr>
<td>nama</td>
<td>PUBG</td>
</tr>
<tr>
<td>Platform</td>
<td>Android</td>
<tr>
<td>lain lain</td>
<td>
    <ul>
    <li>grafik HD</li>
    <li>ukuran:1.5gb</li>
    <li>genre:shooter</li>
    <li>Online</li>
    </ul>
</td>
<tr>
<td colspan="2"><b>Player unknown's battle grounds</b></td>
</tbody>
</table>
</body>
</html> 

Maka muncul hasil

Game
	nama	PUBG
	Platform	Android
	lain lain	grafik HD ukuran:1.5gb genre:shooter Online
	Player unknown's battle grounds

●Note

Untuk Tabel diatas 

-kolom yang ada gambarnya (tag img) itu adalah rowspan="5" yang artinya 5 cell kebawah digabung jadi 1 cell.

-kolom yang bertulisan player unknowns battle grounds adalah colspan="2" yang artinya gabungan dari 2 buah cell dijadikan 1 cell

-kolom yang bertulisan Game 

Dengan background kolom warna kuning

-Untuk menambahkan gambar kalian harus menguasai tag img yang insya allah akan ane posting lain waktu🙇🙇🙇🙇

Nahhhh,,sekarang kalian sudah mulai bisa membuat tabel .selebihnya buatlah tabel dengan versi kalian sendiri,😂😂😂

Semoga postingan ini bermanfaat 

Assalamualaikum wr.wb