使用CSS的水平表格布局

Question

而不是通常的垂直表数据布局,如下所示:

alt text http://img62.imageshack.us/img62/2545/verticaltables.jpg

我想在css中这样显示它:

alt text http://img100.imageshack.us/img100/4144/horizo​​ntaltable.jpg

有任何想法吗？

我的php/html代码:

<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

你可以这样做,它仍然是语义的:

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

Answer 2

来自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

表必须是表，因此您可以通过这种方式在语义上描述它。
表由包含表数据的表行组成。仅使用 CSS 将表数据更改为表行只会使您的语义变得毫无价值。表格行就是表格行，因此您应该重组 HTML，而不是使用 CSS 重新排列任何内容。

如果您想实现所描述的水平布局，我建议使用 div-Containers 而不是表格。

请记住：表格用于显示表格数据。它们并不是真正要用作布局的基础。