كيفية عمل مخطط دائري في إكسل. زوايا مدورة إضافة الصفوف والأعمدة

قررت في هذه المقالة أن أخبرك بكيفية صنع طاولة بزوايا مستديرة. أنا متأكد من أنك ربما صادفت جداول مثل هذه أثناء تصفح الإنترنت.

سأخبرك بالضبط عن هذه الجداول. بالطبع يمكن عمل مثل هذا الجدول بعدة طرق، هذه الطريقة التي سأخبركم عنها هي الأبسط والأجمل، لأنك إذا قمت بعمل مثل هذا الجدول بطريقة أخرى، فسيتعين عليك دراسة JAVA ودمجها مع CSS، وبالتالي ستصبح شفرتك مرهقة ومعقدة للغاية.

تستخدم هذه الطريقة HTML فقط، ولكن سيتعين علينا إنشاء صور، أي زوايا الجدول. لإنشاء الزوايا، سنحتاج إلى Photoshop أو أي برنامج رسومات آخر تفضله (حتى MS Point)، ولكن حتى تتمكن من التعامل معه. سأخبرك في هذه المقالة بكيفية صنعها في Photoshop.

دعنا ننتقل مباشرة إلى إنشاء الجدول. لإنشاء جدول، افتح Dreamweaver أو أي محرر HTML آخر. نقوم بإنشاء مستند جديد أو فتح مستند تم إنشاؤه بالفعل وهناك نقوم بإنشاء الجدول نفسه مع 3 صفوف وعمودين:

انتقل إلى Photoshop، واستخدم أداة Rounded Rectangle Tool وارسم مستطيلًا مستديرًا، واضبط نصف قطر التقريب على نفس الشكل الذي نريد أن يكون عليه الجدول، وقمت بضبطه على 30 بكسل.

أولاً، قم بتوصيل طبقة الخلفية والطبقة ذات الصورة المستطيلة، للقيام بذلك، اضغط مع الاستمرار على مفتاح Ctrl في لوحة الطبقات، وحدد الطبقة العلوية والسفلية واضغط على Ctrl + E.

الآن من هذا المستطيل نحتاج إلى استخراج الزوايا نفسها، ولهذا نأخذ أداة Rectangular Marquee Tool، في اللوحة العلوية حدد النمط: الحجم الثابت في حقلي العرض والارتفاع، واكتب قيم نصف القطر التي حددتها في الخطوة 2. اضغط على الصور، سيظهر خط منقط أمام المربع الخاص بك، حركه بحيث تكون الزاوية المستديرة داخل المربع بالكامل.

اضغط على Ctrl + C (لنسخ ما بداخل المربع، أي الزاوية الخاصة بنا)، الآن نحتاج إلى إنشاء صورة جديدة، من أجل لصق الزاوية التي نسخناها هناك مسبقًا، اذهب إلى: ملف-جديد...-موافق وقم بلصق الزاوية الخاصة بنا على الفور Ctrl + V

في الجدول الذي تم إنشاؤه، يجب دمج الصف الثاني في صف واحد، لأنه يجب كتابة النص هناك.
الآن نقوم بإدخال صورنا (الزوايا) في طاولتنا.

يجب أن تتم محاذاة الصور المدرجة (مع الأسفل الأيمن والأعلى الأيمن) إلى اليمين.
الآن الخطوة الأخيرة: تحتاج إلى إعطاء الجدول لون خلفية بنفس لون الزوايا.

حسنًا، لقد انتهى كل شيء الآن. هذه الطريقة هي الأسهل على الإطلاق. آمل أن يكون هذا المقال قد ساعدك بطريقة ما، وآمل أن أكون قد شرحت كل شيء بوضوح. حظ سعيد!

لقد سئم الجميع منذ فترة طويلة من الزوايا المستطيلة التقليدية في تصميم مواقع الويب. الزوايا الدائرية هي في الموضة، والتي لا يتم إجراؤها باستخدام الصور، ولكن من خلال الأنماط، والتي يتم استخدام خاصية نصف القطر الحدودي لها. يمكن أن تحتوي هذه الخاصية على قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم مفصولة بمسافة، والتي تحدد نصف قطر جميع الزوايا أو كل منها على حدة.

في الجدول يوضح الشكل 1 عددًا مختلفًا من القيم ونوع الكتلة التي يتم الحصول عليها في هذه الحالة.

