161203
| | | | |

                           

ИНТЕРНЕТ / INTERNET

Поиск по сайту



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

Вернуться к списку статей

AAA + -




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

Я расскажу вам именно о таких таблицах. Конечно такую таблицу можно сделать несколькими способами, этот способ о котором я вам расскажу является самым простым и самым "красивым", так как если вы будете делать такую таблицу другим способом, то вам придётся изучать 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:

В созданной таблице второю строку надо будет соединить в одну, потому что там надо будет писать текст.
Теперь вставляем наши изображения(углы) в нашу таблицу.
<a href="http://itech.w6.ru/files/2008.05.06/table/pic9.gif"></a>

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

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



Источник: znaikak.ru
Автор:
Голосов: 25 Общая оценка: 2.8 Просмотров: 22602
Оцените эту статью:  
   Распечатать





Ошибка в тексте? Выдели ее мышкой! И нажми Ctrl+Enter.
09.05.2008 20:14 Erika-DC #
2

Статья интересная, но грамотность хромает!
Автор, пожалейте глаза читателей - проверяйте орфографию перед отправкой статьи!!!

krolik 09.05.2008 23:38 Ольга (krolik#
0

ЕДИНИЦА!!!! Статья ничем не помогла, кроме как узнать, что когда администрация сайта принимает статьи к публикации, она их СОВЕРШЕННО не читает. А если я ошибаюсь, то объясните, КАК ЭТО МОЖНО БЫЛО ПРИНЯТЬ?????? В КАЖДОМ слове ошибки....

10.05.2008 15:36 --- (arshish2#
0

эээ, что за набор слов?? O_O

10.05.2008 16:51 Elza (Annushka#
0

Хоть я и не специалист в этих вопросах, но по-моему подобная статья имеет право на существование. Автору - как я поняла - новичку надо просто дать понять, что своим творениям - если он хочет, чтобы к ним относились именно как к творениям, а не как к ляпам, надо уделять все же побольше внимания. И иногда хотя бы включать автоматическую проверку Word (к слову об искушенности в знаниях программ).

10.05.2008 17:42 Erika-DC #
0

Иш ты, какая буря поднялась :)
Однако вопрос о редакторской проверке, действительно, животрепещущий.
Могу предложить свои услуги. Нельзя на таком достойном сайте публиковать статьи с грамматическими ошибками.

11.05.2008 00:29 --- (arshish2#
1

тут дело даже не в грамматике, а в лексике
такую таблицу можно сделать несколькими способами, этот способ о котором я вам расскажу является самым простым и самым "красивым", так как если вы будете делать такую таблицу другим способом,
ну шойто - как курица накакала

11.05.2008 11:07 Elza (Annushka#
0

Erika_DC как будущему потенциальному редактору столь уважаемого издания должно быть известно, что междометие "ишь" пишется с мягким знаком на конце.

krolik 11.05.2008 13:54 Ольга (krolik#
1

:)))))))) Анна, 5 баллов!!! :))))

12.05.2008 18:26 Erika-DC #
2

Анна Щелчкова, раз уже Вы такая грамотная, то можете сами стать редактором :)

Никто не безупречен :))))

02.05.2013 18:01 Клим (klimentino#
0

Спасибо за статью. Все получилось


Для того , чтобы оставить здесь комментарий, необходимо зарегистрироваться на сайте.






MacBook Pro 2016


Камера GoPro 5


iPhone 7 и 7 Plus


Samsung Galaxy Note7


Винисиус и Том — талисманы Олимпийских и Паралимпийских игр 2016 в Рио-де-Жанейро


Pokémon Go

 
 

Статьи сегодня:

Как быстро украсить новогоднюю елку лентами?
Перед новогодними праздниками мы продумываем, ...
Как сделать бороду Деда Мороза для детского костюма?
К Новому году готовятся не только взрослые, но ...
Как выбрать, какой фильм посмотреть: премьеры декабря 2016
По традиции в декабре афиши кинотеатров пестрят ...
Как и где провести лучшую свадьбу
Свадьба – это самое ожидаемое и знаковое событие ...
Как сделать елочки из бумаги для украшения новогоднего стола?
Новогодний стол не похож на большинство других ...
Как сделать пряничный домик на Новый год? Часть 1: Выпекание и сборка.
С приходом новогодних праздников наш дом наполняется ...
Как наполнить дом новогодними ароматами: 7 простых способов
На рождественские праздники дом наполняется ...
Как легко сшить новогодние чехлы на стулья?
На новогодние праздники мы готовим очень много ...
Как найти Дом Фортис – надежный партнер в выборе мебели
Онлайн-магазин Дом ФортисПродавцов и производителей ...
Как получить по-настоящему полезную питьевую воду для повседневного применения?
Ежедневно мы расходуем огромное количество ...

Смотрите также:

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



ВОПРОСЫ - ОТВЕТЫ


НОВЫЙ ПОДКАСТ

Как Элвис Пресли стал королем рок-н-ролла
В истории музыки есть имена, прочно ассоциирующиеся ...

Все подкасты


ТЭГИ

Google Photoshop бесплатно блог браузер вашего веб Вконтакте всем вытащить дизайн добавить живые зависимость заработать защита знакомств имя интересные интернет интернет-магазин красивый любой людей место название назвать обеспечить общаться пластиковая построить потерять почта продать продвижение проект профиль развивался распознать рождался сайт сайта сайте сети сеть скорость смотреть создаются социальные Интернете товары удалить услуги факты фотографии футбол хитрости через электронная этикет

Не нашли ответа?
Спросите нас, как…


Письма читаем регулярно,
ищите ответы в соответствующей рубрике.