CODEWITHSUNDEEP
htmlcss
98107b
98107b

Reputation: 1

using div like table

how can i make layout without using table but only div?

Upvotes: 0

Views: 1765

Answers (4)

Jeffrey Nicholson Carré
Jeffrey Nicholson Carré

Reputation: 3040

The therme you are looking for is Tableless layout or css grid

if you google it you will find many implementations but here is one :

HTML

<div id="table">
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
</div>

CSS

#table {
    width: 470px;
    border-top: 4px solid #e3e7e7;
    }

#table p {
    clear: both;
    width: 100%;
    margin: 0;
    }

#table span {
    float: left;
    padding: 0 10px;
    border-left: 1px solid #e3e7e7;
    border-bottom: 1px solid #e3e7e7;
    }

#table span.col1 {
    width: 110px;
    }

#table span.col2 {
    width: 186px;
    }

#table span.col3 {
    width: 110px;
    border-right: 1px solid #e3e7e7;
    }

Result

enter image description here

Upvotes: 0

Noxious Reptile
Noxious Reptile

Reputation: 863

You can use bootstrap to make it possible.You can also get a really awesome looking page with it.apply bootstrap classes to the div elements.search about bootstrap.it s simple and nowadays all webdevelopers use it in company.The benefit is you can get really awesome looking page with simple code in any way u need.It s simple just add bootstrap files to your project and use the css classes it provides.you can create tables as u wish with div.

Upvotes: 0

RealWorldCoder
RealWorldCoder

Reputation: 1021

Use the css dispay property for this:

`table`               Let the element behave like a <table> element 
`table-caption`       Let the element behave like a <caption> element
`table-column-group`  Let the element behave like a <colgroup> element  
`table-header-group`  Let the element behave like a <thead> element 
`table-footer-group`  Let the element behave like a <tfoot> element 
`table-row-group`     Let the element behave like a <tbody> element 
`table-cell`          Let the element behave like a <td> element    
`table-column`        Let the element behave like a <col> element   
`table-row`           Let the element behave like a <tr> element

Source: http://www.w3schools.com/cssref/pr_class_display.asp

Upvotes: 1

aval
aval

Reputation: 57

You can use a div and the corresponding css to generate a table layout. For example

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

In the css, it would be something like

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

Upvotes: 1

Related Questions