Cara Menata Tabel Dengan CSS

Cara Menata Tabel Dengan Css



Tabel adalah alat yang paling umum dan efektif untuk merepresentasikan data secara terorganisir. Di masa lalu, sebelum CSS, file elemen digunakan untuk membuat tata letak desain yang kaya. Namun saat ini, tata letak dibuat dengan memanfaatkan beberapa properti CSS lainnya. Lebih khusus lagi, elemen HTML “” digunakan untuk membuat tabel web, yang dapat ditata lebih lanjut dengan menerapkan properti CSS yang berbeda.

Studi ini akan memandu terkait dengan penataan tabel dengan CSS.

Bagaimana Menata Tabel Dengan CSS?

Untuk menerapkan gaya ke tabel, kita akan melalui rangkaian langkah-langkah yang diberikan di bawah ini.





Langkah1: Buat Tabel dalam HTML



< meja >
< keterangan > Informasi Siswa < / keterangan >
< kepala >
< tr >
< th > Nama < / th >
< th > Kursus < / th >
< th > Tanda < / th >
< / tr >
< / kepala >
< tubuh >
< tr >
< td > William < / td >
< td > Jaringan < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Mendongkrak < / td >
< td > Pengantar C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Yusuf < / td >
< td > Pengantar Jawa < / td >
< td > 77 < / td >
< / tr >
< / tubuh >
< / meja >

Untuk membuat tabel dalam HTML, elemen HTML berikut digunakan:



  • “ ” elemen digunakan untuk membuat tabel dalam HTML.
  • “ ” digunakan untuk menambahkan keterangan pada tabel.
  • “ ” digunakan untuk menentukan tajuk tabel, yang biasanya berisi tajuk.
  • “
