Hi Folks,

This article is about, how to use DIV tags as table layout using CSS. Sometime we all face some problem with table layout in creating responsive design. Here I am using the class name same as table layout and I hope it will be more clear to you.

To convert div to table layout main thing is display property.

See the below example -

CSS:-

.table
{
    display: table;
    border-collapse: collapse;
    margin: 0 auto;
}
.title
{
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}
.heading
{
    display: table-row;
    font-weight: bold;
    text-align: center;
}
.row
{
    display: table-row;
}
.cell
{
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
}

HTML:-

<div class="table">
    <div class="title">
        <p>This is a Table Caption</p>
    </div>
    <div class="heading">
        <div class="cell">
            <p>heading 1</p>
        </div>
        <div class="cell">
            <p>heading 2</p>
        </div>
        <div class="cell">
            <p>heading 3</p>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <p>row 1 column 1</p>
        </div>
        <div class="cell">
            <p>row 1 column 2</p>
        </div>
        <div class="cell">
            <p>row 1 column 3</p>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <p>row 2 column 1</p>
        </div>
        <div class="cell">
            <p>row 2 column 2</p>
        </div>
        <div class="cell">
            <p>row 2 column 3</p>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <p>row 3 column 1</p>
        </div>
        <div class="cell">
            <p>row 3 column 2</p>
        </div>
        <div class="cell">
            <p>row 3 column 3</p>
        </div>
    </div>
</div>

Output:-