table
Краткое описание атрибутов для тега
<table></table>:
border - определяет стили границы таблицы.
cellpadding - определяет растояние между ячейки и содержимым ячейки.
cellspacing - определяет растояние между соседними ячейками.
width - устанавливает ширину таблицы. Ширину можно указывать как статическую, в пикселях
(пример:100px), так и относительную - в процентах (пример: 30%). По умолчание ширина
таблицы устанавливается по ширине содержимого.
height - устанавливает высоту таблицы. Рекомендуется не указывать явно высоту
таблицы если она является каркасом сайта (табличная верстка)
background - позволяет указать цвет заливки или фоновый рисунок таблицы.
Ограничения элемента <table>:
Для создания таблиц установлена жесткая структура расположения тегов:
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Описание атрибутов:
1. атрибуты border, cellpadding и cellspacing
Из всех вышеуказанных атрибутов хотелось бы остановится именно на border, cellpadding и cellspacing.
Изначально эти два атрибута использовались для создания визульных эффектов границ, в нынешнее время таких
эффектов (и даже лучше, намного лучше) можно добится с помощью каскадных таблиц стилей (
css). Поэтому использование этих
атрибутов с недавнего времени стало мягко говоря не актуальным. Чтоб "результаты действия" этих атрибутов не было
видно в основном используется следующая структура:
<table cellpadding="0" cellspacing="0" border="0" >
...
</table>
А теперь представьте себе, что будет если используется табличная верстка.
Для справки, в табличной верстке количество таблиц на одной странице может доходить до 100.
И вот в каждой таблице нам придется прописывать вышеуказанный код, чтоб не было видно гриниц таблицы,
а это - дополнительный, а главное, не нужный вес страницы.
Из-за чего наш сайт будет перегружен ненужным текстом.
С помощью css мы можем легко сделать так, чтоб не пришлось прописывать вот
это - "cellpadding="0" cellspacing="0" border="0" для каждой таблицы.
table, td {border-collapse:collapse;}
table, td {border:0;}
Эта не сложная, но очень полезная css-конструкция, которая сэкономит для нас драгоценные килобайты в верстке,
а также сделает наш код более чистым и читабельным.
Добавить комментарий
