Format Table Dalam HTML (Pertemuan 5)

Assalamu'alaikum Wr. Wb

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan ini. Kali ini kita masih akan melanjutkan pembahasan kemarin masih seputar HTML. Kali ini kita akan membahas bagaimana cara membuat Table pada HTML Table sendiri merupakan carar untuk menampilkan informasi dalam bentuk baris dan kolom, untuk menampilkan bentuk table pada HTML digunakan Tag <table> Ys, langsung saja kita mulai pembahasanya.

1. Membuat Table
Untuk membuat baris kita dapat menggunakan Tag <tr> yang didalamnya terdapat Tag <td> untuk menampilkan data pada setiap sel table (Table Data). Untuk lebih detailnya kalian bisa melihat Contoh seperti dibawah ini :

 
<html>
 <head>
  <title>Salman Fauzan Fahri Aulia XI - RPL 3 Tabel</title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
    <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
    </font>
   </p>
<table align = "center" width = "80%" border ="2" cellspacing = "0" cellpadding ="0" color = "red" >
<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>

Hasilnya akan menjadi seperti ini :

Untuk mengatur Panjang / Lebar suatu Table kalian dapat menambahkan Attribute width / height dalam Tag <table>, untuk memudahkan penyesuaian ukuran kalian dapat menggunakan format % untuk ukurannya, kalian juga dapat mengubahnya dalam bentuk px untuk mengatur ukuran table juga.

2.Penggunakan Rowspan dan Colspan
Ada kalanya ketika membuat table kita membutuhkan beberapa baris dan kolom yang digabungkan, nah untuk membuat table seperti itu kalian dapat menambahkan attribute rowspan = .. (angka) untuk menggabungkan baris dan colspan = .. (angka) untuk menggabungkan kolom. Untuk lebih jelasnya kalian dapat melihat contoh seperti dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Penggunaan Align </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
    </font>
   </p>
<table align = "center" border = "1" >
      <caption> Daftar Wiraniaga </caption>
<tr>
      <th colspan = 2 rowspan = 2 > Wiraniaga </th>
      <th colspan = 3 > Kota </th>
     </tr>
<th> Pati </th> <th> Kudus </th> <th> Solo </th>
<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>
<th> Wanita </th>
       <td align = "right" > 20 Orang </td>
       <td align = "right" > 8 Orang </td>
       <td align = "right" > 18 Orang </td>
     </tr>
</table>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Pada pembuatan table, meskipun kita ingin membuat nya menjadi panjang kebawah, tetapi kita harus mengatur isi dari table tersebut kesamping terlebih dahulu. Jadi ketika kita membuat table di HTML, kita harus mengisi baris table nya kesamping terlebih dahulu kemudian kita mengisi kolom kebawah.

3. Berbagai Cara Pembuatan Table
Tentu saja setiap orang memiliki selera masing-masing dalam membuat suatu hal, kita juga dapat membuat 2 table yang sama dengan codingan yang berbeda. Contohnya dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Data Siswa </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
    </font>
   </p>
<table align = "center" width = "20%" border ="2" >
<tr>
      <th align = "left" > Nama </th>
      <th align = "left" width = "60%" > Usia </th>
     </tr>
<tr>
      <td> Ali </td>
      <th align = "left" > 25 </th>
     </tr>
<tr>
      <td> Fahmianto </td>
      <th align = "left" > 27 </th>
     </tr>
</table>
</body>
</html>

Dari Contoh diatas kita dapat memperoleh hasil seperi ini :

Kita akan membandingan nya dengan contoh yang kedua :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Data Siswa </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
    </font>
   </p>
<table align = "center" width = "20%" height = "20%" border = "2" >
<tr>
      <th> Nama </th>
      <th width = "50%" > Usia </th>
     </tr>
<tr>
      <td> Ali </td>
      <th align = "left" > 25 </th>
     </tr>
<tr>
      <td> Fahmianto </td>
      <th align = "left" > 27 </th>
     </tr>
</table>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Kedua table diatas memiliki isi yang sama, akan tetapi kedua table diatas memiliki perbedaan dalam bentuk pembuatan table, pada contoh yang pertama saya hanya mengatur lebar nya tabel / width yang hasilnya membuat table yang lebar kesamping, namun di contoh yang kedua saya mengatur lebar / width sekaligus mengatur tinggi / height, jadi table yang kedua akan mempunyai ukuran yang lebih besar daripada table yang pertama.

4. Membuat Table Kehadiran
Sekarang kita akan mencoba bagaimana cara membuat table untuk kehadiran, table ini biasa digunakan untuk membuat daftar hadir siswa yang hadir dalam beberapa pertemuan, untuk lebih jelasnya dapat melihat contoh dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Pertemuan </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
    </font>
   </p>
<table align = "center" width = "20%" border ="2" >
<tr>
      <th rowspan = 2 bgcolor = "DarkSalmon" > No </th>
      <th rowspan = 2 bgcolor = "Coral" > Nama </th>
      <th colspan = 5 bgcolor = "Darkorange" > Pertemuan </th>
     </tr>
