Как оформить таблицу красиво: Красивое оформление таблиц

Содержание

Как правильно и красиво оформлять таблицы Excel 2010? — Microsoft Office для женщин

Следующая группа на ленте называется Стили (рис. 2.31). Эта группа позволяет красиво оформить таблицу. И опять я хочу подчеркнуть, что главное в оформлении не красота, а читаемость и возможность легко воспринять информацию.

Если вы откроете таблицу, а там все очень красиво с точки зрения дизайна, но от обилия цветов рябит в глазах, то ваш дизайн вряд ли оценят по достоинству. Вы же не букет составляете, а таблицу делаете.

Рис. 2.31. Группа Стили

Условное форматирование

Эта кнопка позволяет вам самой задать условия оформления данных в таблице (рис. 2.32).

Рис. 2.32. Условное форматирование

Посмотрите, какие правила выделения ячеек предлагает нам Excel. Можно, например, выделить ячейки, имеющие значения больше тех, которые вы зададите. Допустим, я прошу выделить все ячейки, значение температуры воды в которых больше, чем 27,5 (рис. 2.33).

Рис. 2.33. Задание условия для форматирования

Выбираю желтую заливку и темно-желтый фон и не забываю нажать ОК. (Кстати, в списке есть и пользовательский формат. Если щелкнете на нем, то появится окно Формат ячеек, с помощью которого сможете полностью удовлетворить свой художественный порыв.) В итоге получаю вот такую таблицу (рис. 2.34). То, что больше 27,5, — выделено.

Рис. 2.34. Результат условного форматирования

Учтите только: применять условное форматирование нужно не ко всей таблице, а к тем ячейкам, в которых находятся числовые данные. Потому что программе трудно решить, ячейка с текстом, например, — это большее или меньшее числовое значение относительно 27,5? Вы можете создать и свое правило, по которому будут выделяться данные таблицы (рис. 2.35).

Рис. 2.35. Создаем правило форматирования

Про это окно можно писать долго. Тут масса функций, практически любая команда открывает свой список. Но мне кажется, тут все достаточно прозрачно. Сначала в верхней части окна выбираете, к каким данным применить ваше правило: ко всем или выборочно. В нижней части вы решаете, как именно разукрасить то, что вы выбрали. Самый простой пример создания правила форматирования я показала на рис. 2.36.

Рис. 2.36. Пример создания правила форматирования (а) и результат выделения ячеек на его основании (б)

По этому правилу Excel выделяет цветом числа от 0 до 10. Чем больше число, тем светлее цвет фона ячейки. Основная прелесть Excel в том, что вы можете сколько угодно менять данные в ячейках. Если уж вы задали такое правило форматирования, то все, что вы введете в ячейку, будет подчиняться этому правилу. Захотите правило удалить, выделите ячейки, к которым вы его применяли, и выберите команду Удалить правила кнопки Условное форматирование (см. рис. 2.32), таблица опять станет скучная, нераскрашенная.

Кроме правил выделения ячеек, в запасе еще есть Правила отбора первых и последних значений (которые позволят вам выделить самые большие или самые маленькие значения), а также Гистограммы, Цветовые шкалы и Наборы значков (см. рис. 2.32). Все это существует для того, чтобы данные в таблице были представлены еще нагляднее и понятнее. Каким из способов пользоваться, зависит только от стоящих перед вами задач. Как вы решите, так и будет.

Форматировать как таблицу

Эта кнопка позволит вам применить к таблице уже готовый стиль. Вам достаточно глянуть на внушительный перечень примеров в списке, который появляется при щелчке на этой кнопке (рис. 2.37).

Рис. 2.37. Шаблоны для форматирования таблицы

Если вам этого покажется мало, то вы можете создать свой стиль таблицы.

Стили ячеек

Еще один способ украсить таблицу — задать стили ячеек (рис. 2.38).

Рис. 2.38. Стили ячеек

Тут тоже все предельно просто — выделяете ячейки и подводите указатель мыши к выбранному вами стилю. Ячейка тут же становится «стильной», вы оцениваете результат. Понравилось — щелкайте на выбранном стиле, не понравилось — ищите дальше. Только напоминаю, что вы присваиваете стиль конкретной ячейке с конкретным адресом. Данные в ячейке могут меняться, а стиль останется прежним, до тех пока вы его сами не измените.

Если захотите, создайте свой стиль ячейки. В меню кнопки Стили ячеек (см. рис. 2.38) есть команда Объединить стили. Она позволяет перетащить стиль из одного документа в другой. Вдруг вам так сильно понравится табличка и вы захотите нарисовать такую же. В этом случае вы сможете перетащить стиль из понравившейся книги в свою.

5 сервисов и программ для создания таблиц сравнения

