Question

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

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

我想在css中显示它：

alt text http://img100.imageshack.us/img100/4144/horizontaltable.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而不是表格。

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

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>

因此，解决方案是保留两个数组，一个用于标头，一个用于体细胞。当您完成所有行并且数组已满后，请生成HTML。

使用CSS的水平表格布局

4 个答案: