CSS ile Tablo Nasıl Stillendirilir

Css Ile Tablo Nasil Stillendirilir



Tablolar, verileri organize bir şekilde temsil etmek için en yaygın ve etkili araçtır. Daha önceki zamanlarda, CSS'den önce, öğesi, zengin tasarım düzenleri oluşturmak için kullanıldı. Ancak günümüzde, mizanpajlar diğer birçok CSS özelliği kullanılarak oluşturulmaktadır. Daha spesifik olarak, HTML '' öğesi, farklı CSS özellikleri uygulanarak daha da stillendirilebilen bir web tablosu oluşturmak için kullanılır.

Bu çalışma, CSS ile tabloları şekillendirme konusunda yol gösterici olacaktır.

CSS ile Tablo Nasıl Stillendirilir?

Stilleri tabloya uygulamak için aşağıda verilen bir dizi adımdan geçeceğiz.





Adım 1: HTML'de Tablo Oluşturun



< masa >
< altyazı > Öğrenci Bilgileri < / altyazı >
< baş belası >
< tr >
< inci > İsim < / inci >
< inci > Kurs < / inci >
< inci > işaretler < / inci >
< / tr >
< / baş belası >
< iki vücut >
< tr >
< td > William < / td >
< td > ağ oluşturma < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > kriko < / td >
< td > C++'a Giriş < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Yusuf < / td >
< td > Java'ya Giriş < / td >
< td > 77 < / td >
< / tr >
< / iki vücut >
< / masa >

HTML'de bir tablo oluşturmak için aşağıdaki HTML öğeleri kullanılır:



  • “ ” elementi HTML'de tablo oluşturmak için kullanılır.
  • “ ” elementi tabloya resim yazısı eklemek için kullanılır.
  • “
