Вёрстка сайтов с помощью таблиц

1. Вёрсткасайтов с помощью таблиц

2. Особенности таблиц • Вложенные таблицыОдну таблицу допускается помещать внутрь ячейки другой таблицы. • Размеры таблицыРазмеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек. В итоге суммарная ширина таблицы складывается из следующих параметров: • ширина содержимого ячеек; • толщина всех границ между ячеек; • поля вокруг содержимого, устанавливаемые через атрибут cellpadding; • расстояние между ячейками, которое определяется значением cellspacing.

3. Особенности таблиц Способы фиксации таблицы • Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки • Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку.

4. Особенности таблиц Результат данного примера зависит от браузера. В старых браузерах рисунок за пределами ячейки обрезается (рис. а), в современных браузерах рисунок выводится поверх второй ячейки (рис. б).

5. Особенности таблиц а. Вид таблицы в IE6, IE7, Firefox 2

6. Особенности таблиц б. Вид таблицы в IE8, IE9, Firefox 3, Firefox 4, Safari и Chrome

7. Особенности таблиц Сделать единообразный вид таблицы во всех браузерах легко, для этого к ячейке с рисунком следует добавить свойство overflow со значением hidden. При этом всё, что не помещается в ячейку, будет «обрезано», как продемонстрировано на рис. а. Стиль в этом случае изменится незначительно. TABLE{ table-layout: fixed; /* Ячейки фиксированной ширины */} TD.dino{ width: 200px; overflow: hidden;}

8. Особенности таблиц • Высота ячеекЯчейки в одной строке взаимосвязаны и их высота одинакова. Это позволяет делать макеты с колонками одной высоты.

9. Особенности таблиц Макет, созданный с использованием таблицы

10. Особенности таблиц • Порядок ячеек • Загрузка таблицыПока таблица не загрузится полностью, её содержимое не начнёт отображаться.

11. Таблицы и стили • Цвет фона ячеек Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent, т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH, то этот цвет будет установлен в качестве фона ячейки.

12. Таблицы и стили • Поля внутри ячеек Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега <table>. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD. Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега <table>игнорируется.

13. Таблицы и стили • Расстояние между ячейками Для изменения расстояния между ячейками применяется атрибут cellspacing тега <table>. В качестве замены cellspacing выступает стилевое свойство border-spacing, оно устанавливает расстояние между границами ячеек. Свойствоborder-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse. При добавлении к селектору TABLE свойства border-collapse со значением collapse, атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

14. Таблицы и стили • Границы и рамки По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега <table>. • Использование атрибута cellspacing Известно, что атрибут cellspacing тега <table> задаёт расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах.

15. Таблицы и стили • Применение свойства border Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные — border-left, border-right, border-top и border-bottom, эти свойства соответственно определяют границу слева, справа, сверху и снизу. Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек

16. Таблицы и стили Добавление двойной рамки … <style type="text/css"> TABLE { background: #dc0; /* Цвет фона таблицы */ border: 5px double #000; /* Рамка вокруг таблицы */ } TD, TH{ padding: 5px; /* Поля вокруг текста */ border: 1px solid #fff; /* Рамка вокруг ячеек */ } </style> … <table> <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> …

17. Таблицы и стили

18. Таблицы и стили Создание одинарной рамки … <style type="text/css"> TABLE{ border-collapse: collapse; /* Убираем двойные границы между ячейками */ background: #dc0; /* Цвет фона таблицы */ border: 4px solid #000; /* Рамка вокруг таблицы */ } TD, TH { padding: 5px; /* Поля вокруг текста */ border: 2px solid green; /* Рамка вокруг ячеек */ } </style> …

19. Таблицы и стили

20. Таблицы и стили • Выравнивание содержимого ячеекЧтобы изменить способ выравнивания по вертикали применяется стилевое свойство text-align, а по горизонтали vertical-align

21. Таблицы и стили • Пустые ячейки Для управления видом пустых ячеек используется свойство empty-cells, при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях: • нет вообще никаких символов; • в ячейке содержится только перевод строки, символ табуляции или пробел; • значение visibility установлено как hidden.

22. Таблицы и стили • … • <style type="text/css">TABLE{ border: 4px double #399; /* Граница вокруг таблицы */ }TD{ background: #fc0; /* Цвет фона */ border: 1px solid #333; /* Граница вокруг ячеек */ empty-cells: hide; /* Прячем пустые ячейки */ padding: 5px; /* Поля в ячейках */ } </style> • … • <table width="100%"><tr><td>Леонардо</td><td>5</td><td>8</td></tr><tr><td>Рафаэль</td><td></td><td>11</td></tr><tr><td>Микеланджело</td><td>24</td><td></td></tr> • <tr><td>Донателло</td><td>&nbsp;</td><td>13</td></tr></table> • …

23. Разница между таблицами и слоями

24. Разница между таблицами и слоями Колонки одинаковой высоты <styletype="text/css"> .content, .menu { padding: 10px;} .container { background: #9c3022; /* Цвет фона правой колонки */ } .content { margin-right: 120px; background: #f0f0f0; /* Цвет фона левой колонки */ } .menu { width: 100px; /* Ширина правой колонки*/ color: #fff; /* Цвет текста */ float: right; /* Колонка справа */ } </style> … <div class="container"> <div class="menu">Борщ</div> <divclass="content"> Мясо отварить до готовности. Промыть свеклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности. </div> </div>

25. Разрезание и склейка изображений Плюсы разрезания изображений • Создание ссылок • Эффект перекатывания • Уменьшение объема файлов • Анимированный GIF • Особенности вёрстки • Психологический аспект

26. Разрезание и склейка изображений Исходное изображение Вид изображения при открытии раздела

27. Разрезание и склейка изображений Добавляем в изображение направляющие Разрезанное на фрагменты изображение

28. Конец Спасибо за внимание!