www.webdeveloper.com
Results 1 to 3 of 3

Thread: <div> behaving like table

  1. #1
    Join Date
    Mar 2011
    Posts
    24

    <div> behaving like table

    Hi,

    I am a newbie to html so please bear with me if this is a silly question.
    I am trying to create a table using divs that also spans cells like so:

    table.png

    I cannot use CSS to style these and cannot use a table for this! Can someone advise how I style these manually?

    This is my attempt so far (note) I want an image in the foreground within cell 'one' and an image in the background of cell 'two' and 'three' with font in front of the images in cells 2 and 3:

    <div style="display: table;">
    <div style="display: table-row;">
    <div style="display: table-cell;" class=”td colspan2”><img src="one" width=”141” height=”80”>one</div>

    <div style="display: table-row;">
    <div style="display: table-cell; background-image: url(two); height: 40px; width: 121px;”>two</div>

    </div>

    <div style="display: table-cell; background-image: url(three); height: 40px; width: 121px;”>three</div>
    </div>
    </div>

    Help is greatly appreciated!
    Thanks
    Last edited by glengates; 08-06-2013 at 06:48 PM.

  2. #2
    Join Date
    Mar 2011
    Posts
    24
    Please help someone...

  3. #3
    Join Date
    Mar 2011
    Posts
    1,148
    There are no CSS properties equivalent to 'colspan' or 'rowspan'. The best pure CSS solution would probably be to eliminate the 'table-row's and 'table-cell's and just use floated DIVs. Something like:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    
    * { margin:0; padding:0; }
    #container { width:262px; height:80px; color:#fff; }
    #one { float:left; width:141px; height:80px; background-color:blue; }
    #two { background:green url('img.jpg') no-repeat; }
    #three { background:red url('img.jpg') no-repeat; }
    .smallCell { float:left; width:121px; height:40px;}
    
    </style>
    </head>
    <body>
    <div id="container">
    <div id="one">one</div>
    <div id="two" class="smallCell">two</div>
    <div id="three" class="smallCell">three</div>
    <br style="clear:both; height:0;">
    </div><!-- end #container -->
    <p>Just to show subsequent content.</p>
    </body>
    </html>
    Or you could just use a <table> and be done with it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles