Как да направите кръгова диаграма в Excel. Заоблени ъгли Добавяне на редове и колони
В тази статия реших да ви кажа как да направите маса със заоблени ъгли. Сигурен съм, че вероятно сте попадали на маси като тази, докато сърфирате в Интернет.
Точно за такива маси ще ви кажа. Разбира се, такава таблица може да бъде направена по няколко начина, този метод, за който ще ви разкажа, е най-простият и най-„красивият“, тъй като ако направите такава таблица по друг начин, тогава ще трябва да научите JAVA и го комбинирайте с CSS и по този начин вашият код ще стане много тромав и сложен.
Този метод използва само HTML, но ще трябва да създадем изображения, тоест ъглите на таблицата. За да създадем ъглите, ще ни трябва Photoshop или друга графична програма, която харесвате (дори MS Point), но така че да можете да се справите с нея. В тази статия ще ви кажа как да ги направите във Photoshop.
Нека да продължим директно към създаването на таблицата. за да създадете таблица, отворете Dreamweaver или друг HTML редактор. Създаваме нов документ или отваряме вече създаден и там създаваме самата таблица с 3 реда и 2 колони:
Отидете във Photoshop, вземете Rounded Rectangle Tool и начертайте заоблен правоъгълник и задайте радиуса на заобляне на същия, какъвто искаме да има таблицата, аз го настроих на 30 пиксела.
Първо свържете фоновия слой и слоя с правоъгълното изображение, за да направите това, натиснете и задръжте клавиша Ctrl в панела със слоеве, изберете горния и долния слой и натиснете Ctrl + E.
Сега от този правоъгълник трябва да извлечем самите ъгли, за това вземаме Recatangular Marquee Tool, в горния панел изберете Style: Fixed Size в полетата Width и Height, запишете стойностите на радиуса, които сте посочили в стъпка 2. Щракнете върху изображенията, пред вашия квадрат ще се появи пунктирана линия. Преместете го така, че заобленият ъгъл да е изцяло в квадрата.
Натиснете Ctrl + C (за да копирате това, което е вътре в квадрата, тоест нашия ъгъл, сега трябва да създадем ново изображение, за да поставим ъгъла, който преди това копирахме там, отидете: File-New...-Ok). и веднага поставете нашия ъгъл Ctrl + V
В създадената таблица вторият ред ще трябва да се комбинира в един, защото там ще трябва да се напише текст.
Сега вмъкваме нашите изображения (ъгли) в нашата таблица.
Вмъкнатите картини (с дясно-долно и дясно-горе) трябва да са подравнени надясно.
Сега последната стъпка: трябва да дадете на масата фонов цвят, същият като на ъглите.
Добре всичко свърши. Този метод е най-лесният от всички. Надявам се, че тази статия ви е помогнала по някакъв начин и се надявам, че обясних всичко ясно. Късмет!
Всички отдавна са уморени от традиционните правоъгълни ъгли в дизайна на уебсайтове. На мода са заоблените ъгли, които се правят не чрез изображения, а чрез стилове, за които се използва свойството border-radius. Това свойство може да има една, две, три или четири стойности, разделени с интервал, които определят радиуса на всички ъгли или всеки поотделно.
В табл 1 показва различен брой стойности и вида на блока, който се получава в този случай.
| Код | Описание | Преглед |
|---|---|---|
| div (радиус на границата: 10px;) | Радиус на заобляне за всички ъгли наведнъж. | |
| div (радиус на границата: 0 10px;) | Първата стойност задава радиуса на горния ляв и долния десен ъгъл, втората стойност задава радиуса за горния десен и долния ляв ъгъл. |  |
| 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 въз основа на размера на нейните колони и редове.
Преди да създадете таблица, трябва да вземете решение за броя на редовете и колоните. След това изберете подходящата ориентация на страницата. За широка маса е за предпочитане да изберете пейзаж, за тясна маса, портрет.
Вмъкнете таблица с даден брой клетки по всеки удобен за вас начин. Относно методите за вмъкване на таблици.
Задаване на точен размер на масата
Следващата стъпка ще ни позволи да зададем стриктни външни размери на масата.
Трябва да щракнете вътре в таблицата, за да активирате възможността за работа с нея. Ако не сте посочили никакви допълнителни параметри при вмъкване на таблица, тя ще бъде разтегната по ширината на цялата налична текстова област (в областта на бялата скала на хоризонталната линийка) и нейните колони ще бъдат автоматично подравнени в ширина.
За да посочите точните размери, отидете на инструмента.
В прозореца, който се отваря, в раздела ТаблицаПоставете отметка в квадратчето (обозначено със стрелката) и запишете желаната ширина на таблицата. Натиснете OK.
Ако не можете да промените ширината на колоните до желания размер и когато промените ширината на едната, ширината на другата се променя, премахването на отметката в квадратчето ще елиминира това неудобство.
Сега външните размери на масата ще бъдат ограничени. Ще можете да повлияете само на ширината на колоните в таблицата.
Задаване на височината на линията
За да зададете еднакви височини на редове в цялата таблица, изберете го. След това в лентата с инструменти изберете Работа с таблици – оформление – свойства.
В диалоговия прозорец отидете на раздела Линияпоставете отметка в квадратчето за височина и посочете необходимата височина и режим на реда (маркирани с червена рамка). минимум– ще зададе минималната стойност за всички редове. Максималната височина ще бъде ограничена само от съдържанието на клетките. Следователно височината на редовете в таблицата ще варира, тъй като зависи от съдържанието на информацията. Ако искате строго да ограничите височината на реда, задайте режима Точно.
За да зададете размерите на един ред, просто щракнете с десния бутон върху него, за да отворите контекстното меню. От които да изберете отбор Свойства на таблицатаза да зададете параметрите на посочения ред.
Задаване на ширината на колоните
За да зададете размера на колона, щракнете с десния бутон върху произволна клетка в нея и извикайте свойствата на таблицата. Отидете в раздела Колона, задайте необходимия размер на ширината и щракнете върху бутона Следваща колонаили Предишна колона,преминете към определяне на размера на други колони в таблицата. След това щракнете върху OK.
Сега вашата маса ще отговаря стриктно на зададените размери.
P.S.По молба на читателя на блога Сергей Яковлевич Гребенюк, направих шахматна дъска в Microsoft Word с помощта на таблица и пулове с помощта на автоформи. Това беше необходимо за създаване на изображения на различни позиции на пулове. Ето връзката към документа на Word https://yadi.sk/i/O2SmHvyF3PvujrГледайте видеоклипа, за да видите как можете да подредите частите и да направите екранна снимка на позицията с помощта на , който е включен в операционната система Windows версия 7 и по-нова.
Възможностите на Word са невероятно мощни. Понякога самият аз се учудвам какво не се случва.
Уважаеми читателю! Изгледахте статията до края.
Получихте ли отговор на въпроса си?Напишете няколко думи в коментарите.
Ако не сте намерили отговора, посочете какво търсите.
Да предположим, че имате данни за служителите: брой транзакции и приходи. Трябва да покажете данните по визуален начин, като кръгова диаграма.
В този случай кръгът ще означава сумата от всички транзакции или сумата от всички приходи, тоест 100%
Когато конструирате кръгова диаграма, Excel автоматично ще изчисли дела и ще го представи под формата на красива и визуална картина.
Инструкции как да направите кръгова диаграма в Excel 2007 или 2010
- За да изградите кръгова диаграма въз основа на данни за транзакции, трябва да изберете необходимия диапазон от стойности B3:C8(колона с пълно име и колона с транзакции), както е на фигурата. Не забравяйте да хванете заглавката на таблицата.
- След това отидете на секцията Вмъкване | Диаграми
- В секцията Графики изберете кръгова диаграма
- Трябва да изберете желания тип кръгова диаграма от падащия списък.
Това е всичко - кръговата диаграма е готова.
За да покажете стойности на кръгова диаграма, щракнете с десния бутон някъде върху самия кръг и изберете „ Добавяне на подписи към данни”
Ако трябва да направите кръгова диаграма за друга колона, в нашия пример това са приходи, тогава първо трябва да изберете колоните, които ни интересуват. За да направите това, трябва да изберете тези диапазони, като задържите клавиша Ctrlна клавиатурата
Ако е необходимо, вмъкваме и подписи на данни.
В интернет има много примери и уроци за заобляне на ъглите на блок или маса, но като правило тези уроци се основават на използването на изображения или на използването на допълнителни блокове.
В днешния урок ще ви покажа как можете ъгли на кръгла маса, използвайки само CSS.
Директно маркиране (Втората таблица се различава по оформлението на клетките в горния ред):
| Nulla gravida. | Urna augue. | Nunc iaculis bibendum. | |
| Вестибулум темпор | Laoreet eros sempre ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor dictum in at lorem. | facilisis iaculis magna diam id quam. eleifend. | Pellentesque cursus, nunc ut facilisis hendrerit |
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 */ -border-radius: 10px; /* CSS3 */ overflow: скрит margin:0.7em auto ;
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- border-radius:10px 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. Използвайки псевдокласа: last-child и комбинатора > изберете последната клетка в първия ред. За него закръгляме горния десен ъгъл.
Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius: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 10px; -ms-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);
Поддръжка на браузър
Може да е полезно да прочетете:
- Почистване на файлове на приложението;
- Задълбочен преглед на Photos за Mac - всичко, което трябва да знаете за замяната на iPhoto и Aperture;
- Емулатор на CD чейнджър - можете ли да го направите сами?;
- Как мога да променя фамилното си име в контакт?;
- Деактивиране на услугата „Лесно плащане“ от MTS;
- Създаване на анкети в Telegram Как да харесате в Telegram;
- Водещ камерен инженер за Sony Xperia относно развитието на мобилната фотография, технологиите на Sony и бъдещето;
- Как да прехвърляте запазени мобилни игри на друго устройство?;