CSS horizontal table layout

Question

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

I would 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 must be a table, so you describe it semantically in this way.
A table consists of table rows that contain table data. Changing the tabular data in the rows of the table using CSS will just make your semantics useless. Table rows are for table rows, so you should rather rebuild your HTML instead of redoing something with CSS.

, , div-Containers .

: . .

Answer 2

, :

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

Answer 3

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 4

, . , , OP, , . . , . , ,

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

, :

<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 save two arrays, one for the headers and one for the cells of the body. When you finish getting all your strings and the arrays are full, then generate your HTML.