Ada beberapa properti CSS untuk menata elemen HTML. “ menampilkan Properti ” adalah salah satunya, yang digunakan untuk mengatur elemen yang dikelola sebagai elemen inline atau elemen blok. Selanjutnya, tata letak yang digunakan untuk turunannya, seperti flow, flex, atau grid. Selain itu, properti ini mengalokasikan tipe dalam dan luar untuk menampilkan suatu elemen.
Posting ini akan menjelaskan:
Bagaimana Cara Menggunakan 'display: table-cell' di CSS?
Untuk menggunakan “ menampilkan ” properti dengan nilai “ tabel-sel ”, coba instruksi yang diberikan.
Langkah 1: Buat Wadah div Bersarang
Pertama, buat wadah div utama dengan bantuan “ Untuk mengakses div utama, gunakan tombol “ #konten-tabel ', Di mana ' # ” adalah pemilih yang digunakan untuk mengakses “ pengenal ” dari wadah div. Kemudian, terapkan properti berikut: Langkah 3: Style “tr-div” Container Sekarang, gaya ' tr-div ” wadah sebagai berikut: Keluaran “ tampilan: tabel-sel ” Properti CSS digunakan untuk mengatur tampilan ke data yang membuat elemen berperilaku seperti tabel. Jadi, pengguna dapat membuat duplikat tabel di HTML tanpa menggunakan elemen tabel dan elemen lainnya, termasuk td dan tr. Lebih khusus lagi, propertinya mendefinisikan data dalam bentuk tabel. Untuk menggunakan “ tampilan: tabel-sel ” properti CSS, buat wadah div bersarang dan sisipkan kelas di setiap wadah dengan nama tertentu. Kemudian, akses wadah div di CSS, dan terapkan properti 'display: table-cell', di mana ' menampilkan ” properti digunakan untuk mengatur data dalam sel tabel. Posting ini menunjukkan metode untuk menggunakan properti CSS display:table-cell.
< div pengenal = 'konten tabel' >
< div kelas = 'tr-div' >
< div kelas = 'td-div' > Herry div >
< div kelas = 'td-div' > Html / CSS div >
div >
< div kelas = 'tr-div' >
< div kelas = 'td-div' > Edward div >
< div kelas = 'td-div' > Buruh pelabuhan div >
div >
< div kelas = 'tr-div' >
< div kelas = 'td-div' > Mendongkrak div >
< div kelas = 'td-div' > Git div >
div >
div >
Dapat diperhatikan bahwa data telah berhasil ditambahkan:
Langkah 2: Style “table-content” Container
tampilan: tabel;
padding: 7px;
}
Di Sini:
tampilan: baris-tabel;
warna latar belakang: rgb ( 164 , 241 , 215 ) ;
padding: 7px;
}
Menurut blok kode di atas, “ menampilkan ” nilai properti ditetapkan sebagai “ tabel-baris ” yang artinya data diset dalam bentuk baris-baris dalam sebuah tabel,” warna latar belakang ” properti digunakan untuk menentukan warna di bagian belakang elemen, dan terakhir, “ lapisan ” diterapkan:
Langkah 4: Terapkan Properti 'display: table-cell' pada Kontainer 'td-div'.
tampilan: tabel-sel;
lebar: 150px;
berbatasan: #0f4bf0 padat 1px;
margin: 5px;
padding: 7px;
}
Akses div ketiga dengan bantuan “ .td-div ” dot selektif dan id masing-masing, dan terapkan properti CSS yang diberikan di bawah ini:
Mengapa Menggunakan 'display: table-cell' di CSS?
Kesimpulan