شفرة	وصف	منظر
div (نصف قطر الحدود: 10 بكسل؛)	نصف قطر التقريب لجميع الزوايا في وقت واحد.
div ( نصف قطر الحدود: 0 10 بكسل؛ )	تحدد القيمة الأولى نصف قطر الزاوية العلوية اليسرى والسفلى اليمنى، وتحدد القيمة الثانية نصف القطر لأعلى اليمين وأسفل اليسار.
div ( نصف القطر الحدودي: 20px 10px 0; )	تحدد القيمة الأولى نصف قطر الزاوية اليسرى العليا، والثانية - كل من الجزء العلوي الأيمن وأسفل اليسار، والقيمة الثالثة - الجزء السفلي الأيمن.
div ( نصف القطر الحدودي: 20px 10px 5px 0; )	يضبط بالتتابع نصف قطر الزوايا العلوية اليسرى واليمنى العلوية والسفلى اليمنى والسفلى اليسرى.

يوضح المثال 1 كيفية إنشاء كتلة ذات زوايا مستديرة.

مثال 1. زوايا الكتلة

HTML5 CSS3 IE 9+ Cr Op Sa Fx

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. كتلة ذات زوايا مستديرة

يمكن الحصول على تأثير مثير للاهتمام إذا قمت بتعيين نصف قطر التقريب ليكون أكبر من نصف ارتفاع العنصر وعرضه. في هذه الحالة، سوف تحصل على دائرة. يوضح المثال 2 كيفية إنشاء زر دائري بصورة.

مثال 2: زر دائري

HTML5 CSS3 IE 9+ Cr Op Sa Fx

وتظهر نتيجة هذا المثال في الشكل. 2.

أرز. 2. زر دائري

في متصفح Opera، يتم التقريب إلى يتم تطبيقه بشكل غير صحيح إذا لم يتم تحديد الحدود عبر خاصية الحدود.

يمكن دمج الخاصية border-radius مع خصائص أخرى، على سبيل المثال، إضافة ظل إلى عنصر. في المثال 3، تم إنشاء مجموعة من الدوائر، تم تمييز إحداها باستخدام box-shadow . يمكن استخدام هذه المجموعة للتنقل عبر الصفحات أو الصور.

مثال 3. الوهج

HTML5 CSS3 IE 9+ Cr Op Sa Fx

وتظهر نتيجة هذا المثال في الشكل. 3.

أرز. 3. توهج حول الدائرة

باستخدام Border-radius، لا يمكنك إنشاء دائرة فحسب، بل يمكنك أيضًا إنشاء شكل بيضاوي، بالإضافة إلى تقريب بيضاوي للكتلة. للقيام بذلك، لا تحتاج إلى كتابة قيمة واحدة، ولكن اثنين، مفصولة بشرطة مائلة. كتابة 20px/10px تعني أن نصف القطر الأفقي للفيليه سيكون 20 بكسل، ونصف القطر العمودي سيكون 10 بكسل. يوضح المثال 4 كيفية إنشاء زوايا بيضاوية الشكل لإضافة تعليق بنمط الكتاب الهزلي إلى الصورة.

المثال 4: علامات الحذف

HTML5 CSS3 IE 9+ Cr Op Sa Fx

أنت معلم نفسك

وتظهر نتيجة هذا المثال في الشكل. 4.

أرز. 4. استخدام الزوايا البيضاوية

يمكنك أيضًا تغيير مظهر زوايا الصور عن طريق إضافة خاصية border-radius إلى محدد img، كما هو موضح في المثال 5.

المثال 5: الصور

HTML5 CSS3 IE 9+ Cr Op Sa Fx

تحيات أصدقاء! غالبًا ما تكون البيانات الجدولية موجودة في المستندات النصية لعرض بعض المؤشرات بشكل أكثر وضوحًا. ويعتمد التصور العام للمعلومات المنشورة هناك على التنسيق الصحيح للجدول. سنتعرف اليوم على كيفية رسم جدول في Word بناءً على حجم أعمدته وصفوفه.

قبل إنشاء جدول، عليك أن تقرر عدد الصفوف والأعمدة. بعد ذلك، حدد اتجاه الصفحة المناسب. بالنسبة لطاولة واسعة، يفضل اختيار المناظر الطبيعية، لطاولة ضيقة، صورة.

قم بإدراج جدول يحتوي على عدد معين من الخلايا بأي طريقة تناسبك. حول طرق إدراج الجداول.

تحديد الحجم الدقيق للجدول

ستسمح لنا الخطوة التالية بتعيين أبعاد خارجية صارمة للجدول.

