Slider

News

3DS Max

After Effect

Blender

Photoshop

Style5[ImagesOnly]

Sebuah tabel akan sangat berguna untuk menyajikan informasi secara lengkap dan interaktif. Selain itu, dengan tabel, informasi yang disajikan tidak akan begitu memakan banyak tempat karena bentuknya yang efisien yang hanya menampilkan bagian-bagian yang penting-penting saja.

Dalam halaman web, tabel akan sangat dibutuhkan, apalagi jika website tersebut ingin menampilkan data-data yang cukup banyak. Sehingga sangat tidak cocok jika digunakan teks biasa untuk menampilkannya.
Untuk membuat tabel di dokumen HTML, anda hanya perlu memperhitungkan banyaknya baris dan kolom dari tabel tersebut. Lalu memasukkan data-data sesuai jumlah aslinya.


  • Mulai sebuah tabel dengan tag <table> kemudian diikuti tag <tr>yang mendefinisikan baris dalam sebuah tabel.
  • Kemudian isikan data-data dari tabel diantara tag <td> dan </td>.
  • Setelah semua data diisi, tutup tag baris pertama dengan tag </tr>. 
  • Terakhir, akhiri tabel dengan </table>.

Contohnya bisa dilihat 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

kodenya:

<table border="1">
<tr>
      <td>baris 1 kolom 1</td>
      <td>baris 1 kolom 2</td>
      <td>baris 1 kolom 3</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>


  • jumlah baris tabel ditentukan dg banyaknya <tr>...</tr> yg dituliskan dlm elemen tabel dari <table>...</table>
  • sedangkan jumlah kolom ditentukan dg banyaknya <td>...</td> didalam setiap definisi baris, dari <tr>...</tr>

Untuk menentukan ketebalan border, anda bisa menambah nilai dari atribut border="nilai"
Misalnya Tabel-tabel berikut diisi dengan border yang berbeda:

Tabel dengan border 8
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

Tabel dengan border 15
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

jika anda ingin membuat header atau judul pada tabel, anda tinggal mengganti <td> dengan <th>   pada baris pertama. contohnya:

<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>


Hasilnya:

header1 header2 header3
baris 1 kolom 1 baris 1 kolom 2 baris 1 kolom 3
baris 2 kolom 1 baris 2 kolom 2 baris 2 kolom 3

Mengatur rowspan dan colspan pada tabel
Rowspan adalah baris yang melewati satu kolom atau ukurannya sama dengan dua kolom dibawahnya. contohnya bisa anda lihat dibawah:

header1 header2 header3
baris 1 kolom 1 baris 1 kolom 2 dengan colspan
baris 2 kolom 1 baris 2 kolom 2 baris 2 kolom 3

Kodenya:
<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td rowspan="2">baris 1 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>
</table>


Sedangkan colspan adalah kolom yang melewati atau ukurannya sama dengan dua baris. Contohnya seperti ini:
header1 header2 header3
baris 1 kolom 1
dengan rowspan
baris 1 kolom 2 baris 1 kolom 3
baris 2 kolom 2 baris 2 kolom 3

kodenya:
<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td colspanspan="2">baris 1 kolom 2 dengan colspan</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>


About Tedi Permana

Blogger, 3D Generalist, Photoshoper dan gamer. Lahir di Tasikmalaya 31 Agustus 1993.
«
Next
Newer Post
»
Previous
Older Post

No comments:

Post a Comment