1. Free Comparison Table Generator

  • Платформы: веб.
  • Стоимость: бесплатно.

В этом конструкторе удобно генерировать простейшие HTML-таблицы сравнения для сайтов. Вы можете настроить количество столбцов и строк, выбрать цветовую схему таблицы, ввести заголовки и заполнить ячейки текстом или предложенными иконками. Когда закончите кастомизацию, останется только скопировать HTML и CSS таблицы и вставить их на свой сайт.

Создать таблицу сравнения в Free Comparison Table Generator →

2. Compare Ninja

  • Платформы: веб.
  • Стоимость: бесплатно или от 3 долларов в месяц.

Как и предыдущий, этот сервис предназначен для создания таблиц под сайты. Он такой же простой и удобный. Но Compare Ninja предлагает больше вариантов оформления и умеет конвертировать таблицы, созданные в Excel, в формат HTML.

Вместе с тем в сервисе действуют ограничения. Создавать больше трёх таблиц и использовать больше 10 строк и 5 столбцов в каждой из них можно только после оформления платной подписки.

Для добавления готовой таблицы на сайт нужно скопировать и вставить сгенерированный сервисом HTML-код таблицы и скрипт оформления.

Создать таблицу сравнения в Compare Ninja →

3. Canva Charts

  • Платформы: веб.
  • Стоимость: бесплатно.

Canva Charts сохраняет таблицы в виде статичных изображений или PDF. В редакторе есть несколько десятков красиво оформленных шаблонов с иконками и фонами. Вы можете выбрать любой из них, заполнить его нужными данными и отредактировать оформление с помощью различных инструментов. Но управлять количеством ячеек нельзя. Поэтому вы не сможете создать таблицу, если для неё не подойдёт ни один из доступных шаблонов.

Создать таблицу сравнения в Canva Charts →

4. Edraw Max

  • Платформы: Windows, macOS, Linux.
  • Стоимость: от 179 долларов.

Edraw Max — это профессиональная программа для создания различных таблиц, карт мыслей, графиков и прочих схем. С её помощью можно генерировать таблицы сравнения любой сложности и сохранять их во множестве форматов: PDF, PPTX, HTML, PNG, JPG и не только.

Интерфейсом Edraw Max напоминает офисные приложения Microsoft. Чтобы перейти к созданию таблицы, нажмите «Создать» → «Диаграммы и графики» → «Диаграмма сравнения» и выберите подходящий шаблон. Далее вы сможете настроить его оформление и содержимое под свои нужды.

Фишка программы — инструменты для динамической визуализации данных. К примеру, если вы измените в шаблоне числовые данные, то добавленный в него график перестроится под них.

Вы можете скачать пробную версию Edraw Max, чтобы протестировать функции программы в течение 30 дней.

Создать таблицу сравнения в Edraw Max →

5. SmartDraw

  • Платформы: веб, Windows.
  • Стоимость: 10 долларов в месяц (веб) или 297 долларов (Windows).

Ещё один продвинутый конструктор таблиц сравнения и различных схем любой сложности. Результаты работы можно сохранять в таких форматах, как PDF, SVG, PNG, VSD, или сразу экспортировать в виде изображений в офисные программы Microsoft.

Сервис содержит множество полностью настраиваемых шаблонов. Можно менять структуру таблиц, вводить текстовые данные, редактировать визуальное оформление и добавлять различные фигуры и прочие объекты.

Онлайн-версия SmartDraw доступна после оформления платной подписки. Если не хотите платить по месяцам, можете приобрести десктопную версию за одноразовый платёж.

Создать таблицу сравнения в SmartDraw →

Читайте также

Красивые таблицы CSS в HTML

.simple-little-table {

font-family:Arial, Helvetica, sans-serif;

color:#666;

font-size:12px;

text-shadow: 1px 1px 0px #fff;

background:#eaebec;

margin:20px;

border:#ccc 1px solid;

border-collapse:separate;

 

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

 

-moz-box-shadow: 0 1px 2px #d1d1d1;

-webkit-box-shadow: 0 1px 2px #d1d1d1;

box-shadow: 0 1px 2px #d1d1d1;

}

 

.simple-little-table th {

font-weight:bold;

padding:21px 25px 22px 25px;

border-top:1px solid #fafafa;

border-bottom:1px solid #e0e0e0;

 

background: #ededed;

background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));

background: -moz-linear-gradient(top,  #ededed,  #ebebeb);

}

.simple-little-table th:first-child{

text-align: left;

padding-left:20px;

}

.simple-little-table tr:first-child th:first-child{

-moz-border-radius-topleft:3px;

-webkit-border-top-left-radius:3px;

border-top-left-radius:3px;

}

.simple-little-table tr:first-child th:last-child{

-moz-border-radius-topright:3px;

-webkit-border-top-right-radius:3px;

border-top-right-radius:3px;

}

