Skip to main content

Mengenal Tabel pada script HTML

Tabel merupakan salah satu hal yang sangat di perlukan dalam menyajikan sebuah rincian data . meskipun ada juga yang menggunakan tag div , namun saya rasa terlalu rumit kalau menggunakan tag div hanya untuk menampilkan data data yang berbebentuk tabel.

Kali ini saya akan share membuat tabel pada halaman html.
Struktur penulisan tag tabel adalah sebagai berikut :
<table>
                <tr>
                                <td> …(konten).. <td>
                </tr>
</table>

Untuk lebih jelasnya silahkan lihat contoh berikut

Contohnya:

<!DOCTYPE html>
<html lang=”en-US”>
                <head>
                                <title> Pengenalan Tabel </title>
                </head>
                <body>
                                <h2> Tabel Harga Makanan </h2>
                                <table border=”1”>
                                                <tr>
                                                                <th> No </th>
                                                                <th> Nama Makanan </th>
                                                                <th> Harga Makanan </th>
                                                </tr>
                                                <tr>
                                                                <td> 1 </td>
                                                                <td> Nasi Campur </td>
                                                                <td> Rp. 10.000 </td>
                                                </tr>
                                                <tr>
                                                                <td> 2 </td>
                                                                <td> Nasi Uduk </td>
                                                                <td> Rp. 11.000 </td>
                                                </tr>
                                                <tr>
                                                                <td> 3 </td>
                                                                <td> Nasi Rawon </td>
                                                                <td> Rp. 12.000 </td>
                                                </tr>
                                </table>
                </body>
</html>

Penjelasan:
 <table> … </table>

Merupakan tag wajib untuk membuat sebuah tabel.

<tr> … </tr>

Merupakan tag yang ada di dalam tag table untuk menandakan bahwa kita membuat sebuah baris pada tabel.

<th> … </td>  atau  <td> … </td>

Tag th atau tag td adalah tag untuk membentuk atau menandakan sebuah kolom pada tabel.

Tabel terbentuk dari baris dan kolom yang saling bertemu yang biasanya di Microsoft xcel pertemuan baris dan kolom ini kita sebut shell.
 jika kita hanya menuliskan <tr>..</tr>  tanpa <th>…</th> atau <td>…</td> tentu saja tabel yang kita buat tidak akan terbentuk.

Atau kita hanya menuliskan <th>…</th> atau <td> … </td> tanpa menuliskan <tr> … </tr>
Kita akan kesulitan untuk menentukan baris keberapa suatu data.

<th> … </th> umumnya digunakan untuk konten judul kolom
<td>… </td> umumnya digunakan untuk konten yang bersifat isi atau rincian data

Border=”…”
Merupakan salah satu atribut pada tag table untuk memberikan tampilan garis pada tabel.  Border memiliki value yang bersifat nominal , nominal tersebut menyatakan ketebalan garis yang di tampilkan

Contoh Hasil:
Gambar : 1



Dari gambar 1 telah kita lihat hasil dari contoh script table pada html.
Selanjutnya , Bagaimana menggabungkan 2 atau lebih baris menjadi 1 baris, atau 2 atau lebih kolom digabung menjadi 1 kolom ?...

Oke tidak pakai bingung … saya akan share juga cara menggabungkan kolom atau baris atau bahkan kolom dan baris kita gabung …J

MENGGABUNGKAN DUA ATAU LEBIH BARIS DALAM SATU BARIS

Untuk menggabungkan beberapa baris dalam satu baris kita cukup menambahkan atribut rowspan=””  pada tag <th>…</th> atau <td> … </td>

Perlu diperhatikan saat kita membuat atau menggabungkan beberapa baris dalam sebuah baris tabel , maka secara tidak langsung kita telah membuatkan kolom untuk baris yang tergabung shellnya. Jadi untuk penggunaan tag <th>…</th>  atau <td>…</td> pada baris berikutnya (baris yang tergabung shellnya )
Kita kurangi satu tag .

Untuk lebih jelasnya lihat contoh berikut

