Skip to content Skip to sidebar Skip to footer
loading...

Cara Membuat Dan Menggabungkan Kolom Atau Baris Pada Table Dengan HTML ( Colspan dan Rowspan )

Cara Membuat Table di HTML Lengkap Atribut di Dalamnya

A. Pengertian HTML
HTML atau yang merupakan singkatan dari Hypertext Mark Up Language adalah bahasa standar pemrograman untuk membuat suatu website yang bisa diakses dengan internet. Dengan kata lain halaman website yang kita lihat dan kita baca disusun dengan menggunakan bahasa ini dan kemudian diterjemahkan oleh komputer agar dapat dipahami oleh penggunanya. Html merupakan standar pembuatan website secara luas agar laman website dapat ditampilkan pada layar komputer.

Baca Juga : Cara Membuat Tabel Yang Benar Menggunakan HTML atau PHP

Html disusun dengan kode dan simbol tertentu yang dimasukkan ke dalam sebuah file atau dokumen. Jadi setiap Anda membuka website apapun dengan menggunakan browser maka web tersebut dibuat dengan menggunakan html.

B. Fungsi HTML
Html yang dikenal sebagai bahasa pemrograman dalam ilmu komputer memiliki beberapa fungsi, diantaranya adalah sebagai berikut:
  1. Fungsi utama html yang diketahui adalah untuk membuat suatu halaman website yang bisa dibaca dan dipahami oleh pengguna dengan lebih mudah. Seluruh laman website yang ada dalam internet dibuat dengan html dan tidak ada pengecualian.
  2. Menandai teks pada suatu laman, html ditulis pada suatu halaman dokumen dengan tag atau simbol tertentu dimana simbol dan tag tersebut akan menandai teks menjadi tebal, miring, bergaris tebal dan lain sebagainya. Misal jika kita membuat suatu teks menjadi teks miring atau italic, dalam laman html dituliskan kode <i>, <b> untuk teks tebal dan <u> untuk teks bergaris bawah.
  3. Sebagai dasar website, website yang dibuat tentunya memiliki beberapa fitur yang dibuat dengan menggunakan java script (untuk mengatur perilaku web), implemetasi bahasa pemrograman server PHP, dan mendesain web menggunakan CSS. Semua bahasa tersebut dapat diaplikasikan jika web memiliki bahasa html sebagai dasarnya.
  4. Menampilkan tabel, gambar, video, dan lainnya. Biasanya dalam website atau blog kita tidak bisa langsung meletakkan tabel, gambar maupun video oleh sebab itu komponen tersebut diletakkan pada web dengan menggunakan bahasa html.
  5. Menandai elemen dan membuat online form, html juga berfungsi untuk menandai bagian-bagian dalam website diantaranya header, main, footer, navigation dan lain sebagainya. Selain itu html juga biasanya digunakan sebagai bahasa dalam membuat suatu online form atau formulir digital.

C. Cara Membuat Dan Menggabungkan Kolom Atau Baris Pada Table Dengan HTML ( Colspan dan Rowspan )
Tabel adalah sarana untuk menempatkan informasi agar mudah dibaca dan dipahami. Untuk memahami pembuatan tabel pada HTML, berikut saya uraikan beberapa tag yang digunakan atau terlibat pada table. Cara Membuat Table di HTML Lengkap Atribut di Dalamnya