', genellikle başlıkları içeren tablo başlığını belirtmek için kullanılır.
  • “
    • ” ekleme satırı için kullanılır.
  • “
    • ” tablonun gövde kısmını belirtir.

    Oluşturulan tablo şu anda şöyle görünür:



    Bu tablonun nasıl şekillendirileceğini görmek için ilerleyelim.



    2. Adım: “body” Elemanını Stillendirin

    gövde {
    yazı tipi ailesi: Verdana, Geneva, Tahoma, sans-serif;
    arka fon- renk : rgb ( 233 , 233 , 233 ) ;
    }

    öğesi, aşağıdaki CSS stil özellikleriyle uygulanır:

    • “ font ailesi ' değeri olan özellik ' Verdana, Geneva, Tahoma, sans-serif ” tarayıcı tarafından desteklenen yazı tipini uygulamak için kullanılır. Tarayıcı ilk yazı stilini desteklemiyorsa diğeri kullanılacaktır.
    • “ arka plan rengi ” özelliği, öğenin arka plan rengini ayarlar.

    3. Adım: 'Altyazı' Öğesini Stillendirin

    altyazı {
    yazı tipi- boy : 25 piksel;
    metin- hizalamak : merkez;
    arka fon- renk : #1C6758;
    renk : Mısır püskülü;
    }

    ” başlık içeriğini belirtin.
  • “
    • öğesinin stili şu şekildedir:

    • “ yazı Boyutu Yazı boyutunu ayarlamak için ” özelliğinden yararlanılır.
    • “ Metin hizalama ” özelliği, öğenin metninin hizalamasını belirtir.
    • “ renk ” özelliği, öğenin yazı tipi rengini ifade eder.

    İşte yukarıda sağlanan kodun çıktısı:

    Adım 4: Tabloya Kenarlık Ekleyin
    “ sınır ” özelliği, öğenin etrafına bir kenarlık eklemek için kullanılır. Kenarlık genişliğini, kenarlık stilini ve kenarlık rengini belirten bir kestirme özelliktir.

    Tabloya dolgu ve kenar boşluğu ile birlikte kenarlığı uygulayalım:

    tablo, inci, td {
    sınır : 2 piksel katı #1C6758;
    dolgu: 1 piksel 6 piksel;
    kenar boşluğu: otomatik;
    }

    Buraya:

    • “ sınır ” özelliği, kenarlık genişliğini, kenarlık stilini ve kenarlık rengini belirterek tablonun etrafındaki kenarlığı ayarlar.
    • “ dolgu malzemesi ”, öğenin içeriğinin etrafındaki boşluğu belirtir, burada ilk değer üst-alttaki boşluğu tanımlar ve ikinci değer içeriğin sağ-sol taraflarına boşluk ekler.
    • “ marj ' değeri olan özellik ' Oto ” öğesinin etrafına eşit boşluk ekler.

    Çıktı

    Not : Tablo kenarlıkları arasında boşluk istemiyorsak border-collapse özelliğini kullanın.

    Adım 5: Tablodan Sınır Aralığını Daraltın
    Tablo kenarlıkları arasındaki boşluklar “” kullanılarak kaldırılabilir. sınır çöküşü 'collapse' değerine sahip özellik:

    sınır daraltma: daraltma;

    Adım 6: Tablo Boyutunu Ayarlayın
    Tablo boyutunun nasıl ayarlanacağına bakalım:

    inci {
    Genişlik : 160 piksel;
    }

    eklenen “ Genişlik

    elemanlı ” özelliği, tablo boyutunu buna göre otomatik olarak ayarlayacaktır::

    Stilleri belirli tablo hücresine de uygulayabiliriz. Onları tartışalım!

    Adım 7: Stile Özgü Tablo Hücreleri
    Belirli tablo hücresine stil vermek için, söz konusu hücrenin sınıf adını belirtin. Örneğin, aşağıdaki kod, ikinci satırın üçüncü hücresine “ sınıf adı atandığını gösterir. vurgulamak ”:

    < td sınıf = 'vurgulamak' > 99 < / td >

    Şimdi, CSS dosyasındaki sınıf adını kullanarak hücreye erişin:

    .vurgulamak {
    arka fon- renk : #0f90d5;
    }

    “ .vurgulamak ”,

    		öğesinin sınıf vurgusunu ifade eder. Bu eleman “ ile uygulanır. arka plan rengi ” özelliği, arka plandaki rengi belirtmek için.

    Gördüğümüz gibi, belirtilen tablo hücresi başarıyla biçimlendirildi:

    8. Adım: Yazı Tipi Ailesini ve Tablonun Boyutunu Ayarlayın

    masa {
    yazı tipi ailesi: el yazısı;
    yazı tipi- boy : 18 piksel;
    metin- hizalamak : merkez;
    }

    Tablo öğesine aşağıdaki CSS özellikleri uygulanır:

    • “ font ailesi ” özelliği, öğenin yazı tipi stilini ayarlar.
    • “ yazı Boyutu ” özelliği, öğenin yazı tipini ayarlamak için kullanılır.
    • “ Metin hizalama ” özelliği, metin hizalamasını ayarlamak için kullanılır.

    İşte çıktı:

    Adım 9: Sıradaki Renk Satırları
    Stillerin belirli satırlara veya sütunlara uygulanmasına da izin verilir. Örneğin, çift sıralar aşağıdaki format izlenerek stillendirilir:

    \
    tbody tr:nth-child ( hatta ) {
    arka fon- renk : #FFB200;
    }

    Buraya:

    • “ :nth-child(çift) ” sözde seçici, stilin uygulanacağı modeli belirten bir bağımsız değişkeni almak için kullanılır.
    • “ arka plan rengi ” özelliği, öğenin arka plan rengini ayarlamak için kullanılır.

    Arka plan renginin çift satırlara başarıyla uygulandığı gözlemlenebilir:

    Bu tamamen CSS ile tabloları tasarlamakla ilgiliydi.

    Çözüm

    Tablolar, verileri düzenli tutmak için önemli bir araçtır. Tablo, HTML

    , ve daha fazla öğe kullanılarak oluşturulabilir. Tabloyu stilize etmek için kenarlık, arka plan rengi özelliği, yazı tipi ailesi özelliği ve daha pek çok CSS özelliği kullanılır. Daha iyi anlaşılması için bu yazı, bir tabloyu CSS ile biçimlendirmek için adım adım bir prosedürü açıkladı.

    Diğer

    Kategori

    Popüler Mesajlar

    LangChain'de Hem Aracıya hem de Araçlarına Bellek Nasıl Eklenir?

    Windows 10 Uykudan Kendi Başına Uyanma Sorunu Nasıl Çözülür?

    Linux cif Dağı

    Thevenin Teoremi: DC Devre Analizi İçin Adım Adım Kılavuz

    AWS'de Çapraz Doğrulama nedir?

    Kubernetes'te Deny Service Dış IP'lerini Yapılandırma

    Arduino bir Mikrodenetleyici midir?

    C++ Tuple

    iPhone'da Uygulamalar Nasıl Engellenir

    “rowspan” Özniteliği Nedir ve HTML'de “td” Öğesiyle Nasıl Kullanılır?

    CSS'de Tıklamada Düğme Rengi Nasıl Değiştirilir

    Program Dosyaları Klasörü ile Program Dosyaları (x86) Klasörleri Arasındaki Fark Nedir?

    Bir HTML Dosyasında JavaScript Nereye Yerleştirilir?

    Elasticsearch Toplama nedir?

    Debian 12'de Flatpak Nasıl Kurulur ve Kullanılır

    Windows 10/11'de YouTube Nasıl İndirilir ve Kurulur?

    Amazon Corretto 11'i Windows'a İndirme ve Kurma Konusunda Kapsamlı Bir Kılavuz

    Ansible'da GitHub Eylemleri

    ToCharArray İşlevini Kullanarak Dizeyi Arduino'da Karakter Dizisine Dönüştürme

    JavaScript'te Sınıf Adı Nasıl Alınır

    ,