171121
| | | | |

                           

ИНТЕРНЕТ / 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 Просмотров: 23726
Оцените эту статью:  
   Распечатать





Ошибка в тексте? Выдели ее мышкой! И нажми 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

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


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






Новая купюра номиналом 2000 рублей


Apple iPhone X


"Мисс Россия – 2017" Полина Попова


Samsung Galaxy S8


«Мисс Вселенная 2017» - Ирис Миттенар (Франция)


MacBook Pro 2016

 
 

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

Как правильно вывести пятно от клея на одежде?
Как бы аккуратно вы не носили одежду, иногда ...
Как сделать в домашних условиях крем для рук?
Кожа на руках больше всего подвергается вредному ...

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

Как родилась концепция Веб 2.0
Автор: Тим О'Рейли...
Как установить новую версию веб-браузера Internet Explorer 7
Если вы уже перешли на новую версию Internet Explorer 7 или только ...
Как работает UGC
Когда появилась аббревиатура Веб 2.0, то с ней в Интернет мир пришло ...
Как поживает Веб 3.0?
Если раньше я встречался чаще всего со словами WEB 2.0, теперь цифра ...
Как вставить видео в страницу
С развитием сетей широкополосного доступа и распространением ...


YouTube канал про Apple

YouTube канал про Apple

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


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

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

Все подкасты


ТЭГИ

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

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


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