Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания сайтов

Автор: Джонатан Снук
Перевод: Всеволод Козлов

Наша цель: преобразить невзрачную таблицу в конфетку, используя исключительно средства CSS.

Что мы получим в итоге:

В полной версии статьи я привожу полные фрагменты HTML и CSS-кодов, благодаря которым был получен продемонстрированный выше результат!

1. Таблица ДО преобразований

1.1. Фрагмент HTML-кода таблицы ДО преобразований

<h1>The Very Best Eggnog</h1>
<table>
<col id="ingredients">
<col id="serve12">
<col id="serve24">
<thead>
<tr><th>Ingredients</th><th>serves 12</th><th>serves 24</th></tr>
</thead>
<tfoot>
<tr><td colspan="3"><ol>
<li>Combine milk and spices including vanilla bean in a heavy saucepan and let them infuse over lowest possible heat for 5 minutes. Meanwhile, combine yolks and sugar in a large bowl and whisk until mixed.</li>
<li>Bring milk to a boil and gradually whisk it into the yolk mixture. Return the mixture to the saucepan. Cook over medium heat, stirring steadily with a wooden spoon, for 2 to 3 minutes, or until foam subsides and mixture thickens to consistency of heavy cream. (Mixture should thickly coat the back of a wooden spoon.) Do not boil, or mixture will curdle.</li>
<li>Strain mixture into a large bowl and let cool to room temperature. Stir in rum, brandy, half-and-half, vanilla and nutmeg.</li>
<li>Refrigerate eggnog for at least 2 hours, preferably overnight. Just before serving, dust top of eggnog with additional nutmeg.</li>
</ol></td></tr>
</tfoot>
<tbody>
<tr><td>milk</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>cinnamon sticks</td><td>2</td><td>1</td></tr>
<tr><td>vanilla bean, split</td><td>1</td><td>2</td></tr>
<tr class="odd"><td>cloves</td><td>5</td><td>10</td></tr>
<tr><td>mace</td><td>10 blades</td><td>20 blades</td></tr>
<tr class="odd"><td>egg yolks</td><td>12</td><td>24</td></tr>
<tr><td>cups sugar</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>dark rum</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr><td>brandy</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>vanilla</td><td>1 tbsp</td><td>2 tbsp</td></tr>
<tr><td>half-and-half or light cream</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>Freshly grated nutmeg to taste</td><td></td><td></td></tr>
</tbody>
</table>

1.2. Фрагмент CSS-кода таблицы ДО преобразований

body
{
font: .8em "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
}
ol
{
margin:0;
padding: 0 1.5em;
}

2. Таблица ПОСЛЕ преобразований

2.1. Фрагмент HTML-кода таблицы ПОСЛЕ преобразований

<h1>The Very Best Eggnog</h1>
<table>
<col>
<col id="middle">
<col>
<thead>
<tr><th>Ingredients</th><th>serves 12</th><th>serves 24</th></tr>
</thead>
<tfoot>
<tr><td colspan="3"><ol>
<li>Combine milk and spices including vanilla bean in a heavy saucepan and let them infuse over lowest possible heat for 5 minutes. Meanwhile, combine yolks and sugar in a large bowl and whisk until mixed.</li>
<li>Bring milk to a boil and gradually whisk it into the yolk mixture. Return the mixture to the saucepan. Cook over medium heat, stirring steadily with a wooden spoon, for 2 to 3 minutes, or until foam subsides and mixture thickens to consistency of heavy cream. (Mixture should thickly coat the back of a wooden spoon.) Do not boil, or mixture will curdle.</li>
<li>Strain mixture into a large bowl and let cool to room temperature. Stir in rum, brandy, half-and-half, vanilla and nutmeg.</li>
<li>Refrigerate eggnog for at least 2 hours, preferably overnight. Just before serving, dust top of eggnog with additional nutmeg.</li>
</ol></td></tr>
</tfoot>
<tbody>
<tr><td>milk</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>cinnamon sticks</td><td>2</td><td>1</td></tr>
<tr><td>vanilla bean, split</td><td>1</td><td>2</td></tr>
<tr class="odd"><td>cloves</td><td>5</td><td>10</td></tr>
<tr><td>mace</td><td>10 blades</td><td>20 blades</td></tr>
<tr class="odd"><td>egg yolks</td><td>12</td><td>24</td></tr>
<tr><td>cups sugar</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>dark rum</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr><td>brandy</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>vanilla</td><td>1 tbsp</td><td>2 tbsp</td></tr>
<tr><td>half-and-half or light cream</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>Freshly grated nutmeg to taste</td><td></td><td></td></tr>
</tbody>
</table>

2.2. Фрагмент CSS-кода таблицы ПОСЛЕ преобразований

body
{
font: .8em "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
}
ol
{
margin:0;
padding: 0 1.5em;
}
table
{
color:#FFF;
background:#C00;
border-collapse:collapse;
width:647px;
border:5px solid #900;
}
thead
{
}
thead th
{
padding:1em 1em .5em;
border-bottom:1px dotted #FFF;
font-size:120%;
text-align:left;
}
thead tr
{
}
td
{
padding:.5em 1em;
}
tbody tr.odd td
{
background:transparent url(tr_bg.png) repeat top left;
}
tfoot
{
}
tfoot td
{
padding-bottom:1.5em;
}
tfoot tr
{
}
* html tr.odd td
{
background:#C00;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tr_bg.png', sizingMethod='scale');
}
#middle
{
background-color:#900;
}

Оригинал статьи: Tables with Style

• Как создать логотип?
• Слайд шоу для сайта
• Иконка корзина
• Footer
• Панель навигации для сайта
• Семантика HTML
• Css button
• Css редактор
• Ajax вкладки
• Принципы создания сайта

Понравилась статья? Поделитесь ей в социальных сетях: