การใช้งาน DIV ในการแสดงผลเป็นบล๊อคๆในลักษณะของตาราง

ในการกำหนด div ให้มีลักษณะการแสดงผลในรูปแบบของ rows และ columns มีได้หลายวิธีด้วยกัน วิธีแรกคือเป็นการกำหนดการแสดงผลด้วย float

.block {

    clear: both;

    width: 500px;

}

.block > div {

    float: left;

    width: 33.33%;

}

<div class=block>

    <div>Cell 1</div>

    <div>Cell 2</div>

    <div>Cell 3</div>

    <div>Cell 4</div>

    <div>Cell 5</div>

    <div>Cell 6</div>

</div>

ตัวอย่าง

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

วิธีนี้มีข้อดีที่หากจำนวนคอลัมน์ในแถวสุดท้ายไม่ได้มีครบ 3 คอลัมน์ตามต้องการ แต่ละเซลยังสามารถแสดงผลในขนาดที่ถูกต้องได้ และแต่ละเซลของวิธีนี้ยังสามารถเรียงต่อๆกันไปโดยไม่มีช่องว่าง (ถ้ากำหนดใช้ display:inline-block แทน float:left การขึ้นบรรทัดใหม่ของโค้ดอาจทำให้เกิดช่องว่างระหว่างเซลได้) ในขณะที่ข้อเสียของวิธีนี้คือ จำเป็นต้องกำหนดความสูงของแต่ละเซลให้มีขนาดเท่าๆกันเสมอ มิฉะนั้นเซลแต่ละเซลในแถวถัดไป อาจไม่อยู่ในตำแหน่งที่เหมาะสม

อีกวิธีที่สามารถทำได้คือการกำหนดรูปแบบการแสดงผลในลักษณะของตาราง โดยการใช้คำสั่งของ CSS ในรูปแบบที่ตารางใช้

.table {

    display: table;

}

.tr {

    display: table-row;

}

.td {

    display: table-cell

}

<div class=table>

    <div class=tr>

        <div class=td>Cell 1</div>

        <div class=td>Cell 2</div>

        <div class=td>Cell 3</div>

    </div>

    <div class=tr>

        <div class=td>Cell 4</div>

        <div class=td>Cell 5</div>

        <div class=td>Cell 6</div>

    </div>

</div>