Як зробити таблицю з закругленими кутами для сайту

У цій статті я вирішив розповісти вам як зробити таблицю з округленими кутами. Я впевнений, ви напевно, подорожуючи по Інтернету, зустрічалися з такими таблицями.

Я розповім вам саме про такі таблицях. Звичайно таку таблицю можна зробити декількома способами, цей спосіб про який я вам розповім є найпростішим і “найкрасивішим”, тому що якщо ви будете робити таку таблицю іншим способом, то вам доведеться вивчати 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:

У створеній таблиці другий рядок треба буде з’єднати в одну, тому що там треба буде писати текст.
Тепер вставляємо наші зображення (кути) в нашу таблицю.

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

Ну от і все. Цей метод найлегший з усіх. Я сподіваюся що ця стаття вам чимось допомогла, і сподіваюся я все дохідливо пояснив. Удачи!

Коментування вимкнено .

  1. Erika-DC :

    Стаття цікава, нограмотность кульгає!
    Автор, пошкодуйте очі читачів-перевіряйте орфографію передотправкой статті!

  2. Ольга :

    ОДИНИЦЯ!! Стаття нічим непомогло, крім як дізнатися, чтокогда адміністрація сайтапрінімает статті до публікації, вона їх АБСОЛЮТНО не читає. Аеслі я помиляюся, то поясніть, ЯК ЦЕ МОЖНА БУЛО ВЗЯТИ?????? Вкаждом слові помилки ….

  3. --- :

    еее, що за набір слів?? O_O

  4. Elza :

    Хоч я і не фахівець у етіхвопросах, але по-моєму подобнаястатья має право насуществованіе. Автору – як японяла – новачкові треба просто датьпонять, що своїм витворам-якщо він хоче, щоб до німотносятся саме як ктвореніям, а не як до ляпів, надоуделять все ж побольшевніманія. І іноді хоча бивключать автоматіческуюпроверку Word (до слова обіскушенності в знаніяхпрограмм).

  5. Erika-DC :

    Іш ти, яка буря піднялася 🙂
    Однак питання про редакторскойпроверке, дійсно, животрепетне.
    Можу запропонувати свої услугі.Нельзя на такому гідному сайтепубліковать статті сграмматіческімі помилками.

  6. --- :

    тут справа навіть не в граматиці, а влексіке
    таку таблицю можна сделатьнесколькімі способами, етотспособ про який я вам расскажуявляется найпростішим і “найкрасивішим”, так як якщо вибудете робити таку табліцудругім способом,
    ну шойто – як курка накакала

  7. Elza :

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

  8. Ольга :

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

  9. Erika-DC :

    Ганна Щелчкова, раз вже Ви такаяграмотная, то можете самі статьредактором 🙂

    Ніхто не бездоганний :))))

  10. Клим :

    Дякуємо за статтю. Всеполучілось