Question

I currently have a table:

<table id="blockcontainer">
    <tr>
        <td class="topleftgrey"></td>
        <td class="topcentergrey">
            <span class="sharemedium">FAQ</span> <span class="headingmedium">Categories</span>
        </td>
        <td class="toprightgrey"></td>
    </tr>
    <tr>
        <td class="middleleft"></td>
        <td class="middlecenter">
            some content goes here
        </td>
        <td class="middleright"></td>
    </tr>
    <tr>
        <td class="bottomleft"></td>
        <td class="bottomcenter"></td>
        <td class="bottomright"></td>
    </tr>
</table>

With CSS:

#blockcontainer {width:100%;}
#blockcontainer .topleft{background:url(../../Content/Images/top-left.png) no-   repeat;width:8px;height:52px;}
#blockcontainer .topcenter{background:url(../../Content/Images/top-center.png) repeat-x;height:52px;color:#fff;padding-left:5px;font-size: large;text-align: left;}
#blockcontainer .topright{background:url(../../Content/Images/top-right.png) no-repeat;width:8px;height:52px;}
#blockcontainer .topleftgrey{background:url(../../Content/Images/top-leftgrey.png) no-repeat;width:8px;height:52px;text-align: left;}
#blockcontainer .topcentergrey{background:url(../../Content/Images/top-centergrey.png) repeat-x;height:52px;padding-left:5px;font-size:large;text-align: left;}
#blockcontainer .toprightgrey{background:url(../../Content/Images/top-rightgrey.png) no-repeat;width:8px;height:52px;text-align: left;}
#blockcontainer .middleleft{background:url(../../Content/Images/middle-left.png) repeat-y;width:8px;}
#blockcontainer .middlecenter{background-color:#fff;padding:5px;}
#blockcontainer .middleright{background:url(../../Content/Images/middle-right.png) repeat-y;width:8px;}
#blockcontainer .bottomleft{background:url(../../Content/Images/bottom-left.png) no-repeat;width:8px;height:8px;}
#blockcontainer .bottomcenter{background:url(../../Content/Images/bottom-center.png) repeat-x;height:8px;}
#blockcontainer .bottomright{background:url(../../Content/Images/bottom-right.png) no-repeat;width:8px;height:8px;}

That looks like this:

The problem I am having is that there are multiple tables like this on one page (this table acts as my content containers), and due to the way that tables load in a browser, the page loads terribly slow.

I know converting this to a div will make the world of difference, but I am unable to convert this table structure to an equivalent div stricture.

Sorry for posting a “do it for me” question, but multiple attempts at this has already left a piece of my keyboard on my wall. 🙂

Here is the jsfiddle example

Answer 1

Aniket beat me to it, however I believe mine is a more accurate CSS rendition of your current image and table-based code:

http://jsfiddle.net/purmou/YyHKf/

It uses CSS3 box-shadow (along with the browser prefixed versions for compatibility) and gradient backgrounds (which doesn’t work in Opera only, but that’s an easy addition).

HTML:

<div class="container" id="container1">
    <div class="header" id="header1">
        FAQ Categories
    </div>
    <div class="content" id="content1">
        <div>content
            <div class="right">5
            </div>
        </div>
    </div>
</div>

CSS:

.container {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background: #fff;
    width:100%;
}

.header {
    padding:5px;
    background:#eeeeee;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee');
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background: -moz-linear-gradient(top,  #fff,  #eee);
  height:40px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom:1px #888 solid;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px#888;
    box-shadow: 0 1px 3px #888;
}

.content {
    padding:0 5px 10px 5px;
    margin-top:3px;
    background-color:#ffffff;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}

.content div {
    padding:5px 5px 5px 5px;
    border-bottom:1px #ccc solid;
}

.content .right {
    float:right;
    border:none;
}