Bagaimana cara membuat tabel di html?
|
Membuat Tabel HTML – Dalam menyajikan suatu data dan informasi, agar kelihatan rapi, terstruktur, dan mudah dipahami maka data tersebut perlu dibuat dalam bentuk terstruktur yang disebut dengan tabel. Tabel banyak dipakai untuk menampilkan suatu data maupun analis data. Show
Tabel merupakan struktur yang digunakan untuk menampilan data dalam bentuk kolom dan baris. Element yang digunakan untuk membuat tabel di HTML adalah Table Head Tabel head merupakan komponen tabel yang terletak pada bagian atas tabel. Tabel head digunakan untuk menempatkan judul data yang ingin ditampilkan. Tag yang digunakan untuk membuat table head adalah … | .Table Row Table row merupakan komponen tabel yang mendefinisikan baris suatu tabel HTML. Yang dimaksud baris pada tabel adalah sel tabel yang memanjang dari kiri ke kanan. Untuk membuat table row gunakan tag Table Data Table data berfungsi sebagai sel tabel yaitu sel yang digunakan untuk menempatkan atau menuliskan data tabel tersebut. Table data pada element
Element mendefinisikan jumlah kolom dalam satu baris. Tabel di atas tidak menggunakan table head, untuk menambahkan element ini, gunakan tag | sehingga syntax table di atas menjadi seperti berikut ini: | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Membuat Tabel: 3 Baris/4 Kolom dengan Head Kedua contoh tabel di atas tidak memiliki border dan jarak antar data juga masih berdekatan. Untuk itu tabel perlu kita manipulasi dengan menambahkan atribut-atribut yang sesuai sehingga diperoleh tampilan tabel data yang menarik. Mari kita bahas satu persatu atribut tabel. Daftar Isi Membuat Table HTML – BorderTabel tanpa menggunakan border akan kelihatan seperti susunan kalimat biasa tanda ada batas antar kolom dan baris. Untuk mengatasi masalah ini ditambahkan atribut tabel yaitu border pada tag
Selain cara di atas, kita dapat memanipulasi bentuk border dengan tambah kode CSS, mulai dari ketebalan, style (solid, dotted, dashed), dan warna. Contoh membuat tabel dengan ketebalan 2px, bentuk dotted, warna merah. Biar lebih mudah kita pisahkan kode HTML dan CSS: Kode pada file index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Kode CSS: 1 2 3 table, th, td { border: 2px dotted red; } Untuk membuat single border, tambahkan property border-collapse pada CSS, sehingga menjadi: 1 2 3 4 table, th, td { border: 2px dotted red; border-collapse: collapse; } Baca Juga: Panduan Instalasi Fedora 36 Membuat tabel dengan border tumpul (rounded), gunakan property border-radius pada CSS. Contoh untuk border dengan ukuran 1 px, solid, dan warna hitam: 1 2 3 4 table, th, td { border: 1px solid black; border-radius: 5px; } Menghapus border bagian luar tabel dengan cara hilangkan selector table pada kode CSS sehingga menjadi: 1 2 3 4 th, td { border: 1px solid black; border-radius: 5px; } Membuat tabel dengan border luar 2px, solid, biru dan border dalam 2px, dashed, merah, radius 5px, kode CSS yang digunakan: 1 2 3 4 5 6 7 table { border: 2px solid blue; } th, td { border: 2px solid red; border-radius: 5px; } Selain ketiga style di atas, terdapat gaya lain yang dapat kita terapkan pada border tabel yaitu double, groove, ridge, inset, outset, none, hidden. Seperti apa bentuknya, silakan dicoba satu per satu. Table SizesUkuran tabel di HTML jika tidak diatur akan mengikuti lebar dari data yang ada di sel tabel. Untuk mengcustom ukuran atau size tabel, tambahkan atribut style pada tag
Kita dapat mengatur ukuran tabel pada kolom tertentu, contoh mengatur size kolom 1 dengan lebar 10% dan kolom 2 sebesar 40% dari lebar tabel, tambahkan atribut style pada tag kolom tersebut seperti contoh berikut: | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Ukuran tabel dapat juga diatur sesuai kebutuhan, gunakan satuan px untuk value width seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Dengan cara yang sama dapat dilakukan custom ukuran pada kolom tabel, contoh 20px untuk lebar kolom 1 dan 250px untuk lebar kolom: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Selain kolom, head dan baris tabel juga dapat dicustom dari ukuran normal dengan cara menambahkan atribut style pada tag 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Baca Juga: Perintah Dasar Sistem Operasi Linux Ukuran tabel juga dapat dicustom dengan kode CSS. Contoh membuat tabel dengan ukuran 100% (lebar browser), tambahkan kode CSS berikut: 1 2 3 4 5 6 table { width: 100%; } table, th, td { border: 2px solid black; } Untuk mengcustom size pada kolom dan baris tertentu, terlebih dahulu tambahkan atribut class pada tag dan | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Sekarang kita tambahkan kode CSS dengan lebar kolom 1 (15%), kolom 4 (40%), tinggi baris 2 (50px), dan baris 3 (100px): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 table { width: 100%; } table, th, td { border: 2px solid black; } .kolom1 { width: 15%; } .kolom4 { width: 40%; } .baris2 { height: 50px; } .baris3 { height: 100px; } Membuat Tabel HTML – Padding dan SpacingUntuk mengatur jarak antara data yang terdapat pada sel dengan border tabel kita dapat menggunakan fungsi padding, sedangkan jarak antara border bagian luar dengan border bagian dalam tabel (ketebalan border) disebut dengan spacing. Fungsi padding dan spacing pada tabel dapat kita terapkan dengan menambahkan atribut cellpadding dan cellspacing pada tag
Selain dengan menambahkan atribut, fungsi padding dan spacing dapat juga diterapkan dengan menambahkan kode CSS. Contoh kita ambil kode HTML di atas dengan membuang atribut yang terdapat pada tabel, sehingga penulisan kode CSS nya adalah: 1 2 3 4 5 6 7 8 9 10 11 table, th, td { border: 2px solid black; } table { width: 100%; border-spacing: 10px; }
th, td { padding: 10px; } Untuk mengatur jarak padding atas, kiri, bawah, dan kanan, dapat dilakukan dengan cara menambahkan beberapa value pada property padding. Kita ambil contoh padding atas 30px, kanan 50px, bawah 20px, dan kiri 20px (searah jarum jam), penulisan property padding menjadi: 1 2 3 th, td { padding: 30px 50px 20px 20px; } Atau dapat juga lebih spesifik seperti di bawah ini: 1 2 3 4 5 6 th, td { padding-top: 30px; padding-right: 50px; padding-bottom: 20px; padding-left: 20px; } Membuat Tabel HTML – Colspan dan RowspanColspan dan Rowspan merupakan dua atribut yang digunakan untuk menggabungkan beberapa sel tabel sehingga menjadi satu buah sel. Atribut colspan digunakan untuk menggabungkan beberapa kolom (sel tabel digabungkan secara horizontal), sedangkan rowspan berfungsi menggabungan beberapa baris tabel (sel tabel digabungkan secara vertikal). Value atribut menyatakan jumlah sel yang akan digabung (merge cells). Contoh pada kode HTML di atas, kita ingin menggabungkan tabel head kolom 2 dengan head kolom 3, sel tabel baris 2/kolom 4 dengan baris 3/kolom 4: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Baca Juga: Instalasi dan Konfigurasi FTP Server pada Linux Debian 11 Contoh lain kita menggabungkan empat buah sel tabel sekaligus terdiri dari dua kolom dan dua baris. kode HTML menjadi: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Membuat Tabel HTML – Background ColorUntuk menambahkan warna pada sel tabel, kita dapat menggunaan atribut pada element
Selain menggunakan atribut bgcolor, warna tabel juga dapat diatur menggunakan kode CSS. Contoh menambahkan warna tomato pada head table, warna skyblue pada baris 2/kolom 3 dan baris 3/kolom 3. Terlebih dahulu kita tambahkan atribut class pada sel tabel yang ingin diwarnai, sehingga kode HTML nya menjadi: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 rel="stylesheet" type="text/css" href="style.css"> Membuat Tabel Sedangkan kode CSS yang harus ditambahkan adalah sebagai berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 table, th, td { border: 1px solid black; } table { width: 100%; } th, td { padding: 10px; } .tomato { background-color: tomato; } .skyblue { background-color: skyblue; } Table StylingDi atas kita telah belajar bagaimana cara menambahkan warna background pada tabel. Sekarang kita coba manipulasi tabel dengan style tertentu misalnya warna selang seling baris atau kolom (Zebra Striped Table), dan/ atau kombinasi baris dan kolom. Untuk membuat style tabel seperti ini kita perlu menggunakan kode CSS dengan menambahkan pseudo class selector berupa :nth-child(argument). Argument bisa berupa angka, urutan ganjil (odd) atau genap (even), dan formula. Dengan selector :nth-child ini kita dapat menyeleksi child element pada parent element (induk). Misalnya kita ingin menyeleksi satu atau beberapa element
Bài Viết Liên Quan
|
