无桌面网页设计
Tableless web design
我知道 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"?谢谢
你可以使用 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%;
}
}
我知道 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"?谢谢
你可以使用 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%;
}
}