Table

Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag <table>.
<table></table>
Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di dalam tag table)
<table> <tr></tr> </table>
Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td> (table data) yang digunakan di dalam tag <tr>. 
1. <table>
2. <tr>
3.      <td>No</td>
4.      <td>Nama</td>
5.      <td>Alamat</td>
6. </tr>
7. </table>
Atribut pada tabel:
1. <Table> : menyaakan tag untuk tabel
2. <width> : untuk menyatakan seberapa besar/ lebar yang akan kita buat
3. <border> : ketebalan garis pembatas tabel
4. <tr> : menyatakan sebagai tag kolom
5. <td> : menyatakan sebagai tag cell
6. <cellspacing> : Atribut cellspacing menyatakan jarak antara sel satu dan
lainnya
7. <cellpading> : Atribut cellpading menyatakan jarak antara isi sel dengan
batas dari sel tersebut
8. <collspan> : menggabungkan beberapa kolom menjadi satu kolom
9. <rowspan> : menggabungkan beberapa baris menjadi satu baris
10. <height> : menyatakan tinggi sebuah tabel
11. <align> : meyatakan dimana posisi objek secara horizontal didalam tabel
12. <valign> : menyatakan dimana posisi objek secara vertical didalam tabel

untuk mempermudah sobat, kita langsung praktekkan dengan mengetik kode di bawah ini dan simpan dengan nama table.html


Berikut hasil dari kode script diatas:

Cellspacing dan Cellpadding

Atribut cellspacing digunakan untuk mengatur jarak atau spasi antar sel dengan sel lainnya dan antar sel dengan batas tabel. Sedangkan atribut cellpading digunakan untuk mengatur spasi antara batas sel dengan teks di dalam sel. untuk lebih jelasnya silahkan anda tambahkan attribut cellspacing dan cellpading pada file table.html sebelumnya. atau silahkan ketikkan kode dibawah dan buat file baru dengan nama cellspacing_pading.html


Hasil dari kode diatas seperti berikut:

Cellspacing dan Cellpadding

Baca Juga:

Collspan dan Rowspan

Atribut rowspan digunakan untuk menggabungkan beberapa buah baris menjadi satu. Sedangkan atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu. Atribut-atribut ini di pakai berdasarkan tag <td>.  untuk lebih mudah nya lebih baik kita peraktikkan.

Contoh menggabungkan kolom, simpan dengan nama colspan.html.

Berikut adalah hasil dari kode diatas:

Collspan dan Rowspan

Contoh menggabungkan baris, simpan dengan nama rowspan.html.

Hasil dari kode diatas seprti berikut:

Collspan dan Rowspan

Contoh menggabungkan baris dan kolom, simpan dengan nama col_row.html.

Berikut hasil dari kode diatas:

Collspan dan Rowspan

Width dan Height

Atribut width adalah atribut untuk menyatakan lebar dari sebuah tabel atau kolom <td> dan atribut height digunakan untuk menyatakan tinggi sebuah tabel atau baris <tr> pada tabel. Berikut ini contoh penggunaan atribut width dan height, ketikkan kode berikut kemudian simpan dengan nama tinggi_lebar_tabel.html.


Hasil dari kode diatas adalah:

Width dan Height

Align dan Valign

Atribut align dan valign biasanya diletakkan bersamaan atau didalam tanda kurung tag <table><tr><td>.
1. Align digunakan untuk menyatakan objek yang diletakkan berada pada posisi mendatar (horizontal), align mempunyai 4 model yaitu : left, right, center, dan justyfi.
2. Valign digunakan untuk menyatakan objek yang diletakkan berada pada posisi tegak (vertikal), valign mempunyai 3 model yaitu : top, bottom, dan middle. Untuk lebih jelasnya perhatikan contoh berikut, simpan dengan nama valign_align.html.


Hasil dari kode diatas:

Align dan Valign


Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa Cara Membuat Table di HTML? Mungkin itu saja tulisan yang membahas tentang Cara Membuat Table di HTML, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

2 comments for "Cara Membuat Dan Menggabungkan Kolom Atau Baris Pada Table Dengan HTML ( Colspan dan Rowspan )"

  1. apakah penggunan tag thead dan tbody itu opsional?

    ReplyDelete
  2. terima kasih sudah berbagi ilmunya, semoga tambah berkah buat banyak orang.

    salam kenal dari kami, Javanese Trans Tegalgondo, Karangploso, Malang

    ReplyDelete

= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish

loading...
loading...
loading...