Tutorial Cara Buat Tabel Di HTML Untuk Pemula

Halo topik kali akan membahas topik tentang cara membuat web design dengan html. Pasti teman-teman dalam membuat website membutuhkan tampilan yang enak dipandang, memiliki susunan grid yang rapi. Salah satu cara membuat tampilan seperti itu yaitu dengan menggunakan fitur tag <table>.

Gambar - Tutorial Cara Buat Tabel Di HTML Untuk Pemula

Berikut adalah contoh script HTML membuat tabel.

<table border="1">

  <tr>

    <td>aaa</td>

    <td>bbb</td>

    <td>ccc</td>

  </tr>

  <tr>

    <td>ddd</td><td>eee</td><td>fff</td>

  </tr>

</table>

Penjelasan :

- Dalam membuat tabel, biasakan langkah pertama yang kita buat adalah tag <table>

<table border="1">

  -- isi baris dan kolom --

</table>

- Kemudian kita tentukan (jumlah) baris yang kita inginkan. Misalnya kita mau ada 2 baris, maka kita menambahkan 2 pasang tag <tr>. Contohnya seperti di bawah.

<table border="1">

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

</table>

- Lalu terakhir kita menentukan berapa jumlah kolom dalam setiap baris dalam tabel. Anggap saja kita mau membuat tabel seperti di bawah.

- Tabel di atas memiliki 2 baris dan memiliki masing-masing 3 kolom. Berarti penulisan tabel HTML yang benar adalah.

<table border="1">

  <tr>
     <td>aaa</td>
     <td>bbb</td>
     <td>ccc</td>
  
  </tr>
  <tr>
     <td>ddd</td>
     <td>eee</td>
     <td>fff</td>
  
  </tr>

</table>

- Bagaimana gampangkan ? lantas bagaimana jika ada kondisi tabel seperti gambar di bawah.

- Jika kondisinya demikian kita harus menambahkan attribut dalam tag kolomnya. Atribut adalah salah satu identitas penanda dalam HTML. HTML memiliki beberapa aturan penulisan atribut dalam setiap tagnya. Contohnya seperti di bawah untuk kondisi seperti di atas.

<td colspan="2">aaa</td>

- colspan="2" artinya kolom akan memiliki panjang yang sama dengan 2 kolom. Jadi penulisan  tabel HTML dari gambar di atas bisa seperti script di bawah.

<table border="1">

  <tr>
     <td colspan="2">aaa</td>
  
  </tr>
  <tr>
     <td>ddd</td>
     <td>eee</td>
  
  </tr>

</table>

- Adalagi kondisi lain seperti gambar tabel di bawah.

- Saya yakin anda akan cepat mengerti dengan sintak di bawah.

<table border="1">

  <tr>
     <td rowspan="2">aaa</td>

     <td>eee</td>
  
  </tr>
  <tr>
     <td>ddd</td>
  
  </tr>

</table>

- Gambar di atas menggunakan atribut rowspan. kolom pertama pada baris pertama memiliki tinggi yang sama banyaknya dengan 2 baris kolom.

Demikianlah tutorial cara buat tabel HTML, semoga bisa bermanfaat. Untuk lebih jelasnya teman-teman bisa mengikuti tutorial di bawah.

http://www.w3schools.com/html/html_tables.asp

Jika ada yang ingin ditanyakan, silahkan bertanya pada kolom komentar. Atau follow facebook kami di http://facebook.com/wawkakpost

Terima kasih.

Kata kunci : cara buat web html, belajar html pemula, buat html, cara buat tabel, cara membuat web design dengan html, belajar membuat html

Tweet

Artikel keren lainnya:

• Tutorial Cara Buat Tabel Di HTML Untuk Pemula
• Belajar Membuat Tampilan Form HTML Untuk Pemula, Yuk Belajar Dari Dasar