Yöntem 1: HTML 'genişlik' Özelliğini Kullanma
“ Genişlik ”, HTML tarafından sağlanan temel bir özelliktir. HTML öğesinin genişliğini veya yatay uzunluğunu ayarlar. Tablo verilerini düzeltmek için, aşağıdaki adımlarda genişlik özelliği kullanılır.
1. Adım: Bir Tablo Oluşturun 2. Adım: CSS Özelliklerini 'tablo' Öğesine ekleyin 3. Adım: “td” Elemanına Özellikler Atama Adım 4: “th” Elemanına Özellikler Atama Çıktı şu şekilde görüntülenir: Yukarıdaki anlık görüntü, tüm sütun genişliklerinin her birinin %30'da sabitlendiğini göstermektedir. CSS'nin nth-child() özelliği, sabit genişlikli bir tablo oluşturmak için kullanılır. Bu özellik sütun numarasını alır ve “ Yukarıdaki kod bloğunun çıktısı şu şekildedir: Bu çıktı, 1 ve 3 numaralı sütunların %10 genişliğe sabitlendiğini gösterir. İçinde ' masa CSS bölümündeki 'bölümüne' ekleyin tablo düzeni: sabit veri tablosu öğelerinin 'genişliğini' ayarlamak için ' özelliği: HTML dosyasına “ Yukarıdaki kod parçacığını çalıştırdıktan sonra çıktı şu şekildedir: Kullanıcı, tablo verileri Tablo verilerinin genişliğini sabitlemek için “ Genişlik ' bağlanmak, ' n. çocuk( ) ” ayırıcı ve “
HTML dosyasında bir “ ' Ve ' ” etiketleri ve içine veri yazın:
< merkez >
< masa >
< tr >
< inci > İsim < / inci >
< inci > Durum < / inci >
< inci > Oda numarası < / inci >
< / tr >
< tr >
< td > fakhar < / td >
< td > Öğrenci < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Ömer < / td >
< td > Öğrenci < / td >
< td > 06 < / td >
< / tr >
< / masa >
< / merkez >
CSS'de tablo öğesi seçiciyi kullanın ve ' sınır ” 1 piksel katı kırmızı, “ Metin hizalama ” metni ortaya hizalar ve “ Genişlik ”, tablonun toplam genişliğini %80 olarak ayarlar:
masa {
sınır : 1 piksel sabit kırmızı;
metin- hizalamak : merkez;
Genişlik : 80 %; }
Kullan ' td ” öğe seçici ve ayarlar “ sınır-alt ” 5 piksel katı kırmızı, “ dolgu malzemesi Öğeyi daha belirgin hale getirmek için ” veya 20px ve “ Genişlik ” %30 olarak ayarlar:
td {
alt kenarlık: 5 piksel sürekli kırmızı;
dolgu: 20 piksel;
Genişlik : 30 %;
}
Kullan ' inci “ öğesinin rengini değiştirmek için öğe seçici sınır-alt ” daha iyi bir görselleştirme oluşturmak için kırmızıdan deniz yeşiline:
inci {
alt kenarlık: 5 piksel katı deniz yeşili;
dolgu: 20 piksel;
Genişlik : 30 %;
}
Yöntem 2: “nth-child( )” Seçiciyi Kullanma
' Ve ' ” etiketleri. Örneğin, genişlik “ sabit 'sadece sütun numaraları için' 1 ' Ve ' 3 ”. Bu sütunların her biri %10'luk bir genişliğe sahip oluyor. Bu makale, veri tablosu genişliğinin nasıl düzeltileceğini başarıyla göstermiştir. td:nth-child ( 3 ) {
Genişlik : 10 %;
}
th:nth-çocuk ( 1 ) {
Genişlik : 10 %;
}
Yöntem 3:
tablo düzeni: sabit;
Genişlik : 80 %;
sınır : 1 piksel sabit kırmızı;
metin- hizalamak : merkez;
}
< sütun stil = 'genişlik: %15;' / >
< sütun stil = 'genişlik: %30;' / >
öğelerinin genişliğini bu şekilde düzeltebilir.
Çözüm
öğelerinin genişliğinin nasıl düzeltileceğini göstermiştir.