Membuat Tabel
DAFTAR ISI

Sekarang waktunya kita belajar bagaimana membuat table di HTML. Kita mulai dengan table yang sederhana dulu sampai menuju table yang lebih rumit dan ruwet nantinya. Sebelum saya teruskan, saya menganjurkan untuk membuat table cuma untuk tabel. Jangan pakai table sebagai layout web. Selain memberatkan, juga tidak efektif. Saya masih melihat banyak template-template web yang keren-keren memakai table. Ini pastinya sangat tidak sehat bagi kecepatan load web kamu. So, pakai table untuk tabel saja.

Ada 3 komponen utama dalam pembuatan tabel yaitu:

– Penanda table <table>
– Penanda baris <tr>
– Penanda kolom <td>

Dan inilah contoh sebuah table sederhana dengan 3 kolom dan 2 baris:

<table>
<tr>
  <td>Kolom 1 Baris 1</td>
  <td>Kolom 2 Baris 1</td>
  <td>Kolom 3 Baris 1</td>
</tr>
<tr>
  <td>Kolom 1 Baris 2</td>
  <td>Kolom 2 Baris 2</td>
  <td>Kolom 3 Baris 2</td>
</tr>
</table>

Hasilnya akan semacam ini:

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

Kamu paham bagaimana cara membuatnya bukan? Untuk memudahkan membuat table, saya pada umumnya gunakan rumus ini:

1. Saya tulis dulu tablenya semacam ini:

<table>
</table>

2. Saya masukkan barisnya. Contohnya kita ingin bikin 2 baris, maka saya tinggal pasang 2 tag TR semacam ini:

<table>
<tr>
</tr>
<tr>
</tr>
</table>

3. Sekarang tinggal masukkan kolomnya saja di setiap baris semacam ini:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>

Baris kedua saya biarkan supaya kamu dapat fokus di baris pertama dulu.

Baca Juga:  Tips Ampuh Lindungi Keamanan di Internet ala Google

4. Terakhir memasukkan isi kolomnya

<table>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
<tr>
</tr>
</table>

Selesai deh! Mudah sekali bukan? Insya Allah artikel selanjutnya kita akan bahas tabel yang lebih rumit lagi. Sampai jumpa nanti ya.

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Infanthree Digital Administrator
Infanthree Digital Administrator
Website, Mobile Apps, IoT, Digital Marketing Agency, IT Konsultan
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
WhatsApp chat