Веб-дизайн без таблиц

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 /> 

Теперь, как я могу избавиться от таблиц, таких как они пока еще сохраняют тот же табличный «вид»? Благодарю.

Answer 1

вы можете попробовать это с помощью DL DT дд

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