Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontal table layout using CSS

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>
like image 366
input Avatar asked Apr 29 '10 10:04

input


People also ask

How do I make a table horizontal in CSS?

To make the horizontal bordered table, we will add the “pure-table-horizontal” class. Pure CSS Table with Horizontal Borders Class: pure-table-horizontal: This class is used to create the horizontal bordered table. This class is used with a pure-table class.

How do you horizontally align a table in HTML?

It is possible to change the horizontal alignment of items within table cells. Table data defaults to left alignment; table headers to center. In order to change the alignment in one cell, insert the appropriate "ALIGN=" attribute within the code for that cell.

How do I center a table horizontally in a div?

Use the margin Property to Center a div Horizontally in CSS We can use the auto option for the left and the right margin to horizontally center a div . The top and bottom margin can be set to 0 . The auto option will place the element in the center and divide equally divide the left and right margin.

How do I make a table longer in CSS?

To make table width bigger you can apply some CSS for StackTrace column. If you need to display it in one line - use white-space: nowrap; If you need only some specific width for it - use min-width: #px or just width: #px; To align all elements to top of cell use vertical-align: top .


2 Answers

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>
like image 125
ivanasetiawan Avatar answered Nov 15 '22 08:11

ivanasetiawan


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>
like image 41
Victor Avatar answered Nov 15 '22 10:11

Victor