HTML Dasar : Table Merging (11/13)
Menggabungkan / merging cell pada tabel di HTML tidak semudah ketika kita melakukannya pada misalnya aplikasi Microsoft Word atau Excel. Pada HTML kita harus menggunakan atribut colspan dan rowspan.
Yuk, caritau gimana penggunaannya di video ini.. 🙂
—
DOWNLOAD SLIDE:
http://www.slideshare.net/sandhikagalih/html-dasar-9-tabel
—
Jangan lupa untuk follow juga akun media sosial kita yang lain :
– https://www.facebook.com/WebProgrammingUNPAS
– http://twitter.com/pw1unpas
– http://instagram.com/webprogrammingunpas
terimakasih dan selamat #ngoding!
@sandhikagalih
HTML Dasar : Table Merging (11/13)
HTML Dasar : Table Merging (11/13)
saya bisa nyelesaiin tapi kenapa 2,4 3,4 itu malah maju ke kolom yang saya kosongin itu
bisa seperti yang diatas tapi garinya ttp saja hanya saja angkanya yang hilang
<!DOCTYPE html>
<html>
<head>
<title>soal</title>
</head>
<body>
<table border="1"cellspacing="0">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>1.5</td>
<td colspan="2" rowspan="2"><center><h1>?</h1></center></td>
<td>1.8</td>
</tr>
<tr>
<td>1.9</td>
<td>2.1</td>
</tr>
<tr>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
<td>2.6</td>
</tr>
</table>
</body>
</html>
ini lebih sedikit
coba dinilai pak ditunggu balasannya
<!DOCTYPE html>
<html>
<head>
<title>latihan tabel</title>
</head>
<center> <body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<font face="arial">
<table width="262" border="1" cellspacing="0" cellpadding="5">
<tr align="center">
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr align="center">
<td>2,1</td>
<td align="center" rowspan="2" colspan="2"><h1>?</h1></td>
<td>2,4</td>
</tr>
<tr align="center">
<td>3,1</td>
<td>3,4</td>
</tr>
<tr align="center">
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table></font>
</body></center>
</html>
muter muter mikirin baris sama kolomnya biar akur ternyata row sama col nya di tulis dalam satu tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>latihan table merging</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
<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"></td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
</body>
</html>
pak guru emang hebar joss pokoknya ngasih ilmu
Ka itu buat table landscapenya gimana yaa? Soalnya yang saya buat proporsinya tetep 1: 1 terus tanda tanyanya juga di pinggir kiri bukan ditengah kotak hehe
masih nonton diakhir tahun 2018
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td colspan="2" rowspan="2" align="center"> <strong> <font size="10">?</font></strong></td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
</body>
</html>
nah kalau tabel yang komplek, yang pakai head dan body itu gimana? gk nemu caranya.
salam hormat sang guru informatika
view 31880 likes 195, kadang saya kecewa..
makasih gan ilmunya,
ini hasil saya
<table border="2" cellspacing="0" width="500" height= "250" align="center" >
<tr>
<td align="center">1.1</td>
<td align="center">1.2</td>
<td align="center">1.3</td>
<td align="center">1.4</td>
</tr>
<tr>
<td align="center">2.1</td>
<td align="center" colspan="2" rowspan="2">?</td>
<td align="center">2.4</td>
</tr>
<tr>
<td align="center">3.1</td>
<td align="center">3.4</td>
</tr>
<tr>
<td align="center">4.1</td>
<td align="center">4.2</td>
<td align="center">4.3</td>
<td align="center">4.4</td>
</tr>
</table>
btw kynya kepanjangan ya ? hahaha,
rate 1-100 ya 🙂
<table border="1" cellpadding="5" cellspacing="0">
<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"></td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>latihan table</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="30">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td colspan="2" rowspan="2"><p>menggabungkan</p><p>colspan dan rowspan</p></td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> CONTOH </title>
</head>
<body>
<h1>TUGAS</h1>
<table border="1" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td colspan="2" rowspan="2" align="center"> ? </td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
</body>
</html>
bang makasih sudah mengajarkan kami soal html alhamdulillah ane ngerti bang dikit dikit
ane juga lagi SMA :")
pak saya sudah menelesaikannya, akan tetapi "?" tidak di tengah pak. itu bagaimana yah pak agar di tengah?
ini bang
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td colspan="2" rowspan="2"></td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<!– <td colspan="2"></td> –>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
Ini jawaban saya Mas, Saya Ariansyah Dari Batam Lulusan smk 5 batam 🙂
<!DOCTYPE html>
<html>
<head>
<title>Tabel Merging</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="5" border="1">
<tbody>
<tr>
<td>1 , 1</td>
<td>1 , 2</td>
<td>1 , 3</td>
<td>1 , 4</td>
</tr>
<tr>
<td>2 , 1</td>
<td colspan="2" rowspan="2"><center>?</center></td>
<td>2 , 4</td>
</tr>
<tr>
<td>3 , 1</td>
<td>3 , 4</td>
</tr>
<tr>
<td>4 , 1</td>
<td>4 , 2</td>
<td>4 , 3</td>
<td>4 , 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Bner2 membantu
biar tanda tanyanya ketengah gmn?:( baris awal saya kok bold mulu ya?:(
akhir nya bisa juga pr yang di kasi pak dosen walapun aku masih kelas 1 smk heeh termakasi pak atas jasa jasa mu #adaiklannoskip
Hasil tugas table merging pak https://codepen.io/rizkidev/pen/ewVmGW
Makasih pak Dika, semoga semakin memberikan ilmu-ilmu yang sangat bermanfaat untuk publik…
Terimakasih banyak untuk kerja kerasnya dalam berbagi ilmu pak shandika 🙂
sempat bingung :"v
kirain colspan nya di 2,2
dan rowspan nya di 3,2 :"v
ehh ternyata harus di samain :'v
baru konek otak saya pas ingetin sintak style yang panjang :'v
<tr>
<td>2,1</td>
<td rowspan="2" colspan="2"></td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
Assalamu'alaikum bapak, saya mau tanyak cara buat tabel kayak gini gimana ya pak.
– – –
– – –
– –
Jadi paling bawah sendiri cuman 2 colom. Dan kalau dikasih border, bordernya tetep bentuk kotak pak. Nah yang saya pengen bordernya ngikuti tabel yang saya maksud diatas. Bukan full kotak
untuk memunculkan halaman table ini ke halaman latihan1 bagaimana caranya ya?
pakai tag apa? 🤷♂️😵
Maap br nemu videonya dan belajar di 2019 😭
Terima kasih buat yang mau menjelaskan. 😇
Alhamdulillah… (Pake tambahan B, K (Baris, Kolom) biar ga puyeng
<h2>Tabel Tantangan Pa Dika</h2>
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<td>B1, K1</td>
<td>B1, K2</td>
<td>B1, K3</td>
<td>B1, K4</td>
</tr>
<tr>
<td>B2, K1</td>
<td colspan="2" rowspan="2">B2, K2 <br> B3, K3 Merge</td>
<td>B2, K4</td>
</tr>
<tr>
<td>B3, K1</td>
<td>B3, K4</td>
</tr>
<tr>
<td>B4, K1</td>
<td>B4, K2</td>
<td>B4, K3</td>
<td>B4, K4</td>
</tr>
</table>
terimakasih mas ilmunya bermanfaat 🙏🙏
Berhasil guru…
Semoga sehat selalu guru….
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<th colspan="2" rowspan="2">?</th>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
</body>
</html>
Done 100%
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td rowspan="2" colspan="2">
<h1>
<center>
<b>?</b>
</center>
</td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
bang gwa rewatch 2019
gwa dah selesain tugas yang bang sandi kasi…(tolong di nilai ya bang!!)
jawab
<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tbody>
<tr>
<td>kolom 1</td>
<td>kolom 2</td>
<td>kolom 3</td>
<td>kolom 4</td>
</tr>
<tr>
<td>space 1</td>
<td rowspan="2" colspan="2">Bagian tengah</td>
<td> space 1</td>
</tr>
<tr>
<td>space 2</td>
<td>space 2</td>
</tr>
<tr>
<td>kolom 1</td>
<td>kolom 2</td>
<td>kolom 3</td>
<td>kolom 4</td>
</tr>
</tbody>
</thead>
done
<!DOCTYPE html>
<html>
<head>
<title>Tugas 1 table</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td colspan="2" rowspan="2"></td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
</body>
</html>