Metode 1: Menggunakan Atribut 'lebar' HTML
“ lebar ” adalah atribut dasar yang disediakan oleh HTML. Ini mengatur lebar atau panjang horizontal elemen HTML. Untuk memperbaiki data tabel, atribut lebar digunakan pada langkah-langkah di bawah ini.
Langkah 1: Buat Tabel Langkah 2: Tambahkan Properti CSS ke Elemen 'tabel'. Langkah 3: Menetapkan Properti ke Elemen 'td'. Langkah 4: Menetapkan Properti ke Elemen 'th'. Keluaran ditampilkan sebagai: Snapshot di atas menunjukkan bahwa semua lebar kolom ditetapkan masing-masing sebesar 30%. Properti nth-child() dari CSS digunakan untuk membuat tabel dengan lebar tetap. Properti ini mendapatkan nomor kolom dan memilih “ Output dari blok kode di atas adalah: Keluaran ini menampilkan bahwa nomor kolom 1 dan 3 ditetapkan dengan lebar 10%. Di dalam ' meja ” di bagian CSS tambahkan “ tata letak tabel: tetap ” untuk menyetel 'lebar' elemen tabel data: Di file HTML, tambahkan ' Setelah mengeksekusi cuplikan kode di atas, hasilnya adalah: Begitulah cara pengguna dapat memperbaiki lebar elemen Untuk memperbaiki lebar data tabel, gunakan tombol “ lebar ” atribut, “ anak ke-n() 'pemisah, dan'
Dalam file HTML, gunakan “ ' Dan ' ” tag dan tulis data di dalamnya:
< tengah >
< meja >
< tr >
< th > Nama < / th >
< th > Status < / th >
< th > Kamar No < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Murid < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Murid < / td >
< td > 06 < / td >
< / tr >
< / meja >
< / tengah >
Gunakan pemilih elemen tabel di CSS dan tambahkan ' berbatasan ” dari 1px solid red, “ perataan teks ” menyelaraskan teks ke tengah, dan “ lebar ” yang menyetel lebar keseluruhan tabel menjadi 80%:
meja {
berbatasan : 1px merah pekat;
teks- meluruskan : tengah;
lebar : 80 %; }
Menggunakan ' td pemilih elemen ” dan atur “ perbatasan-bawah ” dari 5px solid red, “ lapisan ” dari 20px untuk membuat item lebih menonjol, dan “ lebar ” ditetapkan sebagai 30%:
td {
border-bottom: 5px merah solid;
padding:20px;
lebar : 30 %;
}
Menggunakan ' th ” pemilih elemen untuk mengubah warna “ perbatasan-bawah ” dari merah ke hijau laut untuk menciptakan visualisasi yang lebih baik:
th {
border-bottom: 5px solid seagreen;
padding:20px;
lebar : 30 %;
}
Metode 2: Menggunakan Pemilih 'nth-child ( )'.
' Dan ' ” tag. Misalnya, lebarnya adalah “ tetap ” hanya untuk nomor kolom “ 1 ' Dan ' 3 ”. Masing-masing kolom ini mendapatkan lebar 10%. Artikel ini telah berhasil mendemonstrasikan cara memperbaiki lebar tabel data. td: anak ke-n ( 3 ) {
lebar : 10 %;
}
th:n-anak ( 1 ) {
lebar : 10 %;
}
Metode 3: Menggunakan Tag
tata letak tabel: diperbaiki;
lebar : 80 %;
berbatasan : 1px merah pekat;
teks- meluruskan : tengah;
}
< kol gaya = 'lebar: 15%;' / >
< kol gaya = 'lebar: 30%;' / >
data tabel.
Kesimpulan
data tabel.