Question

How to create table layout in HTML only by using by passing both width & height parameters as percentages, not pixels so that it works as the same in all the browsers ?Also pls suggest some good material or link where I can find the format for required attributes & their values used to accomplish this task.Early replies are appreciated.

Answer 1

Check this http://jsfiddle.net/nalaka526/hUFh4/6/

CSS

.divTable
{
    width: 50%;
    height: 50%;
    display: table;
}

.divTableRow
{
    width: 100%;
    height: 100%;
    display: table-row;
}

.divTableCell
{
    width: 25%;
    height: 100%;
    display: table-cell;
}

HTML

<div class="divTable">
        <div class="divTableRow">
            <div class="divTableCell">
                H1
            </div>
            <div class="divTableCell ">
                H2
            </div>
            <div class="divTableCell ">
                H3
            </div>
            <div class="divTableCell ">
                H4
            </div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">
                a
            </div>
            <div class="divTableCell ">
                b
            </div>
            <div class="divTableCell ">
                c
            </div>
            <div class="divTableCell ">
                d
            </div>
        </div>
</div>