Question

为了优化我的内容，我已经读过表格不是很好的做法，因此我试图将表格转换为div。然而，我正在努力将其转换为div。如何将下表转换为div？

.match-table {

    height: 38px;
    
}

.match-table tr {

      margin-bottom: 10px;
      padding-top: 10px;
        border-bottom:1px solid  #e5e5e5;
}



.match-icon {
    width: 38px;
    height: 38px;

}

.match-time {
    width:8%;
    height: 38px;
    text-align: right;
}

.match-home {
    text-align: right;

    width: 32%;
}
.match-score{
    text-align: center;

    width: 20%;
}
.match-away{
    text-align: left;

    width: 32%;
}

<table class="match-table" cellspacing="0" cellpadding="0">
<tbody>
<tr class="margin-tr">
<td class="match-icon">PBL</td>
<td class="match-home">Gambit</td>
<td class="match-score">2-3</td>
<td class="match-away">TSM</td>
<td class="match-time">22:00</td>
</tr>
<tr class="margin-tr">
<td class="match-icon">PBL</td>
<td class="match-home">Gambit</td>
<td class="match-score">2-3</td>
<td class="match-away">TSM</td>
<td class="match-time">22:00</td>
</tr>
</tbody>
</table>

Answer 1

对于表中最佳表示的数据，<table>就可以了。您的示例似乎就是这种情况，因此我建议您只需将其保留为表格格式，除非布局或设计组件确实表明需要更复杂的基于div的布局。

通常，在使用（不适当地）布局时，使用表格是不可取的做法。为了显示表格数据，它们很好。

Answer 2

我同意B计划，Terry和Yesthe Cia，但是为了防止其他人有同样的疑问，并希望将非数据表格布局转换为div布局，这里是如何做到的。< / p>

＆＃13;

.clear {
    clear: both;
}
.match-table {
    height: 38px;
    padding: 0 10%;
}
.match-table > div {
    margin-bottom: 10px;
    padding-top: 10px;
    border-bottom:1px solid #e5e5e5;
}
.match-table .match {
    float: left;
}
.match-icon {
    width: 38px;
    height: 38px;
}
.match-time {
    width:8%;
    height: 38px;
    text-align: right;
}
.match-home {
    text-align: right;
    width: 32%;
}
.match-score {
    text-align: center;
    width: 20%;
}
.match-away {
    text-align: left;
    width: 32%;
}

＆＃13;

<div class="match-table">
    <div class="margin-tr">
        <div class="match match-icon">PBL</div>
        <div class="match match-home">Gambit</div>
        <div class="match match-score">2-3</div>
        <div class="match match-away">TSM</div>
        <div class="match match-time">22:00</div>
    </div>
    <div class="clear"></div>
    <div class="margin-tr">
        <div class="match match-icon">PBL</div>
        <div class="match match-home">Gambit</div>
        <div class="match match-score">2-3</div>
        <div class="match match-away">TSM</div>
        <div class="match match-time">22:00</div>
    </div>
</div>

＆＃13;

Answer 3

表格仍然是完美或表格数据。对于您在上面尝试表示的内容，不使用表格是没有意义的。那是什么表。它们并没有被弃用，现在仍在广泛使用。

不要听那些告诉你他们在现代网页设计中没有位置的人 - 只是不要使用它们或更广泛的网站布局;）

表转换为div

3 个答案: