Elemen Dasar 4

Materi kali ini membahas tentang tabel. sebelum membuat tag html, definisi tabel itu apa sih?.  tabel adalah daftar informasi yang tersusun secara kolom dan baris, misalnya  membuat jadwal perkuliahan dengan tabel untuk mempermudah melihat informasi hari,jam dan matakuliah sesuai jadwal perkuliahan. tabel terdiri dari baris dan kolom. untuk baris pada tag html yaitu <tr>  dengan singkatan table row. sedangkan untuk kolom pada tag html menggunakan <td> dengan singkatan table data.
contoh tag sebagai berikut:

1. Pangkalpinang
2. Sungailiat
<table>
   <tr>
     <td>1.</td>
     <td>Pangkalpinang</td>
   </tr>
   <tr>
     <td>2.</td>
     <td>Sungailiat</td>
  </tr>
</table>

untuk memberikan bingkai pada tabel menggunakan border, misal border=”3″

<table border="3">
  <tr>
    <td>1.</td>
    <td>Pangkalpinang</td>
  </tr>
<tr>
    <td>2.</td>
    <td>Sungailiat</td>
  </tr>
</table>

untuk membuat kolom judul menggunakan tag <th> dengan singkatan table head. sebagai contoh dapat dilihat pada tag dibawah ini:

No. Nama
1. Ariel Ramadhan
2. Gilang Ginanjar
<table border = "1">
  <tr>
    <th>No.</th>
    <th>Nama</th> 
  </tr>
  <tr>
    <td>1.</td>
    <td>Ariel Ramadhan</td>
  </tr>
<tr>
    <td>2.</td>
    <td>Gilang Ginanjar</td>
  </tr>
</table>

memberikan ukuran pada <td> dengan menambahkan width dan height dalam ukuran % atau pixels

<p> Dengan menggunakan Pixels </p>
<table border="2">
  <tr>
    <th>No.</th>
    <th>Nama</th>
  </tr>
  <tr>
    <td width="60px">1.</td>
    <td>Ariel Ramadhan</td>
  </tr>
  <tr>
    <td width="60px">2.</td>
    <td>Gilang Ginanjar</td>
  </tr>
</table>
<p> Dengan menggunakan %</p>
<table border="2">
  <tr>
    <th>No.</th>
    <th>Nama</th>
  </tr>
  <tr>
    <td width="25%">1.</td>
    <td width="75%">Ariel Ramadhan</td>
  </tr>
  <tr>
    <td width="25%">2.</td>
    <td width="75%">Gilang Ginanjar</td>
  </tr>
</table>

cara membuat tabel berwarna dapat menggunakan bordercolor dan bgcolor.

<table border="4" bordercolor="red" bgcolor="yellow">
 <tr>
   <th>No.</th>
   <th>Nama</th>
 </tr>
 <tr>
   <td>1.</td>
   <td>Ariel Ramadhan</td>
 </tr>
 <tr>
   <td>2.</td>
   <td>Gilang Ginanjar</td>
 </tr>
</table>

cara membuat membuat color di <th>, dengan menambahkan tag bgcolor

No Nama
1. Ariel Ramadhan
2. Gilang Ginanjar

tag htmlnya sebagai berikut:

<table border="2">
<tbody>
<tr>
<th bgcolor="blue">No</th>
<th bgcolor="green">Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Ariel Ramadhan</td>
</tr>
<tr>
<td>2.</td>
<td>Gilang Ginanjar</td>
</tr>
</tbody>
</table>

bagaimana menggabung baris menjadi satu? dengan menggunakan rowspan. ilustrasi gambar dapat dilihat pada gambar dibawah ini dimana 3 baris menjadi 1.

misalnnya tabel baris dan kolom dibawah ini.

Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 1 Kolom 3
Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3
Baris 3 Kolom 1 Baris 3 Kolom 2 Baris 3 Kolom 3

misalnya ingin menggabungkan baris 1 dan 2 pada kolom 1 maka menggunakan tag rowspan

Menggabungkan Baris 1 dan 2 pada Kolom 1 Baris 1 Kolom 2 Baris 1 Kolom 3
Baris 2 Kolom 2 Baris 2 Kolom 3
Baris 3 Kolom 1 Baris 3 Kolom 2 Baris 3 Kolom 3
<table border="2">
  <tr>
    <td rowspan="2"> Menggabungkan Baris 1 dan 2 pada Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
    <td>Baris 1 Kolom 3</td>
  </tr>
  <tr>
    <td>Baris 2 Kolom 2</td>
    <td>Baris 2 Kolom 3</td>
  </tr>
  <tr>
    <td>Baris 3 Kolom 1</td>
    <td>Baris 3 Kolom 2</td>
    <td>Baris 3 Kolom 3</td>
  </tr>
</table>

sekarang menggabungkan kolom, misalkan beberapa kolom yang berada diatas menjadi 1 menggunakan colspan

Menggabungkan Kolom 1,2,dan 3 pada baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3
Baris 3 Kolom 1 Baris 3 Kolom 2 Baris 3 Kolom 3
<table border="2">
  <tr>
    <td colspan="3"> Menggabungkan Kolom 1,2,dan 3 pada baris 1</td>
  </tr>
  <tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
    <td>Baris 2 Kolom 3</td>
  </tr>
  <tr>
    <td>Baris 3 Kolom 1</td>
    <td>Baris 3 Kolom 2</td>
    <td>Baris 3 Kolom 3</td>
  </tr>
</table>

Soal praktikum

Soal Ujian