| Как красиво оформить таблицу |
|
| Добавил(а) microsin | |||||||||||||||||||||||||||||
|
В статье описывается, как оформить таблицу с красивыми тонкими черными линиями. Основная идея - фон всей таблицы делается черным, толщина рамок выставляется равной нулю, и фон строк таблицы делается белым. Итак, процесс по шагам (на примере работы в Macromedia Dreamweaver 8): 1. Рисуем каркас таблицы. Предположим, что нам нужно сделать таблицу с 2 столбцами и 4 строками. Идем в меню Insert\Table, выбираем Rows: 4 и Columns: 2, Border thickness (толщину рамки): 0, Cell padding: 3, Cell spacing: 1. Жмем ОК.
2. Немножко по поводу ширины таблицы. Она бывает двух разновидностей - в пикселах и в процентах. По умолчанию Dreamweaver делает таблицу в пикселах, шириной в 200 пикселов. Смотрим полученный html-код (переключиться к коду меню View\Code или просто Ctrl+`), теги body и html я опускаю: < table width="200" border="0" cellspacing="1" cellpadding="3"> < tr> < th scope="col"> < /th> < th scope="col"> < /th> < /tr> < tr> < td> < /td> < td> < /td> < /tr> < tr> < td> < /td> < td> < /td> < /tr> < tr> < td> < /td> < td> < /td> < /tr> < /table> Без сомнений, ширину таблицы задает атрибут width="200" тега table. Width в пикселах задает таблицу фиксированного размера. Это удобно для веб-страниц с фиксированным дизайном - у такой таблицы размеры не будут меняться в зависимости от размера рабочего поля браузера (если таблица не влезет, то в браузере появится горизонтальная полоса прокрутки). Иногда удобно задавать ширину таблицы в процентах от ширины рабочего поля окна браузера. В этом случае при изменении размеров окна браузера будет также меняться размер таблицы. Предположим, что мы захотели изменить тип ширины, на процентный, и установить её на 80% относительно окна браузера. Это удобно делать в режиме дизайна страницы (меню View\Design или просто Ctrl+`), и стандартном режиме редактирования таблиц (View\Table Mode\Standard Mode, кроме того, кнопка F6 циклически меняет режим). Щелкаем мышкой сверху таблицы, тем самым мы её выбираем целиком. В нижней части окна Dreamweaver появится область свойств таблицы Properties, где можно выбрать тип ширины таблицы W в пикселах или %, а также её величину. Ставим эту величину на 80% (см. скриншот).
Теперь в коде тег table будет таким: < table width="80%" border="0" cellspacing="1" cellpadding="3"> .. 3. Делаем фон всей таблицы черным (см. скриншот).
Теперь в код тега table будет таким (добавился атрибут цвета фона < table width="80%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000"> .. 4. Теперь наша задача сделать фон строк белым. Для этого выделяем не саму таблицу, а её строки. Для этого подводим курсор мыши к левой границе верхней левой ячейки таблицы, чтобы появилась черная стрелка, направленная вправо, потом удерживаем левую кнопку мыши и опускаем курсор вниз, пока не выделятся все строки. У нашего выделения появится свои свойства, где можно изменить цвет фона на белый (см. скриншот).
Полный код полученной таблицы: < table width="80%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000"> < tr bgcolor="#FFFFFF"> < th scope="col">< strong>Заголовок 1 < /strong>< /th> < th scope="col">< strong>Заголовок 2 < /strong>< /th> < /tr> < tr bgcolor="#FFFFFF"> < td>текст 1 < /td> < td> текст 4 < /td> < /tr> < tr bgcolor="#FFFFFF"> < td>текст 2 < /td> < td>текст 5 < /td> < /tr> < tr bgcolor="#FFFFFF"> < td>текст 3 < /td> < td>текст 6 < /td> < /tr> < /table> Здесь тег tr задает строки таблицы, и цвет фона у них задан белым (< tr bgcolor="#FFFFFF">). Столбцы заданы тегами th (для заголовка) и td (для простой строки). Можно обойтись одним тегом td, тогда все ячейки будут иметь одинаковый формат. Внешний вид таблицы будет таким:
Осталось заметить, что можно задать width у столбцов (внутри тега td), опять-таки либо в пикселах, либо в процентах. Величина в процентах будет взята от ширины таблицы. [Влияние тегов div align и p align на внешний вид таблицы] < div align="center">текст < /div> Внутри столбца ячейки таблицы этот тег приводит к тому, что "текст" располагается посередине между верхней и нижней линией бордюрчика таблицы БЕЗ ПРОПУСКА свободного места (таблица получается маленькой по высоте). Если этим тегом div обрамить таблицу целиком, то она располагается с выравниванием по центру по горизонтали на странице. < p align="center">текст< /p> Внутри столбца ячейки таблицы этот тег приводит к тому, что "текст" располагается посередине между верхней и нижней линией бордюрчика таблицы. При этом сверху над текстом и снизу под текстом образуются пропуски свободного места (таблица получается большой по высоте). [Таблица с разделением строк горизонтальными линиями] Атрибут rules позволяет задавать наличие линий в таблице. В этом примере значение атрибута "rows" задает в таблице разделение строк горизонтальными линиями. Пример: < table rules="rows"> < tbody> < tr> < td nowrap="nowrap">< strong>/etc/profile < td width="5">RHL,< br /> FBSD< /td> < td>Системные настройки окружения.< /td> < /tr> < tr> < td nowrap="nowrap">< strong>/dev/MAKEDEV< /strong>< /td> < td width="5">RHL< /td> < td>Скрипт создает файлы локальных устройств или ссылки на них.< /td> < /tr> < tr> < td nowrap="nowrap">< strong>/etc/aliases< /strong>< /td> < td width="5">RHL,< br /> FBSD< /td> < td>Псевдонимы имен пользователей.< /td> < /tr> < /tbody> < /table> Выглядит это так:
Атрибут rules поддерживается браузерами Internet Explorer 9+, Firefox, Opera, Chrome и Safari (IE 8 и более старые версии этот тег не поддерживает). Safari (и иногда Chrome) могут некорректно отображать таблицу с атрибутом rules: добавляются внешние линии в дополнение к внутренним. Атрибут rules не поддерживается в HTML5, вместо него используйте CSS. Поэтому из практических соображений лучше не указывать атрибут rules, и использовать для оформления таблиц CSS. Другие возможные значения атрибута rules показаны в таблице.
[Ссылки] 1. HTML < table > Tag site:w3schools.com. |
