Каждый HTML-верстальщик ежедневно сталкивается в своей работе с таблицами. Хочется делать их аккуратно, правильно, чтобы HTML-код был отделен от CSS. При объявлении таблицы мы в теге table часто указываем cellspacing и cellpadding, обозначая расстояние между ячейками и отступы в них. Это портит верстку, делает ее громоздкой и труднообслуживаемой. Поэтому возникает вопрос, а можно ли в HTML указать только тег table, перенеся все остальное в CSS?
Вот так выглядит код, о котором идет речь, без применения CSS:
<table cellspacing="0px" cellpadding="10px">
<tr>
<td></td>
<td></td>
</tr>
</table>
Мы хотим сделать такой, убрав всё ненужное из HTML:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Абсолютно всё оформление таблицы должно лежать на плечах CSS, избавляя HTML-верстку от замусоривающих атрибутов. Аналог cellspacing и cellpadding легко сделать, применив к table и td следующие стили в CSS:
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
padding: 10px;
}
Привожу в качестве иллюстрации работающий пример:
Видно, что с помощью нехитрых правил CSS мы здорово повысили качество кода, а главное, если понадобится в будущем поменять отступы в таблице, не нужно будет лезть в HTML (представьте, если вы наплодили множество таблиц в разных местах ...), а можно будет просто поменять стиль в CSS, как это и должно быть.