Membuat Tabel di HTML & CSS

TABEL DI HTML & CSS

Tabel dalam HTML digunakan untuk menyusun data dalam bentuk baris dan kolom, sehingga mudah dibaca dan di pahami. Elemen-elemen HTML yang sering digunakan untuk membuat tabel adalah:
  • <table>: Mendefinisikan awal dan akhir dari sebuah tabel.
  • <tr>: Mendefinisikan baris dalam tabel.
  • <th>: Mendefinisikan judul kolom.
  • <td>: Mendefinisikan sel data dalam tabel.

Membuat Tabel di HTML & CSS

Berikut langkah-langkah cara membuat sebuah tabel sederhana berupa tabel nilai di HTML dengan menggunakan CSS.

1. Membuat folder dan file dengan format seperti berikut. Untuk nama folder dan file bisa disesuaikan sesuai keinginan.

2. Mengisi title atau judul untuk file HTML dan membuat link menuju file css, yaitu dengan menggunakan <link rel="stylesheet" href="css/style.css">.

3. Membuat heading atau <h2>

4. Memberi style untuk <h2> di file style.css. Disini saya akan memberikan properti text-align yang akan mengatur perataan teks, dan untuk value nya saya memilih center.

Hasilnya:

5. Membuat tabel dengan menggunakan tag <table> yang mana di dalamnya berisi tag <tr> atau table row yang digunakan untuk membuat baris pada tabel. Sedangkan di dalam tag <tr> diisi dengan tag <th> atau table header yang digunakan untuk mendefinisikan judul kolom.

Hasilnya:

6. Memberi style untuk <table> di file style.css. Disini saya memberikan properti width (lebar) dengan value 100%. Lalu saya menambahkan properti border-collapse dengan value collapse yang akan membuat tabel memiliki batas sel yang digabungkan. Dan yang terakhir saya menambahkan properti text-align.

Hasilnya:


7. Membuat <tr> atau table row lagi. Namun kali ini didalamnya diisi dengan tag <td> yang digunakan unruk mendifinisikan atau mengisi sel data seperti berikut:

Hasilnya:
8. Karena hasil gambar yang dimasukkan ke dalam tabel sebelumnya terlalu besar, maka disini saya akan menambahkan style untuk img dengan menggunakan properti height dan width seperti berikut:

Hasilnya:

9. Lalu di contoh ini saya akan membuat beberapa baris tabel baru dengan cara menyalin kode ini menjadi beberapa baris sesuai yang diinginkan.

Hasilnya:

10. Nah, agar lebih menarik, saya mencoba memberi background-color pada <th> atau judul kolom.

Hasilnya:

11. Kemudian agar lebih menarik lagi, saya akan menambahkan style yang nantinya membuat backround-color baris menjadi selang-seling.

Hasilnya:

12. Dan yang terakhir saya akan menambahkan efek hover pada data link Edit dan Delete. Cara kerja hover yaitu saat kursor menyorot link edit maupun delete, di masing-masing link tersebut nantinya akan terlihat backround warna sesuai yang kita inginkan.

Hasilnya:



Kurang lebih seperti itulah cara membuat sebuah tabel nilai sederhana di HTML dengan menggunakan CSS. Semoga dapat membantu teman-teman semua! Jangan lupa kunjungi github saya elvanazlita !

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar CSS Dasar

Gambar
APA ITU CSS? Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari sebuah halaman web. Jika kita membandingkan pembuatan sebuah website dengan membangun rumah, maka HTML adalah kerangka dan struktur dasar rumah tersebut. Sedangkan CSS adalah cat, perabotan, dan dekorasi yang membuat rumah tersebut menjadi lebih tertata rapih dan indah. Fungsi CSS Berikut beberapa fungsi CSS: CSS memungkinkan kita untuk memisahkan konten (HTML) dari tampilan (CSS). Hal ini dapat membuat kode lebih teroganisir, mudah dipelihara, dan dapat digunakan kembali. CSS dapat membuat tampilan lebih konsisten dengan menerapkan gaya yang sama ke seluruh elemen pada halaman web. CSS dapat membuat halaman website lebih responsiif dimana dapat menyesuaikan tampilannya secara otomatis berdasarkan ukuran layar perangkat. CSS yang ditulis dengan baik dan benar dapat meningkatkan kecepatan dalam loading halaman website. Struktur CSS  Selektor: Menentukan elemen HTML mana yang ...
Baca selengkapnya

Konfigurasi 3 MikroTik di Virtual Box

Gambar
Konfigurasi 3 MikroTik di Virtual Box Berikut contoh langkah sederhana membuat konfigurasi 3 MikroTik di Virtual Box: 1. Buat 3 MikroTik di Virtual Box 2. Pilih MIKROTIK_R1 lalu setting Adapter 1 menjadi Bridged Adapter 3. Setting Adapter 2 di MIKROTIK_R1 menjadi Internal Network  dan beri nama Lan1 4. Setting Adapter 3 di MIKROTIK_R1 menjadi Internal Network dan beri nama Lan2 5. Pilih MIKROTIK_R2 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan1 6. Pilih MIKROTIK_R3 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan2 7. Jalankan  MIKROTIK_R1  kemudian masuk ke system identity dan setting nama menjadi router_1 8. Masuk ke interface lalu setting ether1 menjadi eth1_ISP 9. Setting ether2 menjadi eth2_R2 10. Setting ether3  menjadi eth3_R3 11. Masuk ke ip address dan tambahkan ip address ke eth1_ISP 12. Ping gateway 13. Masuk ke ip route lalu tambahkan dst-address 14. Ping 8.8.8.8 15. Ping detik.com      Belum tersa...
Baca selengkapnya

Belajar Link, Relative dan Absolute URL, Bookmark di HTML

Gambar
Pernakah anda memperhatikan bagaimana ketika anda mengklik sebuah kata atau gambar, anda langsung berpindah ke halaman lain? Di balik itu semua, ada yang namanya link. Artikel ini akan membahas tentang apa itu link dan juga jenis-jenis link dalam HTML; Relative URL, Absolute URL, dan Bookmark. APA ITU LINK DALAM HTML? Link atau hyperlink adalah elemen dasar dalam HTML yang berfungsi untuk menghubungkan satu halaman web ke halaman web yang lain, gambar, dokumen, atau bahkan ke bagian tertentu halaman yang sama. Ketika pengguna mengklik sebuah link, browser akan secara otomatis mengarahkan pengguna ke halaman tujuan yang telah di tentukan. ELEMEN LINK DALAM HTML Elemen link dalam HTML didefinisikan menggunakan tag <a> . Atribut utama dalam tag <a>  adalah: href : Menentukan alamat URL (Uniform Resource Locator) dari halaman tujuan. target : Menentukan dimana halaman tujuan akan dibuka (di tab baru atau frame). RELATIVE DAN ABSOLUTE URL DALAM HTML URL (Uniform Resource Loc...
Baca selengkapnya