Alternative to tables?

HTML & CSS
1

We have so many tables that we use in this site (http://giantmango.com/events-2), but it is generating problems with wrapping in the blog entries.

Is there a better solution for tabular formatting in css/html?

2

It’s better not to use tables unless you have tabular data (that needs to be laid out in rows and columns).

It depends on the content, but the first port of call is usually divs… or in some cases other elements like Lists, Paragraphs etc depending on the content.

Could you be more specific about what your requirements are?

3

Hi,
Looking at your page I see no reason for the table in the left column. That’s just a menu which can be a list of links in a UL.

You have the h3 heading (History) and the sub categories could be an h3. To keep it formatted as your table does it with the sub categories to the right you could just nest the h3 in the first LI and float it right.

Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dli">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.4 arial,helvetica,sans-serif;
}
h2,h3 {
    margin:.25em 0;
    font-size:1.3em;
    line-height:1.4;
}
h3 {
    margin:0;
    font-size:.9em;
    line-height:1.4;
}
#left {
    width:15em;
    padding:.5em;
    overflow:hidden;
    background:#CDF;
}
#left ul {
    width:100%;
    float:left;
    margin:.5em 0 0;
    padding:0;
    list-style:none;
    background:#FFF;
}
#left li {
    width:35%;
}
#left li:first-child {
    float:right;
    width:64%;
    background:#EEF;
}
</style>

</head>
<body>

<div id="left">
    <h2>History</h2>
    <ul>
        <li><h3>COLORS</h3></li>
        <li><a href="#">2009</a></li>
        <li><a href="#">2008</a></li>
    </ul>
    <ul>
        <li><h3>CHIPS</h3></li>
        <li><a href="#">2010</a></li>
        <li><a href="#">2009</a></li>
    </ul>
    <ul>
        <li><h3>ILLUSTRATORS</h3></li>
        <li><a href="#">2010</a></li>
    </ul>
    <ul>
        <li><h3>METRO ART</h3></li>
        <li><a href="#">vol.11</a></li>
        <li><a href="#">vol.10</a></li>
        <li><a href="#">vol.09</a></li>
        <li><a href="#">vol.08</a></li>
        <li><a href="#">vol.07</a></li>
        <li><a href="#">vol.06</a></li>
        <li><a href="#">vol.05</a></li>
        <li><a href="#">vol.04</a></li>
        <li><a href="#">vol.03</a></li>
        <li><a href="#">vol.02</a></li>
        <li><a href="#">vol.01</a></li>
    </ul>
</div>

</body>
</html>