Question

我有这种表：

<table>
    <tr><td>Count A</td><td>12</td></tr>
    <tr><td>Count B</td><td>8</td></tr>
</table>

我是CSS的新手但是从我到目前为止所读到的内容我假设html应该是：

<div id="counts-container">
     <div class="count">
         <div class="count-label">Count A</div><div class="count-number">12</div>
     </div>
     <div class="count">
         <div class="count-label">Count B</div><div class="count-number">8</div>
     </div>
</div>

在我看来，我在正确的轨道上但我不确定如何为这个html结构编写CSS。任何建议我都很感激。

好的，所以我只想和你们确认一下。该表应为：

<table>
    <tr><th>Count A</th><td>12</td></tr>
    <tr><th>Count B</th><td>8</td><tr>
</table>

Answer 1

如果这是表格数据而不是继续使用table。那个HTML元素应该用于什么。

div用于页面布局，table用于显示表格数据。

http://webdesign.about.com/od/tables/a/aa122605.htm

Answer 2

在你的情况下使用<table>是好的 - 只需正确构造它：

<table>
    <tr><th>Count A</th><td>12</td></tr>
    <tr><th>Count B</th><td>8</td></tr>
</table>

<th>是表格标题单元格。

如果您对何时使用表格感到困惑，何时不建议您参考规范http://www.w3.org/TR/html4/struct/tables.html

Answer 3

您可能应该使用<table>标记。那些说自己很糟糕的网站真的意味着“因格式化而滥用它们而不是使用填充和边距是不好的”。

但如果您已开始使用<div>，请尝试以下操作：

#counts-container {display: table;}
.count {display: table-row;}
.count-label, .count-number {display: table-cell;}

Answer 4

count-container成为你的桌子，伯爵成为你的行， count-label和count-number成为你的列，所以你必须写这样的CSS

#counts-container,
.count 
{
width:400px;
float:left;
}

.count-label
{
   width:150px;
   float:left;
}

.count-number
{
   width:250px;
   float:left;
}

{＃}用于id和。对于班级

如何设置这种类似于表格的结构

4 个答案: