Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use DIV tags as TABLE layout ?

    • 0
    • 4
    • 3
    • 1
    • 0
    • 0
    • 0
    • 0
    • 477
    Comment on it

    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:-

    This is a Table Caption

    heading-m 1

    heading-m 2

    heading-m 3

    row-m 1 column 1

    row-m 1 column 2

    row-m 1 column 3

    row-m 2 column 1

    row-m 2 column 2

    row-m 2 column 3

    row-m 3 column 1

    row-m 3 column 2

    row-m 3 column 3

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: