Ada tabel di HTML, Whaaaaat

pt-homina.blogspot.com
by pt-homina.blogspot.com Kamis, Agustus 09, 2018

Assalamualaikum Wr. Wb

    Heyy omi fams gimana nih kabarnya.. sehat yaa, tak bosan bosan kembali lagi dengan min nisa ya, kalian kangen gak nih sama mimin hehe.. dikarenakan mimin udah ngantuk yaa... jadi tanpa basa basi kali ini kita akan membahas tentang pembuatan tabel di html gengs. Ini dia pembahasan hari ini cekidooot:
> Pengertian tabel
> Tag dan atribut tabel
> Penggunaan rowspan dan colspan
> Warna dalam tabel
> Scope
Kita langsung saja ke pembahasan ke satu yaitu

1. Pengertian tabel

    Kalian pasti udah tau kan tabel itu kayak gimana, kalo gak tau contohnya ada di atas ya gengs. Menurut wikipedia Tabel merupakan susunan data dalam baris dan kolom, atau mungkin dalam struktur yang lebih kompleks. Tabel banyak digunakan dalam komunikasi, penelitian, dan analisis data. Tabel sering muncul muncul di media cetak, tulisan, perangkat lunak komputer, arsitektur hiasan, rambu lalu lintas, dan lain-lain. Isi dan terminologi untuk menggambarkan sebuah tabel bergantung pada konteks dari data yang akan disajikan. Terus min fungsi tabel di Html ini buat apa sih?
Fungsinya yaitu:
1. Menampilkan informasi secara terstruktur, ringkas, dan mudah dibaca.
2. Mengatur tampilan homepage agar lebih menarik.

Nah ini codingan tabel yang sudah saya buat, hasilnya seperti gambar diatas ya gengs

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
<table border="1" width="30%" cellspacing="0">
<th>Nama</th>
<th>Usia</th>
<tr>
<td>Ali</td>
<td>25</td>
</tr>
<tr>
<td>Fahmianto</td>
<td>27</td>
</tr>
</table>
</body>
</html>

2. Tag dan atribut tabel

    Tag tabel ditandai dengan tanda <table> pada awal dan diakhiri dengan tanda </table>.
Tabel juga merupakan perpaduan antara baris dan kolom. Artinya didalam tabel harus ada baris dan kolom.
Tag yang diperlukan untuk membuat baris dan kolom adalah :
  • Tag membuat baris <tr> (table row)
  • Tag membuat kolom <td> <table data>
Tag untuk membuat header adalah:
  • <caption> fungsi nya untuk menambahkan judul pada tabel
  • <th> (table header) fungsinya untuk memberi judul pada baris dan kolom
Kalau untuk atributnya kalian bisa menambah warna, mengatur tinggi, mengatur lebar dan masih banyak lagi, ini dia atribut atribut nya;

3. Penggunaan rowspan dan colspan

    Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”. Dan Rowspan tugasnya untuk menyatukan kotak- kotak row kebawah sehingga menjadi satu unit yang panjang. 
Ini gengs contohnya ya:

<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
Berikut contoh tabel dengan rowspan dan colspan.
<table width="80%" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan="2">baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan="2">baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>
</body>
</html>

 Jika dibuka di browser maka hasilnya akan seperti ini:
Atribut colspan yaitu baris 2 kolom 1 yang menggabungkan tabel kesamping

 Nih contoh yang lainnya:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Align</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
<table border="1">
<caption>Daftar wiraniaga</caption>
<tr>
<th colspan="2" rowspan="2">WIRANIAGA</th>
<th colspan="3">KOTA</th>
</tr>
<tr>
<th>Pati</th>
<th>Kudus</th>
<th>Solo</th>
<tr>
<tr>
<th rowspan="2">Jenis kelamin</th>
<th>Pria</th>
<td align="right">30 Orang</td>
<td align="right">20 Orang</td>
<td align="right">30 Orang</td>
</tr>
<tr>
<th>Wanita</th>
<td align="right">20 Orang</td>
<td align="right">8 Orang</td>
<td align="right">18 Orang</td>
</tr>
</tr>
</tr>
</table>
</body>
</html>

Jika dibuka di browser hasilnya akan jadi seperti ini:
    Wiraniaga memakai atribut colspan dan rowspan 2 , bisa dilihat sendiri 2 kolom dan 2 baris yang ada di samping dan dibawahnya jadi mengikuti ukuran tabel wiraniaga.

