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

You can do this and it'll still be semantic:

<table>
  <tr>
    <th>Header</th>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
</table>

Answer 2

Example from w3schools :

 table { width: 100% } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } 

 <h2>Horizontal Headings:</h2> <table> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h2>Vertical Headings:</h2> <table> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> 

Answer 3

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.

Answer 4

This is really old but what the hey. I think I get what OP is asking for, but I can't see what his images are. What it really comes down to is he has a series of rows with header data and body data. When he gets a row he gets one header cell content and one body cell content. If he were to just put that into a table as he got it, it would show up like this

<table>
  <tr>
    <th>header 1</th>
    <td>body 1</td>
  </tr>
  <tr>
    <th>header 2</th>
    <td>body 2</td>
  </tr>
</table>

Which is fine but what he really wants is this:

<table>

  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>body 1</td>
    <td>body 2</td>
  </tr>
</table>

So the solution is to keep two arrays, one for headers, and one for body cells. When you're done getting all your rows and your arrays are full, then generate your HTML.