Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Design a Table using Div

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 272
    Comment on it

    Tables are the most powerful way to align elements in a proper/tabular way on a webpage. The concepts of table are very clear to designer, so it will be easier to create layout using table.


    But tables have many problem like a layout through table is displayed when whole table is loaded, while div display every div element loaded.
    The document size of table is larger so it take more loading time.

    It will be much easier to change the layout of whole page with single CSS which is having div.
    Div based layout is having another advantage, It reduces the cost if we are paying per megabyte for hosting, because it use less bandwidth.

     

    Below is the example of designing a table using div tag:-

    HTML-

    <body>
    	<div class="Table">
        <div class="headline">
            <p>This is a Table</p>
        </div>
        <div class="Heading">
            <div class="block">
                <p>First Name</p>
            </div>
            <div class="block">
                <p>Last Name</p>
            </div>
            <div class="block">
                <p>Address</p>
            </div>
        </div>
        <div class="Row">
            <div class="block">
                <p>Megha</p>
            </div>
            <div class="block">
                <p>Kohli</p>
            </div>
            <div class="block">
                <p>Nehrugram</p>
            </div>
        </div>
        <div class="Row">
            <div class="block">
                <p>Shilpi</p>
            </div>
            <div class="block">
                <p>Badoni</p>
            </div>
            <div class="block">
                <p>Amritvihar</p>
            </div>
        </div>
    </div>
    </body>

     

    CSS-

    .Table
        {
            display: table;
        }
        p
        {
            color: #800000;
        }
        .headline
        {
            display: table-caption;
            text-align: center;
            font-weight: bold;
            font-size: larger;
        }
        .Heading
        {
            display: table-row;
            font-weight: bold;
            text-align: center;
        }
        .Row
        {
            display: table-row;
        }
        .block
        {
            display: table-cell;
            border: solid;
            border-width: thin;
            padding-left: 5px;
            padding-right: 5px;
        }

     

    The output of the above code will be like this:-

 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: