Latihan 6 - Table

Selamat pagi kawan sekalian, hangatnya matahari pagi menambah semangat kita untuk beraktivitas bukan.? di pagi yang cerah ini kita akan terasa menyenangkan bila kita masih meliki Waktu dan Semangat untuk belajar.
oke pada pagi hari ini kita akan melihat bebrapa keindahan dari sebuah Tabel.

• Sebuah Tabel di definisikan dengan menggunakan Tag <table>.
• Tabel dibagi menjadi baris dengan menggunakan Tag <tr>.
• Tabel juga dibagi menjadi kolom dengan menggunakan Tag <td>.
• Dan juga Tabel bisa menggunakan judul atau kepala menggunakan Tag <th>.

Oke, setelah sedikit dibahas diatas kita akan mencoba dengan membuat Tabel pertama kita. mari lakukan langkah berikut ini.

• Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
• Contoh : D://web/belajar_html/
• Buatlah file menggunakan Notepad dengan nama "latihan_6a.html" yang berisi:

latihan_6a.html

<table>
   <tr>
      <th> No </th>
      <th> judul 1 </th>
      <th> judul 2 </th>
   </tr>
   <tr>
      <td> 1 </td>
      <td> data 1-1 </td>
      <td> data 1-2 </td>
   </tr>
   <tr>
      <td> 2 </td>
      <td> data 2-1 </td>
      <td> data 2-2 </td>
   </tr>
</table>

Dari Script diatas mari kita bahas beberapa Poin yang penting:

1. Setiap Tabel dapat memiliki sebuah judul atau pun tidak, bertanda dengan Tag <th> tidak masalah bila tidak menggunakan Tag tersebut.
2. Setiap Tabel wajib memiliki Tag buka dan Tag tutup.
3. Judul atau <th> cukup di tulis sekali untuk setiap Tabel, yaitu di Kolom, barisan pertama.
4. Setiap baris wajib memiliki Tag buka <tr> dan juga Tag tutup </tr>.
5. Dalam baris barulah kita menambahkan Tag <td> $lt;/td> untuk menambahkan Kolom.
6. Baris dan Kolom dapat dimasukan sebanyak apapun sesuai dengan kebutuhan Kawan sekalian.

Bagaimana dengan contoh di atas, Jelas bukan.? setelah paham materi diatas mari kita berikan beberapa tambahan Attribut dan Data untuk Table kita, dengan cara merubah Script menjadi seperti di bawah ini.

• Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
• Contoh : D://web/belajar_html/
• Buatlah file menggunakan Notepad dengan nama "latihan_6b.html" yang berisi:

latihan_6b.html

<h2> Tabel dengan ukuran 3x2 <h2>
<table border="1" >
   <tr>
      <th> No </th>
      <th> judul 1 </th>
      <th> judul 2 </th>
      <th> judul 3 </th>
   </tr>
   <tr>
      <td> 1 </td>
      <td> data 1-1 </td>
      <td> data 1-2 </td>
      <td> data 1-3 </td>
   </tr>
   <tr>
      <td> 2 </td>
      <td> data 2-1 </td>
      <td> data 2-2 </td>
      <td> data 2-3 </td>
   </tr>
</table>

<h2> Tabel dengan ukuran 3x3 (Update) <h2>
<table>
   <tr>
      <th> No </th>
      <th> judul 1 </th>
      <th> judul 2 </th>
      <th> judul 3 </th>
   </tr>
   <tr>
      <td> 1 </td>
      <td> data 1-1 </td>
      <td> data 1-2 </td>
      <td> data 1-3 </td>
   </tr>
   <tr>
      <td> 2 </td>
      <td> data 2-1 </td>
      <td colspan="2"> data 2-2 dan 2-3 </td>
   </tr>
   <tr>
      <td> 3 </td>
      <td> data 3-1 </td>
      <td> data 3-2 </td>
      <td> data 3-3 </td>
   </tr>
</table>

<h2> Tabel dengan ukuran 3x2 (Tanpa Header) <h2>
<table border="1" >
   <tr>
      <td> data 1-1 </td>
      <td> data 1-2 </td>
      <td> data 1-3 </td>
   </tr>
   <tr>
      <td> data 2-1 </td>
      <td> data 2-2 </td>
      <td> data 2-3 </td>
   </tr>
</table>

Dari Script diatas mari kita bahas beberapa Poin yang penting:

1. Pembuktian bahwa Header atau Judul dapat digunakan dan juga tidak, sesuai dengan kebutuhan kawan sekalian.
2. Tabel tanpa Attribut border="1" untuk menambahkan garis pada tabel, dan akan disetel menjadi "0" atau tanpa garis bila tidak ditambahkan. semakin besar angka maka akan semakin tebal garis dari Tabel tersebut.
4. Penggabungan Kolom juga dapan dilakukan menggunakan Attribut colspan="2", nomor pada Colspan merupakan jumlah kolom yang akan digabungkan.
5. Data yang dimasukan akan berpengaruh terhadap besar kecilnya sebuah Tabel, Baris dan Kolom. atau bisa juga diatur menggunakan Attribut width.
6. Untuk penggunaan Tabel disarankan untuk lebih memperhatikan penulisan dan penyimpanan coding karna bila terlewat 1 Tag akan merusak Tampilan dan membinggungkan.

Demikian pertemuan kita, bila ada yang ditanyakan, saran, kritik bisa hubungi saya melalui kolom komentar, semoga pembahasan tadi menjadi ilmu yang bermanfaat bagi kawan sekalian.
Terimakasih dan sampai berjumpa kembali di pertemuan berikutnya.

b4ug02wp