5

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

alt text

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

alt text

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>
4
  • 1
    What is your question? What about your HTML code doesn't work?
    – Pekka
    Apr 29, 2010 at 10:51
  • What do you mean by "in CSS", are you planning to change this table to divs?
    – Kyle
    Apr 29, 2010 at 10:53
  • You have to use a table with CSS, or you want to use div's and CSS? BTW you have an extra </div> in your code there.
    – Greg K
    Apr 29, 2010 at 10:55
  • @Pekka, my HTML code works, but i'd like the table data to be in the horizontal format, rather than the usual vertical one. @Kyle, if changing table to div would give me a horizontal table layout, then yes. @Greg, there's actually another div before that, the code which i haven't posted.
    – input
    Apr 29, 2010 at 11:10

4 Answers 4

11

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>
0
9

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>

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.

4
  • @Ham, thanks for your comment. i am using tables to display tabular data and i have seen websites displaying tabular data with a horizontal "table" layout than a vertical one. therefore, wondering if i could do the same.
    – input
    Apr 29, 2010 at 11:14
  • So why don't you just restructure your table? Instead of putting multiple <td> s into a <tr> just write several <tr>s containing one <td> each. That will give you what you need, won't it?
    – Ham Vocke
    Apr 29, 2010 at 11:26
  • 1
    thanks for the pointer, i found what i was looking for: icant.co.uk/csstablegallery/index.php?css=60#r60
    – input
    Apr 29, 2010 at 13:02
  • @input i know the link is very old, can place working link?
    – meekash55
    Mar 8 at 12:58
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.