Оформление таблиц в дипломной работе по ГОСТу

Оформление таблиц в дипломной работе по ГОСТу Вклады Хоум Кредит Банк

Что не так с margin и как оформить отступы для элементов таблицы

Как видно на иллюстрации в начале статьи, между главным заголовком и секцией <tbody>, а также между остальными секциями <tbody>, есть отступы. Можно подумать, что они определяются свойствами margin-top для <tbody>, но это не так.

Если попытаться использовать margin-top для оформления <tbody>, <thead> или <tr>, добиться отступов не удастся. Чтобы margin заработали, можно изменить свойство display, которое менять опасно, так как изменения могут нарушить форматирование таблицы. Поэтому лучше воспользоваться альтернативными решениями, которые описаны ниже.

Виды таблиц

Таблицы принято разделять на два вида: простые и сложные.

Пример простой таблицы

Пример сложной таблицы

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

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto, как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

В данном примере для всех таблиц на странице задано выравнивание по центру.

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top, как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Рис. 7. Выравнивание текста в ячейках

Где располагаются таблицы

Если таблица больше половины листа формата А4, ее переносят в приложении. Ссылка на таблицу в тексте обязательна, и когда она располагается в тексте, и когда в приложении.

Оформление ссылки на таблицу:

“…информация в Таблице 3” — когда таблица находится в тексте

“…данные представлены в Таблице В.3” — когда таблица располагается в приложении. В этом случае “В” — наименование приложения, а “3” — порядковый номер таблицы

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>).

Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse.

Пример 6. Применение свойства border-collapse при создании рамок таблицы

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.

а — свойство не установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Читайте также:  Вклады: что это такое, виды вкладов и их параметры

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

Как оформлять ячейки таблицы

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

Нужны марджины, а не паддинги

Как правильно разорвать и перенести таблицу на другой лист

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

В случае, когда таблица занимает много места и требует переноса на другой лист, продублируйте наименование и часть под названием головка, содержащую в себе заголовки и подзаголовки.

Пример переноса таблицы на следующую страницу

В случае, когда таблица занимает много места и требует переноса на другой лист, продублируйте наименование и часть под названием головка, содержащую в себе заголовки и подзаголовки.

После таблицы размещают вывод по ней.

Как применить к элементам таблицы border-radius

Задача: добавить к секциям <tbody> границы и применить к ним border-radius. Напрямую это сделать невозможно — border и border-radius не работают с <tbody>.

//1.Приходитсяиспользоватьсвойствоbox-shadow//border-radiusнеработаетс<tbody>..section-step{border-radius:0.25em;//1box-shadow:1px#ccc;//1}

Пример выше показывает, как с помощью box-shadow добиться практически такого же результата, как с помощью border при работе с нетабличными элементами.

Как применять z-index к элементам таблицы

Проблемы с box-shadow

Наименование и нумерация

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

Таблица 3.1, где 3 – номер раздела главы, а 1 – порядковый номер таблицы.

Внимание! Если таблица в тексте одна — нумеровать ее не нужно.

Название — краткое изложение содержания материала, находящееся над таблицей по левому краю в формате: Таблица Номер таблицы – Наименование таблицы.

Пример оформления названия таблицы

Оформление таблиц в дипломной работе по госту

В дипломной много таблиц? Как их грамотно оформить и каких придерживаться правил? Отведите 11 минут на прочтение статьи, и узнаете, как сделать так, чтобы у преподавателя не возникло претензий к оформлению.

В-первую очередь, это удобный способ быстро и легко донести информацию до читателя. Особенно если это даты и любые другие числовые значения. Так вы говорите читателю: смотри, я сделал так, чтобы было проще читать. Согласитесь, несколько строк или абзацев с цифрами воспринимать нелегко.

Во-вторых, в отдельных работах они просто необходимы. Это дипломные по экономике, математике, физике и другим точным наукам и связанным с ними дисциплинам. Благодаря им удобно демонстрировать проект, проводить сравнительный анализ качественных и количественных показателей.

В самой работе лучше размещать небольшие таблицы, а объемные — выносить в приложения.

Как оформлять таблицы в дипломе — определяет ГОСТ 7.32-2017.

С учетом этого и некоторых других стандартов вузы разрабатывают рекомендации, требования и оформляют их в виде методических рекомендаций. Методички есть на кафедре. Святой долг студента — сходить и попросить их ДО начала работы над дипломной.

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