Contohnya:
<!DOCTYPE html>
<html lang=”en-US”>
                <head>
                                <title> Pengenalan Tabel </title>
                </head>
                <body>
                                <h2> Jadwal Piket </h2>
                                <table border=”1”>
                                                <tr>
                                                                <th> hari</th>
                                                                <th> nama siswa </th>
                                                                <th> Nomor Absen </th>
                                                </tr>
                                                <tr>
                                                                <td rowspan=2> SENIN</td>
                                                                <td> suneo </td>
                                                                <td> sizuka </td>
                                                </tr>
                                                <tr>
                                                                <td> takeshi </td>
                                                                <td> dora </td>
                                                </tr>
                                                <tr>
                                                                <td>SELASA</td>
                                                                <td> uzumaki </td>
                                                                <td> sinbe </td>
                                                </tr>
                                            
                                </table>
                </body>
</html>

Penjelasan :

Rowspan =”…”

Merupakan atribut pada tabel untuk menggabungkan beberapa baris menjadi satu baris.
Seperti contoh script tersebut kita lihat bahwa ada bagian yang hanya terdapat 2 tag td , dan ada yang terdapat 3 tag td. Loh kenapa begitu? …pada bagian yang hanya terdapat 2 tag , terjadi karena menyesuaikan dengan rowspan karena telah bergabung dengan baris yang lain. Belum paham yah ? ..
Silahkan lihat gambar ini :

Kolom 1 baris  1 digabung dengan kolom 1 baris ke 2
Kolom 2 baris 1
Kolom 3 baris 1
Kolom 2 baris 2
Kolom 3 baris 2
Kolom 1 baris 3
Kolom 2 baris 3
Kolom 3 baris 3

Bagaimana , semoga gambaran tersebut dapat di pahami.

Contoh hasil :
gambar 2


MENGGABUNGKAN DUA ATAU LEBIH KOLOM  DALAM SATU KOLOM

untuk menggabungkan beberapa kolom dalam satu kolom hampir mirip dengan menggabungkan beberapa  baris dalam satu baris . atribut yang digunakan collspan=”…” pada tag <td>…</td> atau <th>…</th>

yang perlu diperhatikan untuk penggunaan atribut ini adalah jumlah kolom untuk baris berikutnya.
Karena harus kita sesuaikan jumlah kolom baris selanjutnya terhadap jumlah kolom yang di colspan dan kolom yang tidak di colspan di baris sebelumnya. Agar tabel yang terbentuk tampak bagus.

Contohnya:
<!DOCTYPE html>
<html lang=”en-US”>
                <head>
                                <title> Pengenalan Tabel </title>
                </head>
                <body>
                                <h2> Jadwal Pelajaran</h2>
                                <table border=”1”>
                                                <tr>
                                                                <th colspan=”3”> JADWAL PELAJARAN  </th>
                                                </tr>
                                                <tr>
                                                                <td> SENIN / KAMIS</td>
                                                                <td> SELASA / JUMAT </td>
                                                                <td> RABU / SABTU </td>
                                                </tr>
                                                <tr>
                                                                <td>web</td>
                                                                <td> design </td>
                                                                <td> network </td>
                                                </tr>
                                            
                                </table>
                </body>
</html>

Penjelasan:

Colspan=”…”

Merupakan atribut pada table yang digunakan untuk menggabungkan beberapa kolom menjadi satu kolom.

Contoh hasil:
Gambar3


Seperti kita lihat gambar 3 di atas ada 3 kolom tergabung dalam satu kolom di baris pertama dan baris kedua dan ketiga memiliki 3 kolom.

GABUNGAN ROWSPAN DAN COLSPAN

Terkadang kita menjumpai tampilan tabel yang menggabungkan beberapa kolom dan beberapa baris dalam satu baris dan satu kolom. Tampilan tersebut adalah gabungan dari rowspan dan colspan .
Kalau kamu sudah paham menggabungkan kolom dan juga menggabungkan baris , saya rasa cukup mudah untuk menggabungkan kolom dan baris.

Contohnya:
<!DOCTYPE html>
<html lang=”en-US”>
                <head>
                                <title> Pengenalan Tabel </title>
                </head>
                <body>
                                <h2> template letak content</h2>
                                <table border=”1”>
                                                <tr>
                                                                <th colspan=”2” rowspan=”2”> logo </th>
                                                                <th> JUDUL </th>
                                                </tr>
                                                <tr>
                                                                <td> navigasi </td>
                                                </tr>
                                                <tr>
                                                                <td>content kiri</td>
                                                                <td> content tengah </td>
                                                                <td> content kanan </td>
                                                </tr>
                                            
                                </table>
                </body>