يجب عليك النقر داخل الجدول لتفعيل القدرة على العمل معه. إذا لم تحدد أي معلمات إضافية عند إدراج جدول، فسيتم تمديده عبر عرض منطقة النص المتوفرة بالكامل (في منطقة المقياس الأبيض للمسطرة الأفقية)، وسيتم محاذاة أعمدته تلقائيًا في العرض.

للإشارة إلى الأبعاد الدقيقة، انتقل إلى موجز الأداة.

في النافذة التي تفتح، على علامة التبويب طاولةحدد مربع الاختيار (المشار إليه بالسهم) واكتب عرض الجدول المطلوب. انقر فوق موافق.

إذا لم تتمكن من تغيير عرض الأعمدة إلى الحجم المطلوب، وعند تغيير عرض أحد الأعمدة، يتغير عرض الأعمدة الأخرى، فإن إلغاء تحديد خانة الاختيار سيؤدي إلى إزالة هذا الإزعاج.

الآن ستكون الأبعاد الخارجية للجدول محدودة. ستتمكن فقط من التأثير على عرض الأعمدة داخل الجدول.

تحديد ارتفاع الخط

لتعيين ارتفاعات الصفوف في الجدول بأكمله لتكون هي نفسها، حددها. بعد ذلك، في شريط الأدوات، حدد العمل مع الجداول – التخطيط – الخصائص.

في مربع الحوار، انتقل إلى علامة التبويب خطضع علامة اختيار في خانة اختيار الارتفاع وحدد ارتفاع الصف المطلوب ووضعه (مميز بإطار أحمر). الحد الأدنى- سيتم تعيين الحد الأدنى للقيمة لجميع الصفوف. سيتم تحديد الحد الأقصى للارتفاع فقط بمحتويات الخلايا. ولذلك فإن ارتفاع الصفوف في الجدول سيختلف، لأنه يعتمد على محتوى المعلومات. إذا كنت تريد تحديد ارتفاع الصف بشكل صارم، فقم بتعيين الوضع بالضبط.

لتعيين أبعاد سطر واحد، فقط انقر بزر الماوس الأيمن عليه لفتح قائمة السياق. منها لاختيار فريق خصائص الجدوللتعيين معلمات السطر المحدد.

تحديد عرض الأعمدة

لتحديد حجم عمود، انقر بزر الماوس الأيمن على أي خلية فيه واستدعاء خصائص الجدول. انتقل إلى علامة التبويب عمود، قم بتعيين حجم العرض المطلوب وانقر فوق الزر العمود التاليأو العمود السابق،انتقل إلى تحديد حجم الأعمدة الأخرى في الجدول. ثم انقر فوق موافق.

الآن سوف يتوافق جدولك تمامًا مع الأبعاد المحددة.

ملاحظة.بناءً على طلب قارئ المدونة سيرجي ياكوفليفيتش جريبينيوك، قمت بإنشاء رقعة شطرنج في Microsoft Word باستخدام جدول، وقطع المدقق باستخدام الأشكال التلقائية. كان هذا ضروريًا لإنشاء صور لمواضع المدقق المختلفة. هنا هو الرابط إلى مستند Word https://yadi.sk/i/O2SmHvyF3Pvujrشاهد الفيديو لترى كيف يمكنك ترتيب القطع والتقاط لقطة شاشة لموضعها باستخدام، المضمن في نظام التشغيل Windows الإصدار 7 والإصدارات الأحدث.

قدرات Word قوية بشكل لا يصدق. في بعض الأحيان أنا نفسي مندهش مما لا يحدث.

عزيزي القارئ! لقد شاهدت المقال حتى النهاية.
هل حصلت على إجابة لسؤالك؟اكتب بضع كلمات في التعليقات.
إذا لم تجد الجواب، تشير إلى ما كنت تبحث عنه.

لنفترض أن لديك بيانات عن الموظفين: عدد المعاملات والإيرادات. تحتاج إلى عرض البيانات بطريقة مرئية، مثل المخطط الدائري.

في هذه الحالة ستعني الدائرة مجموع كل المعاملات أو مجموع كل الإيرادات أي 100%

عند إنشاء مخطط دائري، سيقوم Excel تلقائيًا بحساب المشاركة وتقديمها في شكل صورة جميلة ومرئية.

إرشادات حول كيفية عمل مخطط دائري في Excel 2007 أو 2010