Главный документ — ГОСТ, но его для грамотного оформления работы недостаточно.

В стандарте много непонятной информации. Я выбрал самое важное. Таблица должна:

  • размещаться после текста, который она поясняет (приложений не касается);
  • иметь ссылку и быть пронумерованной;
  • называться коротко (максимум пять слов). Главное — раскрыть ее содержание;
  • быть подписана по левой стороне вверху, где начинается графическая часть. Отступать от края не нужно. Озаглавливать нужно после тире.

оформление таблиц в дипломной работе

О том, как подписывать таблицы в дипломе, подробнее можно прочитать в ГОСТе;

  • иметь ориентацию, при которой не нужно поворачивать лист, чтобы прочитать информацию;

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

  • иметь минимальную высоту строк — 8 мм.

Кроме того:

  • головка боковика не разделяется диагональными линиями;
  • не нужно делать отдельную графу для номера пунктов. Номер по порядку можно обозначать в боковике (но не рядом с цифрами).
Читайте также:  Расчет аннуитетных платежей по кредиту в Excel: скачать кредитный калькулятор

Чтобы перенести ее на следующую страницу, не нужно проводить внизу на предыдущей черту ограничения.

Пример правильной таблицы по ГОСТу с переносом

оформление таблиц в дипломной по ГОСТу

При разрыве номер по порядку и название остаются на предыдущей странице. На следующей напишите: «продолжение» или «окончание», как этого требует ГОСТ 1.5-2001.

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

Нужно поменять толщину и формат линий? Это можно сделать в вордовском табличном конструкторе.

Но что, если граф не одна, и даже не две? Поделите их поровну и поместите одна над другой.

Если переносите табличные строки за пределы страницы — повторяйте шапку. Если переносите графы — повторяйте вертикальный боковик.

Следите за тем, чтобы разделы, главы и параграфы заканчивались не таблицами, а какой-либо текстовой информацией.

Давайте номера арабскими цифрами.

Пронумеровать можно одним из трех вариантов:

  1. Сквозной нумерацией. По мере появления в тексте.
  2. Отдельно в каждой главе. Укажите номер раздела/главы и номер таблицы через точку: 2.5 или 4.3.
  3. По размещению в приложениях. А.1.4 (в приложениях они обозначаются буквами).

Если таблица одна, ее можно обозначить так: Таблица 1 (или вариант А.1 для приложений).

Отдельные листы с табличной информаций включаются в общую нумерацию диплома.

В дипломной работе важно разобраться и с текстовой информацией.

Важно:

  • шрифт названия должен совпадать со шрифтом текста работы;
  • межстрочный интервал можно менять (уменьшать), но не делайте его слишком мелким;
  • заглавия граф/разделов начинайте с большой буквы, подзаголовки — с маленькой;
  • размещение заголовков — горизонтальное (но ГОСТ предлагает и по вертикали);
  • общие для всей информации единицы измерения прописываются в головке (как показано на первом скриншоте);
  • выравнивание текста в столбцах выбирайте по центру;
  • убедитесь, что цифры (равнозначные) в графах находятся на одной вертикали;
  • активно используйте сокращения, предусмотренные ГОСТом: они позволят уменьшить объем текста;
  • если в столбцах встречается одинаковый текст (для какого-то значения), то в первом случае его нужно указать, а в последующих — заменить символом кавычек.

Цифры и специальные символы кавычками не заменяются.

  • если данных нет, то пустое пространство заполняют длинным тире.

Если в методичке ничего не сказано по поводу фона ячеек, то можете дерзнуть и использовать любую яркую заливку. Кстати, иногда это может быть и практично: если нужно установить соответствие по цвету с данными из диаграммы.

Не уверены, что есть желание и возможность разбираться в тонкостях работы с таблицами самостоятельно? Воспользуйтесь помощью опытных экспертов Studently.

Оформление текста внутри таблицы

Важные моменты при заполнении таблицы:

  • шрифт в таблице не отличается от того, каким написан текст работы, но допускается уменьшение размера. Главное условие: текст разборчив и хорошо читаем;
  • заголовки граф и строк заполняются с прописной буквы, а подзаголовки – со строчной;
  • в конце заголовков и подзаголовков точки не ставятся;
  • заголовки таблиц выравнивают по центру, а подзаголовки – по левому краю;
  • если в строке повторяет одно и то же слово, его заменяют кавычками, но нельзя заменять кавычками цифры и формулы;

