Главная страница / Интернет / Как сделать таблицу с закруглёнными углами для сайта

Как сделать таблицу с закруглёнными углами для сайта

Понравилась статья? Размести её на своём сайте скопировав код ниже:
<a href="http://applepages.kz/ru/view_element.php?id=1402">Как сделать таблицу с закруглёнными углами для сайта</a>

В этой статье я решил рассказать вам как сделать таблицу с скруглёнными углами. Я уверен вы наверняка путшествуя по интернету встречались с такими таблицами.

Я расскажу вам именно о таких таблицах. Конечно такую таблицу можно сделать несколькими способами, этот способ о котором я вам расскажу является самым простым и самым "красивым", так как если вы будете делать такую таблицу другим способом, то вам придётся изучать JAVA и комбинировать его с CSS, и тем самым ваш код станет очень громостким и сложным.

Этот способ использует только HTML, но нам придётся создавать изображения, то есть углы таблицы. Для соэдания углов нам понадобится Photoshop или любая другая графическая программа которая вам по душе (хоть MS Point), но чтобы вы могли с ней обращаться. В этой статье я буду рассказывать как их сделать в Photoshop'e.

Шаг 1:

Приступаем непосредственно к созданию таблицы. чтобы создать таблицу открываем Dreamweaver или любой другой HTML редактор. Создаём новый документ или открываем уже созданный и там уже создаём саму таблицу с 3-мя строками и 2-мя столбцами:

Шаг 2:

Заходим в Фотошоп берём Rounded Rectangle Tool и рисуем загруглённый прямоугольник, при этом радиус скругления устанавливаем такой же какой хотим чтобы был у таблицы, я установил 30 пикселей.

Шаг 4:

Сначала соедините фоновый слой и слой с изображением прямоугольника, для этого нажмите и удерживайте клавишу Ctrl в панели слоёв выберите веpхний и нижний слой и нажмите Ctrl + E.

Теперь из этого прямоугольника нам надо извлечь сами углы, для этого берём Recatangular Marquee Tool, в верхней панели выбираем Style: Fixed Size в полях Width и Height запишите значения Radius'a которые вы указали в шаге 2. Кликните на изображений, перед вами появится пунктирный квадрат. Переместите его так чтобы закруглённый угол полностью был в квадратике.

Нажимаете Ctrl + C (чтобы скопировать то что находиться внутри квадрата-то есть наш угол).Теперь надо создать новое изображение, чтобы вставить туда ранее скопированный нами угол идём: File-New...-Ok и сразу же вставляем наш угол Ctrl + V

Шаг 5:

В созданной таблице второю строку надо будет соединить в одну, потому что там надо будет писать текст.
Теперь вставляем наши изображения(углы) в нашу таблицу.

Вставленные картинки (с правым-нижним и правым-верхним) надо выровнять по правому краю.
Теперь последнее действие: надо задать таблице фоновый цвет такой же, как у уголков.

Ну вот и всё. Этот метод самый лёгкий из всех. Я надеюсь что эта статья вам чем-то помогла, и надеюсь я всё доходчиво объяснил. Удачи!

Возможно Вы искали:
- Как сделать хороший баннер
- Как сёрфить по Интернету с пользой
- Как смотреть wap-сайты на компьютере
- Как соблюдать этикет в Интернете
- Как совершать покупки в сети Интернет

на вверх ↑

Ваши комментарии:

Оставить сообщение

* Ник:
* Сообщение:
	Защита от автоматического добавления записи

* Код картинки:

	* обязательные поля для заполнения