</html>

Penjelasan:

dari script contoh di atas tampak penggunaan roespan dan colspan secara bersamaan . diperlukan ketelitian untuk penulisan script karena akan mempengaruhi jumlah baris atau kolom yang akan dibuat pada script berikutnya.

Hasilnya:
Gambar 4

dari gambar 4 tersebut tampak 2 kolom dan 2 baris digabung menjadi 1 kolom dan 1 baris .

dalam mempelajari struktur tabel dibutuhkan juga kejelian dan ketelitian perhitungan jumlah kolom maupun jumlah baris. Jadi banyak banyak berlatih dan ber experiment yah broo.. J

ada beberapa atribut yang juga dapat digunakan dalam pembuatan tabel , misalnya width=”..” , height=”..” dan masih banyak lainya … untuk refrensi kunjungi aja website website yang menyediakan fundamental html . contohnya w3schools.com .

oke lah mungkin ini yang sedikit bisa saya sharing kali ini… semoga bermanfaat .

 Penulis: Seno Apriliyadi
Labels:

Comments

  1. langleedagen5 March 2022 at 18:50

    Betting at Betway Casino, New Jersey - Mapyro
    Find the titanium dab nail best online betting experience titanium jewelry in New Jersey. Discover Betway Casino's titanium cerakote welcome bonus, 메이피로출장마사지 promotions, titanium vs ceramic games, and banking options.

    ReplyDelete

Post a Comment

Popular posts from this blog

Format tanggal dan jam pada bahasa pemrograman PHP (Date Format)

PHP (PHP: Hypertext Processor) Merupakan salah satu bahasa pemrograman yang sangat dikenal di kalangan programer. dan versi PHP paling terbaru pada tahuin postingan ini dibuat adalah versi 7.3. Artikel kali ini berkaitan dengan salah satu parameter pada fungsi yang sering digunakan untuk menampilkan maupun memformat output tanggal dan jam (waktu). beberapa fungsi yang sering digunakan diantaranya date() dan date_format(). Fungsi date() fungsi date() umumnya digunakan untuk mengambil waktu dari sytem / waktu server. fungsi date memiliki beberapa parameter diantaranya: $format: Digunakan untuk menentukan bentuk output waktu yang di inginkan. $timestamp:  (Opsional)  Nilai satuan waktu dalam UNIX sytem , bertipedata integer. Fungsi date_format() fungsi date_format() adalah fungsi untuk merubah bentuk output dari variable yang bertipedata date. fungsi ini biasanya didahului dengan fungsi date_create(),   yaitu salah satu fungsi php yang membuat...
Post a Comment
Read more

Merubah Folder Publik Pada Laravel 5.8

Laravel merupakan salah satu framework yang saat ini sedang ramai digunakan, Laravel memiliki struktur direktori / folder yang cukup mudah dipahami bahkan kita bisa membuat custom folder sendiri sesuai keperluan. Kali ini saya ingin berbagi hal yang saya dapat setelah mempelajari laravel dan berkeliling dari situs ke situs. yaitu bagaimana merubah folder publik pada laravel (saya menggunakan laravel v5.8). Sebagai Catatan umumnya setiap webserver selalu mencari & membaca terlebih dahulu file index pada publik direktori (folder) pada website. dan pada laravel terletak pada folder public.  Berikut Contoh struktur folder pada laravel : / /app /bootstrap /config /database /public     /index.php /resources /routes /storage Namaun pada saat kita akan mengupload / deploy website kita ke server Hosting yang pada umumnya menggunakan nama folder public_html . tentu suatu hal yang mungkin membuat kita sedikit bingung untuk merubah nama folder dari project kita ka...
2 comments
Read more

Struktur dasar penuliasan tag HTML

Dalam membangun sebuah website ada hal hal yang perlu kamu pelajari dan mengerti. salah satunya penyusunan script atau tulisan kode penyusun halaman website kamu HTML ( Hyper Text Markup Language ) merupakan bahasa markah yang menyusun sebuah halaman website. Penulisan bahasa HTML diapit dengan tag < ... >  . Contohnya :  < H1 > ( kontent atau teks ) </H1>
2 comments
Read more