<tr>
      <th bgcolor = "Chocolate"> 1 </th>
      <th bgcolor = "Chocolate"> 2 </th> 
      <th bgcolor = "Chocolate"> 3 </th> 
      <th bgcolor = "Chocolate"> 4 </th> 
      <th bgcolor = "Chocolate"> 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>
      <td> 3 </td> 
      <td> Bale </td>
      <td> A </td> <td> ✓ </td> <td> ✓ </td> <td> ✓ </td> <td> ✓ </td>
     </tr>
</table>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Untuk mencari simbol / special character kalian dapat mencarinya menggunakan Character Map, kalian dapat mencari Character Map ini pada pencarian PC / Laptop anda, kemudian gunakanlah style font Arial Unicode, kemudian carilah simbol yang kalian inginkan menggunakan ejaan Inggris. Kalian juga dapat mewarnai table yang kalian buat dengan cara menambahkan Attribute bgcolor = "WarnaYangDiinginkan" pada tag <table> yang kalian buat.

5. Contoh Contoh Table
Kali ini saya akan memberikan beberapa contoh table yang biasanya dibuat dengan 2 cara pembuatan yang berbeda. Langsung saja dilihat lebih lanjut :

<html>
 <head> 
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Dengan Colspan </title>
 </head>
    <table align = "center" 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 align = "center" > Griya Indah Permai </td>
    <td align = "center" > 21 / 60 </td>
    <td align = "center" > 36 / 90 </td>
    <td align = "center" > 45 / 120 </td>
    <td align = "center" > 54 / 120 </td>
   </td>
    </table>
</body>
</html>

Hasilnya akan menjadi seperti ini :

<html>
 <head> 
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Dengan Colspan </title>
 </head>
    <table align = "center" 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 align = "center" > Griya Indah Permai </td>
    <td align = "center" > 21 / 60 </td>
    <td align = "center" > 36 / 90 </td>
    <td align = "center" > 45 / 120 </td>
    <td align = "center" > 54 / 120 </td>
   </td>
    </table>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Dari dua contoh diatas, contoh pertama saya membuat table kebawah dan pada contoh kedua saya membuat table kesamping, kalian bebas menentuka selera kalian masing-masing pada saat membuat table. Untuk membuat operasi perpangkatan kalian dapat menggunakan tag <sup> ... </sup>
Contoh lainnya :

<html>
 <head>
   <body Background = "1.png" width = "100%" height = "100%" >
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
    </font>
   </p>
<title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Benua </title>
 </head>
  <table align = "center" width = "500" border = "1" >
<tr>
     <th scope = "col" > Benua </th>
     <th scope = "col" > Negara </th>
    </tr>
<tr>
     <td align = "center" rowspan = "4"   > Asia </td>
     <td align = "center" > Arab Saudi </td>
    </tr>
<tr>
     <td align = "center" > India </td>
    </tr>
<tr>
     <td align = "center" > Indonesia </td>
    </tr>
<tr>
     <td align = "center" > Singapura </td>
    </tr>
<td align = "center" rowspan = "4"   > Eropa </td>
     <td align = "center" > Belanda </td>
    </tr>
<tr>
     <td align = "center" > Italia </td>
    </tr>
<tr>
     <td align = "center" > Inggris </td>
    </tr>
<tr>
     <td align = "center" > Jerman </td>
    </tr>
</body>
  </table>
</html>

Hasilnya akan menjadi seperti ini :

<html>
 <head> 
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Dengan Colspan </title>
 </head>
    <table align = "center" width = "400" border = "2" >
<tr>
    <th align = "center" scope = "col" > Benua </th>
    <th align = "center" colspan = 2 scope = "col" align = "left" > Eropa </th>
    <th align = "center" colspan = 2 scope = "col" align = "left" > Asia </th>
   </tr>
<tr>
    <td align = "center" > Negara </td>
    <td align = "center" > Belanda </td>
    <td align = "center" > Italia </td>
    <td align = "center" > Indonesia </td>
    <td align = "center" > India </td>
   </td>
    </table>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Contoh Terakhir :

<html>
 <head> 
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
    <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
    </font>
    </p>
<title> Salman Fauzan Fahri Aulia XI - RPL 3 Tabel Dengan Colspan </title>
 </head>
    <table align = "center" width = "400" border = "2" >
<tr>   <th align = "center" scope = "col" > Benua </th>
   <th align = "center" colspan = 2 scope = "col" align = "left" > Eropa </th>
   <th align = "center" colspan = 2 scope = "col" align = "left" > Asia </th>
   </tr>
<tr>
   <td align = "center" > Negara </td>
   <td align = "center" > Belanda </td>
   <td align = "center" > Italia </td>
   <td align = "center" > Indonesia </td>
   <td align = "center" > India </td>
  </td>
 </table>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Cukup sampai disini saja ya guys pembahasan kita kali ini, semoga bermanfaat bagi kalian, mohon maaf bila ada kesalahan dalam penyampaian maupun pengetikan. See you next guys.

Wassalamu'alaikum Wr Wb.

Cyber Information Cafe

Cari Blog Ini

Format Table Dalam HTML (Pertemuan 5)

Komentar

Posting Komentar