HTML Dasar: Bermain dengan Table

Assalamualaikum Wr. Wb.

HTML Dasar: Bermain dengan Table | Pada kesempatan ini saya akan membahas tentang table dalam HTML, Fungsi tabel ini sangat banyak dan di butuhkan dalam Web, biasanya fungsi table dalam HTML di gunakan untuk membuat sebuah tabel, layouting, design form, dan lain sebagainya.

Oke, langsung saja kita mulai dengan tag awal yang di gunakan dalam table adalah tag <table>..</table>, tag ini adalah sebuah tag pembuka untuk mengidentifikasi sebuah table dalam file HTML, selanjutnya yaitu untuk membuat sebuah row atau baris dengan tag <tr>..</tr>, di dalam sebuah tag row, barulah ada tag <td>...</td> yang mengidentifikasikan sebuah coloumn atau kolom yang menyamping ke kanan, dan ada juga tag <th>..</th> yang digunakan untuk membuat sebuah table heading.

Langsung saja kita praktikkan...

<table border="1" style="width:50%">
  <tr>
    <td><b>No</b></td>
    <td><b>Heading</b></td> 
    <td><b>Heading Lagi</b></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Data</td> 
    <td>Datadata</td>
  </tr>
</table>

Maka hasilnya seperti ini:

Atribut border diatas digunakan untuk menentukan bahwa tabel tersebut terdapat border (garis) atau tidak, sedangkan width digunakan untuk menentukan lebar tabel tersebut.

Sekarang kita akan mencoba untuk styling tabel menggunakan CSS dengan menambahkan tag <style> atau dengan file CSS.

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;

Maka border akan berubah

Terlihat border pada tabel tersebut menjadi tanpa space dan berwarna hitam tebal dan berukuran 1 px.

Sekarang kita akan belajar tentang colspan dan rowspan, colspan adalah sebuah fungsi yang digunakan untuk membuat beberapa kolom dalam sebuah tabel menjadi satu, sedangkan rowspan membuat beberapa baris menjadi satu. Langsung saja kita praktikkan

<table border="1" width="50%">
  <tr>
    <th>Nama:</th>
    <td>Roihan Azian</td>
  </tr>
  <tr>
    <th rowspan="2">HP:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
  <tr>
      <td colspan="2">Telpon</td>
  </tr>
</table>

Maka jika kita preview hasilnya akan seperti gambar di bawah:

Kolom HP diatas menjadi seperti itu karena menggabungkan 2 baris dengan atribut rowspan="2", sedangkan kolom telpon menjadi panjang karena menggabungkan 2 kolom dengan atribut colspan="2".

Itulah sedikit pembahasan tentang HTML table, jika ada kesalahan atau pertanyaan silahkan kirimkan ke Facebook dan Twitter kami, atau bisa juga dengan berkomentar di bawah.

Terima kasih atas kunjungan anda, semoga bermanfaat.

Wassalamualaikum Wr. Wb.