Home/ Questions/Q 7061045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:25:34+00:00

I’m making a website for a designer friend, he can design stuff quite well

  • 0

I’m making a website for a designer friend, he can design stuff quite well but has no idea how to code a website. And he’s too cheap for a professional. :p

He wants a summary that looks like this:

Summary

And that has to be centered in the page container (which is fixed at 800px wide).

I think the best/most efficient way to do this would be a table with indented cells, like this:

<html>
<head>
    <style type="text/css">
        body    {background:#141318}
        td      {min-width:266px;padding-top:10px;font-style:italic}
        th      {font-size:14pt;font-family:sans-serif;text-align:left;color:#FFF}
        td div  {text-indent:20px;color:#999FAD}
        td div a{color:#FFF}
    </style>
</head>
<body>
    <table>
        <tr>
            <th>DESIGN</th>
            <th>MEDIA</th>
            <th>ART</th>
        </tr>
        <tr>
            <td><div>- 123</div><div>- <a href="#">456</a></div></td>
            <td><div>- 789</div><div>- <a href="#">012</a></div></td>
            <td><div>- <a href="#">345</a></div><div>- 678</div></td>
        </tr>
    </table>
</body>
</html>

But I’m not too sure, seeing as a lot of people see a table that’s being used for anything that isn’t tabular data as bad practice.

So, what would be the best way to make this? Perhaps three DIVs next to each other, with fixed widths and a load of divs inside of them? (The page container is fixed already)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, try not to use tables for this. A combination of div and lists will work perfectly.

    <html>
<head>
    <style type="text/css">
        #example {width:800px;}
        #a {float: left; width: 250px;}
        #b {float: left; width: 250px;}
        #c {float: left; width: 250px;}
    </style>
</head>
<body>
    <div id="example">
    <div id="a">
        <h1>parent</h1>
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
    </div>
    <div id="b">
        <h1>parent</h1>
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
     </div>
    <div id="c">
        <h1>parent</h1>
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
    </div>
</div>
</body>
</html>

    Styling the lists will be easy in CSS.

    Here is a some good information – http://www.alistapart.com/articles/taminglists/

    • 0