Terdapat berbilang sifat CSS untuk menggayakan elemen HTML. ' paparan ” property adalah salah satu daripadanya, yang digunakan untuk menetapkan elemen yang diuruskan sebagai elemen sebaris atau elemen blok. Tambahan pula, reka letak yang digunakan untuk anak-anaknya, seperti aliran, lentur atau grid. Selain itu, sifat ini memperuntukkan jenis dalaman dan luaran untuk memaparkan elemen.
Catatan ini akan menerangkan:
Bagaimana untuk Menggunakan 'display: table-cell' dalam CSS?
Untuk menggunakan ' paparan ” harta dengan nilai “ sel meja ”, cuba arahan yang diberikan.
Langkah 1: Buat Bekas div Bersarang
Mula-mula, buat bekas div utama dengan bantuan ' Untuk mengakses div utama, gunakan ' #meja-kandungan ”, di mana “ # ' ialah pemilih yang digunakan untuk mengakses ' yang ditentukan ID ” atribut bekas div. Kemudian, gunakan sifat berikut: Langkah 3: Gayakan Bekas 'tr-div'. Sekarang, gayakan “ tr-div ” bekas seperti berikut: Pengeluaran ' paparan: sel meja ” Sifat CSS digunakan untuk menetapkan paparan kepada data yang menjadikan elemen berkelakuan seperti jadual. Jadi, pengguna boleh mencipta pendua jadual dalam HTML tanpa menggunakan elemen jadual dan elemen lain, Termasuk td dan tr. Lebih khusus lagi, hartanya mentakrifkan data dalam bentuk jadual. Untuk menggunakan ' paparan: sel meja ” Sifat CSS, buat bekas div bersarang dan masukkan kelas dalam setiap bekas dengan nama tertentu. Kemudian, akses bekas div dalam CSS dan gunakan sifat 'display: table-cell', di mana ' paparan sifat ” digunakan untuk menetapkan data dalam sel jadual. Siaran ini menunjukkan kaedah untuk menggunakan sifat CSS display:table-cell.
< div ID = 'kandungan jadual' >
< div kelas = 'tr-div' >
< div kelas = 'td-div' > Harry div >
< div kelas = 'td-div' > Html / CSS div >
div >
< div kelas = 'tr-div' >
< div kelas = 'td-div' > Edward div >
< div kelas = 'td-div' > Docker div >
div >
< div kelas = 'tr-div' >
< div kelas = 'td-div' > Jack div >
< div kelas = 'td-div' > Git div >
div >
div >
Dapat diperhatikan bahawa data telah berjaya ditambahkan:
Langkah 2: Gayakan Bekas 'kandungan jadual'.
paparan: meja;
padding: 7px;
}
di sini:
paparan: table-row;
warna latar belakang: rgb ( 164 , 241 , 215 ) ;
padding: 7px;
}
Menurut blok kod di atas, ' paparan ' nilai harta ditetapkan sebagai ' baris meja ' yang bermaksud data ditetapkan dalam bentuk baris dalam jadual, ' warna latar belakang ' sifat digunakan untuk menentukan warna di bahagian belakang elemen, dan akhir sekali, ' padding ” digunakan:
Langkah 4: Gunakan Harta “display: table-cell” pada Bekas “td-div”
paparan: sel meja;
lebar: 150px;
sempadan: #0f4bf0 pepejal 1px;
jidar: 5px;
padding: 7px;
}
Akses div ketiga dengan bantuan “ .td-div ” dot selective dan id masing-masing, dan gunakan sifat CSS yang diberikan di bawah:
Mengapa Gunakan 'display: table-cell' dalam CSS?
Kesimpulan