Как закруглить углы у таблицы?

Круглые углы у таблиц служат исключительно для создания определенного внешнего вида и не несут в себе практического значения. Но иногда появляется необходимость придать им более эстетический вид. Как же это сделать?

Вам понадобится

• - редактор веб-страниц;
• - приложение для создания изображений.

Инструкция

Создайте в редакторе веб-страницы блок прямоугольной формы. Запомните точное значение цвета вашей таблицы и фонового цвета той области, в которой она будет находиться.

При создании блока рассчитывайте еще то, что по бокам и углам нужно будет добавить еще дополнительные элементы, поэтому добавьте в блок таблицу из трех строк и трех колонок. Сделайте разметку соответственно размеру будущих уголков.

Заранее заготовьте сделанные в любом имеющемся у вас графическом редакторе закругленные уголки. Они должны быть сделаны в форме квадратов с нарисованными полукругами цвета вашей будущей веб-страницы. Остальная часть квадрата должна быть окрашена в основной фоновый цвет или цвет той области, на которой располагается таблица, т.е., они должны полностью сливаться. Также можете оформить закругленные углы графическими эффектами по своему вкусу.

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

Подгоните размер изображений под размеры боковых ячеек таблицы. Лучше всего не сохранять сразу уменьшенные изображения, а иметь копии более высокого разрешения на всякий случай, если вдруг вам придется проделывать операцию для той же веб-страницы или для использования в дальнейшем в качестве шаблона ,чтобы не пришлось повторять одни и те же действия несколько раз.

«Приклейте» к вашей таблице по бокам прямоугольники и по углам «закругленные» края. Подгоните их по размеру, чтобы все выглядело единой фигурой, и сделайте поля таблицы невидимыми. Лучше всего средний блок таблицы делать самым большим, чтобы не было большого расстояния между содержащимся в ней текстом и краями области.

Оцените статью!