CODEWITHSUNDEEP
csshtml
Bashir Magomedov
Bashir Magomedov

Reputation: 2891

How to convert a <table> to <div>s

That might sound silly but can't do it myself :( Need your help guys. How do I active the mark up from bellow but using DIVs (+CSS) instead of TABLE?

    <table>
    <tr>
        <td>
            <img src="logo_left.gif" />
        </td>
        <td align="center">
            <p><strong>THE TITLE!!!</strong></p>
        </td>
        <td>
            <img src="logo_right.gif" />
        </td>
    </tr>
  </table>

Thanks in advance!

As some are asking I'm posting what I've tried so far... CSS

   <style type="text/css">        
      .header 
      {
        border: 1px solid black;
        border-bottom-width: 0px;
        background-image: url("Images/spriterepeatx.png"); 
        background-position: 0 -85px !important; 
        background-repeat: repeat-x; 
        background-color: transparent;
        height: 76px;
        font-family: Arial,Helvetica,sans-serif;
      }
     .LeftLogo a 
     {
        display: inline;
        float:left; 
        height:25px; 
        margin: 25px 0 25px 25px; 
        position:relative; 
        width:227px;
        background: url("Images/left_logo.gif") no-repeat scroll 0 0 transparent;
     }
     .RightLogo
     {
        width:100px;
        height:100px;
        background: url("Images/right_logo.png") no-repeat scroll 0 0 transparent;
     }         
     p.promo {
      font-size: 150% !important;
      line-height: 22px;
      margin-top: 25px;
      text-align: center;
      white-space:nowrap;
    }

</style>

HTML:

<body> <div class='header'>
  <div class="LeftLogo"><a title="My company logo" href="http://www.mycompany.com"></a></div>
  <div><p class="promo"><strong>MYProduct</strong> - Superb product</p></div>
  <div class="RightLogo"></div> </div> </body>

Upvotes: 0

Views: 15111

Answers (5)

Navneeth G
Navneeth G

Reputation: 7305

First of all you start off by giving a display: inline style for your divs, because by default it is a "block", then you can position each of the div's as required.

A "block" div occupies the entire horizontal space, but with "inline" you can specify the space it needs to occupy. No give widths which can in "px" or "percentages" and the limit depends on your creativity.

Your above code in div's would be something like below:

<div class="divcolumn">
    <img src="logo_left.gif" />
</div>

<div class="divcolumn" style="text-align:center">
   <p><strong>The Title!!!</strong></p>
</div>

<div class="divcolumn">
    <img src="logo_right.gif" />
</div>

Now specify style like this:

.divcolumn { 
    display: inline;
}

You can even write a separate style for each column like "divcolumn-right", "divcolumn-center" and "divcolumn-left" and specify different styles. For example getting liquid layout specify width's like "30%", "40%" and "30%" in each of those styles respectively.

Upvotes: 4

Joel Etherton
Joel Etherton

Reputation: 37543

I use css to accomplish this myself. I have general table, row, and cell styles, and then I incorporate specific additional styles for presentation (alternating row colors, selected row boldness, etc). Here is the html for one of my tables (scrubbed):

<div class="table grid">
    <div class="tr gridHeader">
        <div class="tdColumn1">
            <input type="checkbox" id="chkSelectAll" />
        </div>
        <div class="tdColumn2">
            <strong>Header1</strong>
        </div>
        <div class="tdColumn3">
            <strong>Header2</strong>
        </div>
        <div class="tdColumn4">
            <strong>Header3</strong>
        </div>
        <div class="tdColumn5">
            <strong>Header4</strong>
        </div> 
    </div>


    <div class="tr tdWhite">
        <div class="tdColumn1">
            <input type="checkbox" name="checkbox1" />
    </div>

            <div class="tdColumn2">
                    <p>Data1</p>
            </div>

            <div class="tdColumn3">
                    <p>Data2</p>
            </div>

            <div class="tdColumn4">
                    <p>Data3</p>
            </div>

            <div class="tdColumn5">
                    <p>Data4</p>
            </div>
    </div>   

        <div class="tr tdGrey">
            <div class="tdColumn1">
                <input type="checkbox" name="checkbox1" />
            </div>

            <div class="tdColumn2">
                    <p>Data1</p>
            </div>

            <div class="tdColumn3">
                    <p>Data2</p>
            </div>

            <div class="tdColumn4">
                    <p>Data3</p>
            </div>

            <div class="tdColumn5">
                    <p>Data4</p>
            </div>
    </div>   

</div>

And here is the css that governs the layout of these divs. I've omitted most appearance related stuff (fonts, colors, etc). You'd have to make your own adjustments to width, percentages, etc.

div.table
{
    display: table;
}

div.tr
{
    display: table-row;
}

div.tdColumn1, div.tdColumn2, div.tdColumn3, div.tdColumn4, div.tdColumn5
{
    display: table-cell;
    padding: 4px;
}

div.tdColumn1
{
    width: 25px;
}

div.tdColumn2
{
    width: 20%;
}

div.tdColumn1, div.tdColumn2, div.tdColumn4, div.tdColumn5
{
    vertical-align: middle;
}

div.tdColumn1, div.tdColumn5
{
    text-align: center;
}

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 186063

HTML:

<h1>The title</h1>

CSS:

h1 {
    position: relative;
    height: 100px;
    line-height: 100px;
}

h1::before {
    position: absolute; top: 0; left: 0;
    content: url( http://placekitten.com/100/100 );
}

h1::after {
    position: absolute; top: 0; right: 0;
    content: url( http://placekitten.com/120/100 );
}

Live demo: http://jsbin.com/oqiyul/2

Upvotes: 0

dschenk
dschenk

Reputation: 325

There are many ways to achieve this. A starting point could be:

  <div class="float-left">
    <img src="logo_left.gif" />
  </div>
  <div class="float-left">
    <p><strong>THE TITLE!!!</strong></p>
  </div>
  <div class="float-left">
    <img src="logo_right.gif" />
  </div>

And then in your css:

.float-left {
    float:left;
}

This just floats all your elements besides each other. Thats not really beautiful and semantically not correct, but it works.

Upvotes: 0

ChrisBD
ChrisBD

Reputation: 9209

In addition to Navneeth's answer. <tr> is a row and <td> is a column. You can position <div> by declaring a number of styles and then applying them to the <div>.

<div class="somestyle-definition">
</div>

then in style sheet

.somestyle-definition
{
    width:100%;
    border-bottom:solid 2px white;
}

Upvotes: 0

Related Questions