mata teras:

CSS adalah kuat, dapat menyelesaikan pelbagai masalah susun atur dan serasi dengan semua pelayar moden. Ia membolehkan unsur -unsur HTML berfungsi seperti elemen jadual, memberikan penyelesaian yang sama kepada masalah susun atur dan penjajaran kompleks.
• CSS table Ciri-ciri boleh digunakan untuk membuat kotak kontur, susun atur gaya lama yang mudah, dan susun atur penyesuaian dengan orkestrasi kandungan. Ia amat berguna dalam reka bentuk responsif, yang membolehkan unsur -unsur untuk mengubah saiz dan kedudukan mengikut saiz skrin pengguna.
• Walaupun atribut CSS table mempunyai banyak kelebihan, ia juga mempunyai beberapa batasan. Ia mempunyai fleksibiliti yang kurang dalam mewujudkan susun atur kompleks berbanding dengan sifat paparan lain dan tidak berfungsi dengan baik dengan sifat CSS tertentu seperti
dan
• . Walau bagaimanapun, dalam banyak kes, kelebihan menggunakan atribut table melebihi kelemahannya. float position table

yang sering diabaikan dapat mencari penyelesaian yang lebih mudah. Ciri -ciri CSS ini disokong secara meluas oleh semua pelayar yang berkaitan (perhatikan bahawa ini tidak termasuk IE6 dan IE7) dan dengan anggun dapat menyelesaikan beberapa kesukaran susun atur utama dan kecil.

div boleh menjadikannya table berkelakuan seperti elemen meja atau meja.

tunggu, gunakan jadual untuk susun atur? Bukankah ini baik? display Salah satu topik reka bentuk web paling hangat pada awal abad ke -21 adalah perdebatan mengenai penggunaan kod jadual HTML sebagai alat susun atur. Itulah hack, dan ia masih menjadi amalan yang buruk.

Dalam contoh berikut, klik butang di bahagian atas dan anda boleh menukar atribut

ke display: table-cell:

[Codepen Sample Link - Gantikan dengan pautan codepen sebenar] display block anda dapat melihat bagaimana div disusun secara mendatar tanpa sebarang sifat table-cell, dan anda juga boleh mengakses beberapa peraturan jadual biasa (seperti

Jika anda memerlukan beberapa jarak, ambil perhatian bahawa atribut CSS klasik tidak mempunyai kesan pada sel jadual: Sebaliknya, gunakan margin (ia mesti digunakan untuk elemen jadual kontena). Jika anda ingin menggunakan peraturan ini, anda boleh mencari beberapa baris komen di Codepen. border-spacing

sangat berharga. table

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}

<div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div>

#wrapper, header {
    display: block; /* 我們實際上不需要此規(guī)則，因為它默認為此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}