无桌面网页设计

Question

我知道 HTML 表格不好，但我使用它们设计了我的网站。这是一个例子：

<h2><a name="tutorials">Tutorials:</a></h2>
<table cellpadding="8" cellspacing="0">
    <colgroup>
        <col class="lcol"/>
        <col class="rcol"/>
    </colgroup>
    <tr>
        <td><a target="_blank" href="http://www.ldraw.org/Article529.html">Link</a></td>
        <td><b>LDraw to SimCity 3000 Unlimited Tutorial:</b> A tutorial describing how to import LDraw models into <i>SimCity 3000 Unlimited</i>.</td>
    </tr>
    <tr>
        <td><a target="_blank" href="http://www.ldraw.org/Article528.html">Link</a></td>
        <td><b>Polarized Glasses Tutorial:</b> A tutorial describing how to render LDraw models (and other POV-Ray scenes) so that they can be viewed in 3D using <a target="_blank" href="http://www.chromatek.com/">Chromatek</a> polarized glasses.</td>
    </tr>
    <tr>
        <td><a target="_blank" href="http://www.ldraw.org/Article545.html">Link</a></td>
        <td><b>Cleaning LDraw Models for Export:</b> A tutorial describing why it is hard to clean LDraw models for export to other formats and applications.</td>
    </tr>
</table>
<hr />

现在，如何删除这些表格但仍保留相同的表格 "look"？谢谢

Answer 1

你可以使用 dl dt dd

HTML

<h2><a name="tutorials">Tutorials:</a></h2>
<div class="tabular_data">
    <dl> <dt><a target="_blank" href="http://www.ldraw.org/Article529.html">Link</a></dt>
        <dd><b>LDraw to SimCity 3000 Unlimited Tutorial:</b> A tutorial describing how to import LDraw models into <i>SimCity 3000 Unlimited</i>.</dd>
    </dl>
    <dl> <dt><a target="_blank" href="http://www.ldraw.org/Article528.html">Link</a></dt>
        <dd><b>Polarized Glasses Tutorial:</b> A tutorial describing how to render LDraw models (and other POV-Ray scenes) so that they can be viewed in 3D using <a target="_blank" href="http://www.chromatek.com/">Chromatek</a> polarized glasses.</dd>
    </dl>
    <dl> <dt><a target="_blank" href="http://www.ldraw.org/Article545.html">Link</a></dt>
        <dd><b>Cleaning LDraw Models for Export:</b> A tutorial describing why it is hard to clean LDraw models for export to other formats and applications.</dd>
    </dl>
</div>

CSS

.tabular_data{
    padding:5px;
    border-bottom:2px solid gray;
}
.tabular_data dl, .tabular_data dd, .tabular_data dt {
    display:block;
    text-align:left;
    padding:0;
    margin:0;
    vertical-align:top;
    width:100%;
}
.tabular_data dl {
    border-spacing:0;
}
@media only screen and (min-width:768px) {
    .tabular_data dl {
        border-spacing:5px 5px;
        display:table;
    }
    .tabular_data dd, .tabular_data dt {
        display:table-cell;
    }
    .tabular_data dt {
        width:15%;
    }
    .tabular_data dd {
        width:84%;
    }
}

Fiddle Demo

无桌面网页设计

Tableless web design

html

html-table