Таблицы, несомненно, являются наиболее важным объектом при создании веб-страниц, поскольку обычно веб-страницы используют таблицы для макета и организации различных элементов. Это напрямую определяет, красива ли веб-страница и понятна ли организация контента. Однако многие друзья часто пренебрегают изучением таблиц и сосредотачиваются на других слоях, картинках, спецэффектах и т. д. На самом деле, разумное использование таблиц может легко украсить вашу страницу. Мы также часто слышим, как друзья жалуются, что страница, созданная таблицами, однообразна. , грубость, отсутствие разнообразия, и я часто слышу, как люди спрашивают, как сделать рамку таблицы в 1 пиксель. Фактически, в Dreamweaver мы можем очень удобно усовершенствовать вашу таблицу, тем самым сделав вашу веб-страницу более красивой и изысканной. Мы расскажем, как усовершенствовать вашу таблицу в Dreamweaver, в следующих трех аспектах.
1. Используйте панель свойств.
Рисунок 1. Сначала нам нужно разобраться с параметрами на двух панелях свойств таблицы: CellPad и CellSpace. Как показано на рисунке 1, CellPad означает расстояние между двумя ячейками в таблице, а CellSpace — расстояние между каждой ячейкой и содержимым в середине. Изменив эти два параметра и сопоставив цвет фона, вы можете легко создать рамку таблицы толщиной в 1 пиксель.
1. Используйте панель «Объект», чтобы вставить таблицу и определить ширину, высоту, строки и столбцы таблицы. Обратите внимание, что значения по умолчанию CellPad, CellSpace и Border таблицы, вставленной в Dreamweaver, в настоящее время равны 0. Как показано на рисунке 2;
Рисунок 2
2. Определите границу таблицы на панели свойств как 0, CellPad как 5 (при этом между содержимым ячейки и краем ячейки сохранится 5 пикселей) (при этом между ячейками останется 5 пикселей); ) 1 интервал между элементами). Как показано на рисунке 3;
Рисунок 3
3. Установите цвет фона таблицы #999999, как показано на рисунке 4;
4. Установите цвет фона ячейки #FFFFFF, как показано на рисунке 5;
Рисунок 5
5. Предварительный просмотр эффекта в браузере. Мы видим, что таблица имеет границу в пикселях, как показано на рисунке 6.
Рис. 62.
Использование вложенности таблиц.
Тем не менее, основной принцип выше: мы можем добиться большего эффекта, используя вложенность таблиц.
1. Сначала рисуем таблицу и задаем значения и цвета CellPad и CellSpace этой таблицы, обратившись к предыдущему примеру. Конкретный эффект показан на рисунке 7;
Рисунок 7 2. Затем нарисуйте еще одну таблицу с одной строкой и одним столбцом, установите CellPad=2, CellSpace=1. Конкретные параметры показаны на рисунке 8;
Рисунок 8
3. Переместите таблицу, созданную на первом шаге, в таблицу на втором шаге. Теперь таблица выглядит так, как показано на рисунке 9;
На рисунке 9 мы видим, что эта таблица имеет двухстрочную внешнюю рамку и однострочную внутреннюю рамку.
4. Измените таблицу на втором этапе, сделав одну строку и два столбца, и поместите таблицу на первом этапе в каждую ячейку. Окончательная таблица будет выглядеть, как показано на рисунке 10.
Переопределите
рисунок 10
, отдельно определите стиль .tdstyle, конкретные параметры показаны на рисунке 13;
Обратите внимание, что здесь мы определяем ширину верхней и нижней границы равной 1 пикселю, а ширину левой и правой границы — 0.
4. Итоговый эффект таблицы показан на рисунке 14;
(Изображение 15)
На этот раз стол представляет собой трехмерный эффект.
6. Таблица выше не выглядит идеальной. Справа и внизу всей таблицы нет границ. Мы можем определить другой стиль style.table1, определить четыре стороны этого стиля равными 1 пикселю и прикрепить его