Contoh lagi nih:
<!DOCTYPE html>
<html>
<head>
<title>lat19</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
<table width="500" border="1" cellspacing="0" cellpadding="3">
<th>Benua</th>
<th>Negara</th>
<tr>
<td rowspan="5">ASIA</td>
</tr>
<tr><td>Arab Saudi</td></tr>
<tr><td>India</td></tr>
<tr><td>Indonesia</td></tr>
<tr><td>Singapura</td></tr>
<tr>
<td rowspan="5">EROPA</td>
</tr>
<tr><td>Belanda</td></tr>
<tr><td>Italia</td></tr>
<tr><td>Inggris</td></tr>
<tr><td>Jerman</td></tr>
</table>
</body>
</html>

Hasilnya:

Terakhir nih contoh lagi ya:
<!DOCTYPE html>
<html>
<head>
<title>Tabel benua</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
<table border="1" width="500" cellspacing="0" cellpadding="4">
<tr>
<td>Benua</td>
<td colspan="2">EROPA</td>
<td colspan="2">ASIA</td>
</tr>
<tr>
<td>Negara</td>
<td>Belanda</td>
<td>Italia</td>
<td>Indonesia</td>
<td>India</td>
</tr>
</table>
</body>
</html>

Hasilnya akan jadi:

4. Warna dalam tabel

    Nah ternyata kita tuh bisa memberi warna di dalam tabel gengs, kalo gak percaya liat aja nih:
<!DOCTYPE html>
<html>
<head>
<title>Lat6</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
<table border="1" width="30%" cellspacing="2" cellpadding="3">
<th rowspan="2" bgcolor="#FA8072">No</th>
<th rowspan="2" bgcolor="#87CEEB">Nama</th>
<th colspan="5" bgcolor="7FFF00">Pertemuan</th>
<tr bgcolor="40E0D0">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>1</td>
<td>Neymar</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>s</td>
</tr>
<tr>
<td>2</td>
<td>Cristiano</td>
<td>a</td>
<td>√</td>
<td>i</td>
<td>s</td>
<td>√</td>
</tr>
<tr>
<td>3</td>
<td>Bale</td>
<td>a</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
</table>
</body>
</html>

Nih hasilnya:
    Ouh iya saya lupa memberi tahu cellspacing dan cellpadding. Fungsi cellspacing ini untuk memberikan spasi antara kolom dan juga baris satu dengan yang lain. Kalau cellpadding ini untuk mengatur ketinggian dari row, mirip mirip sama height gengs. Mimin biasanya memakai atribut cellpadding karena atribut height nya tidak berfungsi hehe :0

5. Penggunaan scope

    Atribut scope digunakan untuk menghubungkan data dengan kolom atau baris dari elemen yang bersangkutan. Contohnya nih:
<!DOCTYPE html>
<html>
<head>
<title>lat17</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
<table width="500" border="1" cellpadding="3" cellspacing="0">
<tr>
<th scope="col">Nama Perumahan</th>
<th scope="col">Tipe / Luas tanah
(m<sup>2</sup>)
</tr>
<tr>
<td rowspan="4">Griya Indah Permai</td>
<td>21 / 60</td>
</tr>
<tr>
<td>36 / 90</td>
</tr>
<tr>
<td>45 / 120</td>
</tr>
<tr>
<td>54 / 120</td>
</tr>
</table>
</body>
</html>

 Hasilnya nih:

Contoh lagi nih:
<!DOCTYPE html>
<html>
<head>
<title>lat18</title>
</head>
<body>
<h3>Create by : Annisarhy</h3>
<h3>Class     : XI - RPL1</h3>
<table width="500" border="1">
<tr>
<th scope="col">Perumahan</th>
<th colspan="4" scope="col">Tipe / Luas tanah(m<sup>2</sup></th>
</tr>
<tr>
<td>Griya Indah Permai</td>
<td>21 / 60</td>
<td>36 / 90</td>
<td>45 / 120</td>
<td>54 / 120</td>
</tr>
</table>
</body>
</html>

Hasilnya:
    Mungkin itu saja yang bisa mimin bahas dalam pertemuan hari ini, mohon maaf kalau banyak typo karena hari ini mimin lagi gak enak badan ya huhu...;( lagi flu jadi rada kurang fokus ngerjain tugasnya nih, doa'in semoga cepet sembuh ya gengs
Tetep semangat yaa, jangan lupa bahagia

Wassalamualaikum Wr. Wb

0 Komentar