У цій статті я вирішив розповісти вам як зробити таблицю з округленими кутами. Я впевнений, ви напевно, подорожуючи по Інтернету, зустрічалися з такими таблицями.
Я розповім вам саме про такі таблицях. Звичайно таку таблицю можна зробити декількома способами, цей спосіб про який я вам розповім є найпростішим і “найкрасивішим”, тому що якщо ви будете робити таку таблицю іншим способом, то вам доведеться вивчати 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:
У створеній таблиці другий рядок треба буде з’єднати в одну, тому що там треба буде писати текст.
Тепер вставляємо наші зображення (кути) в нашу таблицю.
Вставлені картинки (з правим нижнім і правим-верхнім) треба вирівняти по правому краю.
Тепер останнє дію: треба задати таблиці фоновий колір такий же, як у куточків.
Ну от і все. Цей метод найлегший з усіх. Я сподіваюся що ця стаття вам чимось допомогла, і сподіваюся я все дохідливо пояснив. Удачи!
Стаття цікава, нограмотность кульгає!
Автор, пошкодуйте очі читачів-перевіряйте орфографію передотправкой статті!
ОДИНИЦЯ!! Стаття нічим непомогло, крім як дізнатися, чтокогда адміністрація сайтапрінімает статті до публікації, вона їх АБСОЛЮТНО не читає. Аеслі я помиляюся, то поясніть, ЯК ЦЕ МОЖНА БУЛО ВЗЯТИ?????? Вкаждом слові помилки ….
еее, що за набір слів?? O_O
Хоч я і не фахівець у етіхвопросах, але по-моєму подобнаястатья має право насуществованіе. Автору – як японяла – новачкові треба просто датьпонять, що своїм витворам-якщо він хоче, щоб до німотносятся саме як ктвореніям, а не як до ляпів, надоуделять все ж побольшевніманія. І іноді хоча бивключать автоматіческуюпроверку Word (до слова обіскушенності в знаніяхпрограмм).
Іш ти, яка буря піднялася
Однак питання про редакторскойпроверке, дійсно, животрепетне.
Можу запропонувати свої услугі.Нельзя на такому гідному сайтепубліковать статті сграмматіческімі помилками.
тут справа навіть не в граматиці, а влексіке
таку таблицю можна сделатьнесколькімі способами, етотспособ про який я вам расскажуявляется найпростішим і “найкрасивішим”, так як якщо вибудете робити таку табліцудругім способом,
ну шойто – як курка накакала
Erika_DC як будущемупотенціальному редактору стольуважаемого видання повинно битьізвестно, що вигук “бач” пишеться з мягкімзнаком на кінці.
:)))))))) Анна, 5 балів! :))))
Ганна Щелчкова, раз вже Ви такаяграмотная, то можете самі статьредактором
Ніхто не бездоганний :))))
Дякуємо за статтю. Всеполучілось