1. لإنشاء مخطط دائري استنادًا إلى بيانات المعاملات، يتعين عليك تحديد نطاق القيم المطلوب ب3:C8(عمود بالاسم الكامل وعمود بالمعاملات) كما في الشكل. لا تنس الإمساك برأس الجدول.
2. بعد ذلك، انتقل إلى القسم أدخل | المخططات
3. في قسم المخططات، حدد مخططًا دائريًا
4. يجب عليك تحديد نوع المخطط الدائري المطلوب من القائمة المنسدلة.

هذا كل شيء - المخطط الدائري جاهز.

لعرض القيم على مخطط دائري، انقر بزر الماوس الأيمن في أي مكان على الدائرة نفسها وحدد " إضافة توقيعات البيانات”

إذا كنت بحاجة إلى إنشاء مخطط دائري لعمود آخر، في مثالنا هو الإيرادات، فأنت بحاجة أيضًا أولاً إلى تحديد الأعمدة التي تهمنا. للقيام بذلك، تحتاج إلى تحديد هذه النطاقات عن طريق الضغط باستمرار على المفتاح كنترولعلى لوحة المفاتيح

إذا لزم الأمر، نقوم أيضًا بإدراج توقيعات البيانات.

هناك العديد من الأمثلة والبرامج التعليمية على الإنترنت لتقريب زوايا كتلة أو جدول، ولكن كقاعدة عامة، تعتمد هذه البرامج التعليمية على استخدام الصور أو استخدام كتل إضافية.

في البرنامج التعليمي اليوم سأوضح لك كيف يمكنك ذلك زوايا المائدة المستديرة باستخدام CSS فقط.

العلامات المباشرة (يختلف الجدول الثاني في تخطيط الخلايا في الصف العلوي):

Curabitur في ultricies الجرة	فاسيلوس موليس
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero actor الدهليز.	0

خالية من الحمل.	أورنا أغسطس.	Nunc iaculis bibendum.
		مؤقت الدهليز	لاوريت إيروس semper ut.
Vivamus quis nisi lacus.	Cras id felis eu Purus tempor dictum in at lorem.	Facilisis iaculis magna diam id quam. com.eleifend.	دورة رائعة، سهلة الاستخدام

1. قم بتدوير الزوايا مباشرة على الطاولة (علامة الجدول).

BContentTables( border:1px Solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ تجاوز السعة: مخفي ؛ الهامش: 0.7em تلقائي؛)

2. قم بإزالة أي خلفية من السطر الأول.

Tr.bCTable_Header (الخلفية: لا شيء؛)

3. باستخدام الفئة الزائفة: الطفل الأول والمدمج > حدد الخلية الأولى في الجدول. قم بتقريب الزاوية اليسرى العليا من الخلية الأولى. تتكون خلفية الصف الأول من خلفية خلايا هذا الصف.

Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- نصف قطر الحدود: 10 بكسل 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; ) tr.bCTable_Header td( color:white;font-size:110%; لون الخلفية:#00843C;)

4. باستخدام الفئة الزائفة: الطفل الأخير والمدمج > حدد الخلية الأخيرة في الصف الأول. لذلك، نقرب الزاوية اليمنى العليا.

Tr.bCTable_Header:الطفل الأول > td:الأخير-الطفل( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- نصف قطر الحدود:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0; )

5. قم بتدوير الزوايا السفلية للسطر الأخير. لا تنس إزالة الخلفية من السطر الأخير؛ يتم تعيين خلفية الصف بواسطة خلفية خلايا الصف الأخير.

BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; الخلفية: لا شيء; )

6. ثم، قياسا على النقاط 3-4، في السطر الأخير نقوم بتقريب زوايا الخلايا الأولى والخارجية.

BContentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;) . bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- نصف القطر: 0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0; )

دعم المتصفح

 

قد يكون من المفيد أن تقرأ:

• كيفية تحديث BIOS على اللوحات الأم من نماذج مختلفة;
• المتصفحات باللغة الروسية ويندوز 7;
• برامج مكتبية مجانية لنظام التشغيل Windows;
• الفيروسات: أنواع الفيروسات، العلاج، الأسباب، الأعراض، العلامات، التشخيص، الوقاية;
• كيفية إعداد الوصول المشترك للماسح الضوئي على شبكة محلية;
• قم بتنزيل البرنامج لإنشاء محرك أقراص فلاش للتثبيت;
• هل العمل في سبيربنك مرموق وواعد أم عصبي ومتعب؟;
• الترويكا باهظة الثمن والبدائل المحلية;