В этой статье я решил рассказать вам как сделать таблицу с скруглёнными углами. Я уверен, вы наверняка, путешествуя по Интернету, встречались с такими таблицами.
Я расскажу вам именно о таких таблицах. Конечно такую таблицу можно сделать несколькими способами, этот способ о котором я вам расскажу является самым простым и самым "красивым", так как если вы будете делать такую таблицу другим способом, то вам придётся изучать 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>
Вставленные картинки (с правым-нижним и правым-верхним) надо выровнять по правому краю.
Теперь последнее действие: надо задать таблице фоновый цвет такой же, как у уголков.
Ну вот и всё. Этот метод самый лёгкий из всех. Я надеюсь что эта статья вам чем-то помогла, и надеюсь я всё доходчиво объяснил. Удачи!
Статья интересная, но грамотность хромает!
Автор, пожалейте глаза читателей — проверяйте орфографию перед отправкой статьи!!!
ЕДИНИЦА!!!! Статья ничем не помогла, кроме как узнать, что когда администрация сайта принимает статьи к публикации, она их СОВЕРШЕННО не читает. А если я ошибаюсь, то объясните, КАК ЭТО МОЖНО БЫЛО ПРИНЯТЬ?????? В КАЖДОМ слове ошибки….
эээ, что за набор слов?? O_O
Хоть я и не специалист в этих вопросах, но по-моему подобная статья имеет право на существование. Автору — как я поняла — новичку надо просто дать понять, что своим творениям — если он хочет, чтобы к ним относились именно как к творениям, а не как к ляпам, надо уделять все же побольше внимания. И иногда хотя бы включать автоматическую проверку Word (к слову об искушенности в знаниях программ).
Иш ты, какая буря поднялась 🙂
Однако вопрос о редакторской проверке, действительно, животрепещущий.
Могу предложить свои услуги. Нельзя на таком достойном сайте публиковать статьи с грамматическими ошибками.
тут дело даже не в грамматике, а в лексике
такую таблицу можно сделать несколькими способами, этот способ о котором я вам расскажу является самым простым и самым "красивым", так как если вы будете делать такую таблицу другим способом,
ну шойто — как курица накакала
Erika_DC как будущему потенциальному редактору столь уважаемого издания должно быть известно, что междометие "ишь" пишется с мягким знаком на конце.
:)))))))) Анна, 5 баллов!!! :))))
Анна Щелчкова, раз уже Вы такая грамотная, то можете сами стать редактором 🙂
Никто не безупречен :))))
Спасибо за статью. Все получилось