.simple-little-table tr{

text-align: center;

padding-left:20px;

}

.simple-little-table tr td:first-child{

text-align: left;

padding-left:20px;

border-left: 0;

}

.simple-little-table tr td {

padding:18px;

border-top: 1px solid #ffffff;

border-bottom:1px solid #e0e0e0;

border-left: 1px solid #e0e0e0;

 

background: #fafafa;

background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));

background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);

}

.simple-little-table tr:nth-child(even) td{

background: #f6f6f6;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));

background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);

}

.simple-little-table tr:last-child td{

border-bottom:0;

}

.simple-little-table tr:last-child td:first-child{

-moz-border-radius-bottomleft:3px;

-webkit-border-bottom-left-radius:3px;

border-bottom-left-radius:3px;

}

.simple-little-table tr:last-child td:last-child{

-moz-border-radius-bottomright:3px;

-webkit-border-bottom-right-radius:3px;

border-bottom-right-radius:3px;

}

.simple-little-table tr:hover td{

background: #f2f2f2;

background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));

background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);

}

 

.simple-little-table a:link {

color: #666;

font-weight: bold;

text-decoration:none;

}

.simple-little-table a:visited {

color: #999999;

font-weight:bold;

text-decoration:none;

}

.simple-little-table a:active,

.simple-little-table a:hover {

color: #bd5a35;

text-decoration:underline;

}

Оформление таблиц Excel форматированием ячеек листа

Возможности форматирования ячеек в оформлении таблиц для наилучшего представления данных.

Создание стильных форматов таблиц и ячеек

Как выделить наименьшее и наибольшее значение в Excel цветом.
Выделение цветом трех подряд наименьше значений в столбце. Как выделить разными цветами 3 наибольших числа в целой таблице? Пример использования функций НАИМЕНЬШИЙ и НАИБОЛЬШИЙ. Как найти одинаковые значения в столбце Excel.
Поиск дублирующийся значений ячеек в целой таблице или одном столбце. Как автоматически найти дубликаты данных и выделить их цветом в большом списке? Как сделать выборку в Excel из списка с условным форматированием.
Эффективное применения комбинации условного форматирования и выпадающего списка для выборки групп данных из таблицы по условию. Как быстро сделать простую выборку одинаковых ячеек?  Выделить активную строку цветом в таблице Excel.
Создание широкого курсора на всю строку для таблиц Excel. Создание крестообразного курсора для комфортного просмотра сложных таблиц с большим количеством строк и столбцов. Сравнение данных в Excel на разных листах.
Сравнение двух таблиц на разных листах с использованием функции ПОИСКПОЗ. Практическое применение функции ЕСЛИОШИБКА в условном форматировании. Сравнение двух таблиц в Excel на совпадение значений в столбцах.
Сравнение двух списков в одном листе на совпадение данных. Выделение цветом отсутствующих значений в двух похожих таблицах по содержанию. Автоформат заголовков столбцов таблицы в Excel.
Практические примеры автоформата заголовков столбцов таблицы и выделение цветом первых двух строк при пересортировке любых значений. Как объединить ячейки с одинаковым значением в Excel.
Примеры разделения на группы повторяющихся значений в ячейках по разным столбцам и строкам. Организация повторяющихся под ряд одинаковых данных. Как выделить каждую вторую строку или столбец в Excel цветом.
Выделение цветом чередующихся строк и столбцов в соответствии с определенными критериями условий. Создание автоформата таблиц пользовательскими средствами. Как выделить защищенные и незащищенные ячейки в Excel.
2 метода определения и выделения незащищенных ячеек таблицы на защищенном и незащищенном листе. Поиск, определение и выделение цветом защищенных от редактирования ячеек. 1 2 3 4 5 6 7

CSS: Оформление HTML таблиц – рамка, размер, выравнивание текста

Табличные данные – информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом

</tr>.

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

table, th, td { border: 1px solid black; }
Попробовать »

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

  • separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
  • collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>
Попробовать »

Размер таблицы

После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding:

th, td { padding: 7px; }
Попробовать »

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

table { width: 70%; }
th { height: 50px; }
Попробовать »

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:

  • top: текст выравнивается по верхней границе ячейки
  • middle: выравнивает текст по центру (значение по умолчанию)
  • bottom: текст выравнивается по нижней границе ячейки
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      .test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>
Попробовать »

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>
Попробовать »

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

tr:hover { background-color: #E0E0FF; }
Попробовать »

Выравнивание таблицы по центру

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin, задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе – за автоматическое выравнивание по центру:

table { margin: 10px auto; }
Попробовать »

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

table { margin: 10px auto 30px; }

Красивое оформление таблиц на CSS