Важно! В таблице запрещается сокращать слова, за исключением названий нормативных документов, таких как ГОСТ и др.

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding, которое работает с селектором td или th, как показано выше в примерах 3 и 4.

Псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы.

.section::before{height:1em;display:table-row;content:'';}

В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями <tbody>.

Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border.

Распространенные ошибки при оформлении

Таблицы одинаково оформляются в любых научных работах, поэтому преподавателям и научным руководителям мелкие недочеты в оформлении сразу бросаются в глаза.

  • при переносе таблицы не указаны: нумерация, название и строки заголовков;
  • сокращено само слово “Таблица”;
  • повторяющиеся цифры заменяются кавычками;
  • использован инструмент заливки цветом для заголовков;
  • в тексте отсутствуют ссылки на таблицы;

Важно! Глава диплома или курсовой никогда не завершается таблицей.

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing, добавляя его к селектору table (пример 5).

Читайте также:  Заключен договор подряда 19.02.2015 на выполнение строительных работ. Срок действия - до 31.08.2017, а в части оплаты - до полного исполнения обязательств по договору. Гарантийный срок установлен договором - два года с момента подписания акта по форме КС-14, этот акт не подписан, но при этом суммы гарантийных удержаний за фактически выполненные работы выплачены подрядчику полностью.Работы по договору не были выполнены в полном объеме. 15.05.2017 к договору подписано дополнительное соглашение, один из пунктов которого сформулирован так: "продлить срок действия договора до 31.08.2018", и приложен новый график выполнения работ. Часть работ также не была выполнена до 31.08.2018.Является ли договор действующим? Можно ли понудить подрядчика выполнить эти работы за пределами срока договора и графика при условии его виновности в неисполнении обязательств по договору? Можно ли понудить подрядчика выполнить эти работы за пределами срока договора и графика при условии его невиновности в неисполнении обязательств по договору - в связи с невозможностью проезда к объекту по вине заказчика? Считается ли обязательство подрядчика прекращенным с момента окончания срока договора в редакции дополнительного соглашения, если в договоре это прямо не предусмотрено (пункт с формулировкой "обязательства сторон по окончании договора прекращаются")?

Пример 5. Использование border-spacing

table {
 border-spacing: 3px; /* Расстояние между ячеек */
}
thead  th {
 background: #e08156; /* Цвет фона заголовка */
 color: #333; /* Цвет текста */
}
td, th {
 padding: 5px; /* Поля в ячейках */
 background: #4c715b; /* Цвет фона ячеек */
 color: #f5e8d0; /* Цвет текста */
}

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse, то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Свойство border

Самый простой способ получить отступы без использования margin — применить к <tbody>border-top: 1 em.

// Это нужно, чтобы работал border-top
.table {
  border-collapse: collapse; // 1
  border-spacing: 0;
}

.section {
  border-top: 1em solid transparent;
}

Все секции <tbody>, у которых должны быть отступы, имеют класс .section. Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse.

Структура таблицы

Эталонный вариант таблицы

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов.

Пример 3. Цвет фона

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

Результат данного примера показан на рис. 2.

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).

Ширина таблицы

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

Пример 1. Ширина таблицы в процентах

table { width: 100%; }
.tbl-medium { width: 60%; }
.tbl-small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

Вывод

Таблицы — представление данных в удобном для восприятия формате.

Главные принципы оформления таблиц:

  • номер таблицы и заголовок указываются над каждой таблицей;
  • примечание или вывод к таблице располагаются под таблицей;
  • таблицы должны быть четко отформатированы, с минимальным количеством горизонтальных и вертикальных линий для разделения основных элементов;
  • если таблица занимает более одной страницы, заголовки таблицы повторяются вверху каждой новой страницы;
  • ссылки на каждую таблицу указываются в тексте;
  • не размещайте таблицу в середине предложения. Завершите предложение, а затем вставьте таблицу.

Неправильное оформление таблиц в научной работе влияет на оценку, а также усложняет восприятие материала.

Заключение

Чтобы сделать таблицы визуально привлекательными, приходится использовать неочевидные трюки CSS. Но этим и хороши CSS — с их помощью можно решить практически любую задачу по оформлению веб-элементов.

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

Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Оцените статью
Adblock
detector