” digunakan untuk menambahkan baris.
  • “
    • ” tentukan konten tajuk.
  • “ ” menentukan bagian tubuh tabel.

    • Tabel yang dibuat saat ini terlihat seperti ini:



    Mari kita lanjutkan untuk melihat bagaimana menata tabel ini.



    Langkah 2: Gaya Elemen 'tubuh'.

    tubuh {
    font-family: Verdana, Jenewa, Tahoma, sans-serif;
    Latar Belakang- warna : rgb ( 233 , 233 , 233 ) ;
    }

    Elemen diterapkan dengan properti gaya CSS berikut:

    • “ font-family ” properti dengan nilai “ Verdana, Jenewa, Tahoma, sans-serif ” digunakan untuk menerapkan font yang didukung oleh browser. Jika browser tidak mendukung gaya font pertama, yang lain akan digunakan.
    • “ warna latar belakang ” Properti mengatur warna latar belakang elemen.

    Langkah 3: Gaya Elemen 'caption'.

    keterangan {
    font- ukuran : 25px;
    teks- meluruskan : tengah;
    Latar Belakang- warna : #1C6758;
    warna : rambut jagung;
    }

    Elemen

    diberi gaya sebagai berikut:

    • “ ukuran huruf ” properti digunakan untuk pengaturan ukuran font.
    • “ perataan teks ” properti menentukan perataan teks elemen.
    • “ warna ” properti mengacu pada warna font elemen.

    Berikut adalah output dari kode yang diberikan di atas:

    Langkah 4: Tambahkan Perbatasan ke Tabel
    The “ berbatasan ” properti digunakan untuk menambahkan batas di sekitar elemen. Ini adalah properti singkatan yang menentukan lebar perbatasan, gaya perbatasan, dan warna perbatasan.

    Mari terapkan perbatasan, bersama dengan padding, dan margin ke tabel:

    meja, th, td {
    berbatasan : 2px solid #1C6758;
    padding: 1px 6px;
    margin: otomatis;
    }

    Di Sini:

    • “ berbatasan ” menyesuaikan batas di sekeliling tabel, dengan menentukan lebar batas, gaya batas, dan warna batas.
    • “ lapisan ” menentukan ruang di sekitar konten elemen, di mana nilai pertama menentukan ruang di bagian atas-bawah dan nilai kedua menambahkan ruang di sisi kanan-kiri konten.
    • “ batas ” properti dengan nilai “ mobil ” menambahkan ruang yang sama di sekitar elemen.

    Keluaran

    Catatan : Jika kita tidak menginginkan spasi di antara batas tabel, gunakan properti border-collapse.

    Langkah 5: Ciutkan Spasi Perbatasan Dari Tabel
    Spasi di antara batas meja dapat dihilangkan dengan menggunakan tombol “ perbatasan-runtuh ” dengan nilai 'runtuh':

    perbatasan-runtuh: runtuh;

    Langkah 6: Sesuaikan Ukuran Tabel
    Mari kita lihat cara menyesuaikan ukuran tabel:

    th {
    lebar : 160px;
    }

    Ditambahkan “ lebar ” properti dengan elemen

    akan secara otomatis menyesuaikan ukuran tabel sesuai dengan itu::

    Kami juga dapat menerapkan gaya ke sel tabel tertentu. Mari kita bahas!

    Langkah 7: Gaya Sel Tabel Spesifik
    Untuk menata sel tabel tertentu, tentukan nama kelas sel tertentu itu. Misalnya, kode di bawah menunjukkan bahwa sel ketiga dari baris kedua diberi nama kelas “ menyorot ”:

    < td kelas = 'menyorot' > 99 < / td >

    Sekarang, akses sel menggunakan nama kelas di file CSS:

    .menyorot {
    Latar Belakang- warna : #0f90d5;
    }

    The “ .menyorot ” mengacu pada sorotan kelas dari elemen

    		. Elemen ini diterapkan dengan “ warna latar belakang ” untuk menentukan warna pada latar belakang.

    Seperti yang bisa kita lihat, sel tabel yang ditentukan berhasil ditata:

    Langkah 8: Atur Keluarga Font dan Ukuran Tabel

    meja {
    font-family: kursif;
    font- ukuran : 18px;
    teks- meluruskan : tengah;
    }

    Properti CSS berikut diterapkan ke elemen tabel:

    • “ font-family ” properti menyetel gaya font elemen.
    • “ ukuran huruf ” properti digunakan untuk pengaturan font elemen.
    • “ perataan teks ” properti digunakan untuk mengatur perataan teks.

    Inilah hasilnya:

    Langkah 9: Warnai baris dalam Urutan
    Juga diperbolehkan untuk menerapkan gaya ke baris atau kolom tertentu. Misalnya, baris genap diberi gaya dengan mengikuti format di bawah ini:

    \
    tbody tr:nth-child ( bahkan ) {
    Latar Belakang- warna : #FFB200;
    }

    Di Sini:

    • The “ :n-anak(genap) ” pemilih semu digunakan untuk mengambil satu argumen yang menentukan pola di mana gaya akan diterapkan.
    • “ warna latar belakang ” properti digunakan untuk mengatur warna latar belakang elemen.

    Dapat diamati bahwa warna latar berhasil diterapkan pada baris genap:

    Itu semua tentang menata tabel dengan CSS

    Kesimpulan

    Tabel adalah alat penting untuk menjaga agar data tetap teratur. Tabel dapat dibuat dengan menggunakan elemen HTML

    , , dan lainnya. Beberapa properti CSS digunakan untuk mengatur gaya tabel, seperti border, properti background-color, properti font-family, dan banyak lagi. Untuk pemahaman yang lebih baik, artikel ini telah menjelaskan prosedur langkah demi langkah untuk menata tabel dengan CSS.

    Lainnya

    Kategori

    Pesan Populer

    Untuk Apa Integrasi Data Tanpa Server Digunakan?

    Berapa Banyak Data yang Digunakan Laptop di Hotspot?

    Bagaimana Melakukan Strategi Perutean di Node.js?

    Skema Warna Terminal Windows

    Pemantauan Sistem Raspberry Pi Menggunakan Monitorix

    Cara Memasang Google Chrome di Ubuntu 24.04

    Apa itu ID Pemain di Roblox?

    Bagaimana Cara Mendapatkan Hanya Satu File Dari Cabang Lain?

    Berikan Pengguna Shutdown dan Reboot Privileges di Raspberry Pi

    Bagaimana cara Menarik File dari Jarak Jauh Tanpa Menimpa File Lokal?

    Cara Melakukan Left Outer Joins – LINQ di C#

    Apa itu Klien Pengujian Perselisihan?

    Cara Menyembunyikan Status Online Anda di WhatsApp di Ponsel Android

    10 Game Paling Menakutkan di Roblox

    Bagaimana Mengembalikan Modifikasi di Git Menggunakan Perintah 'git revert'?

    Cara Melakukan Pembersihan Data dengan Python dan Pandas

    Apa Perbedaan Antara Oracle Linux dan Ubuntu Linux?

    Bagaimana Cara Memblokir Situs Web untuk Pengguna Standar di Windows 10?

    Cara Mengonfigurasi JupyterHub Idle Culler di JupyterHub

    Dapatkan Filter dan Pantau Acara Kubernetes

    ,