使用 CSS 的水平表格布局 [英] Horizontal table layout using CSS

问题描述

而不是通常的垂直表格数据布局是这样的:

我想在 css 中这样显示:

有什么想法吗?

我的 php/html 代码:

<表格><tr><th>作者</th><th>行情</th><th>阿拉伯语</th><th>参考</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 } ?></div></div>

解决方案

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

如果你想实现你描绘的水平布局，我建议使用 div-Containers 而不是表格.

记住:表格用于显示表格数据.它们并不是真的要用作布局的基础.

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

I'd 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>

解决方案

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.

这篇关于使用 CSS 的水平表格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！