horizontal table layout using css

Question

instead of the usual vertical table data layout something like this:

i'd like to display it like this in css:

any ideas?

my php/html code:

<div class="center_div">
<table>
<tr>
<th>Author</th>
<th>Quotes</th>
<th>Arabic</th>
<th>Reference</th>
</tr>
    <?php while ($row= mysql_fetch_array($result)) { ?>
        <tr>
            <td width="150"><?php h($row['vAuthor']) ?></td>
            <td><?php h($row['cQuotes']) ?></td>
            <td><?php h($row['cArabic']) ?></td>
            <td><?php h($row['vReference']) ?></td>
        </tr>
    <?php } ?>
</table>
</div></div>

Answer 1

A table has to be a table, therefore you describe it semantically that way.
A table consists of table rows which contain table data. Changing table data to table rows just by using CSS would just make your semantic worthless. Table rows are meant to be table rows so you should rather restructure your HTML instead of re-arranging anything with CSS.

If you want to achieve a horizontal layout as you depicted it, I recommend using div-Containers instead of tables.

Remember: Tables are used to display tabular data. They are not really meant to be used as a foundation for your layout.