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

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; }

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

  • 9 января

Рубрика: Реферат

В рефератах могут встречаться таблицы, наглядно демонстрирующие те или иные показатели. В связи с этим у студентов часто возникают вопросы о том, как именно составляется таблица, как ее подписать или разместить в тексте работы. На все эти вопросы поможет ответить ГОСТ 7. 32-2001, основные положения которого разъяснены в этой статье.

Оформление таблицы

Основные элементы таблицы представлены на рисунке 1.

Рисунок 1 — Основные элементы таблицы

Таблица состоит из строк (горизонтальные ряды) и граф (вертикальные ряды). Последние также называют колонками или столбцами. Голубым цветом в таблице выделена головка, состоящая из заголовков и подзаголовков граф.

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

 

Рисунок 2 — Пример заполненной таблицы

 

 

Рисунок 3 — Зависимые подзаголовки

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

Головку следует отделять от остальных строк с помощью линии, в то время как строки могут и не иметь линий, если это не затрудняет восприятие данных таблицы.

Название таблицы приводится перед ней с левой стороны без отступа так, как это показано на рисунке 1. После слова «таблица» нужно указать ее порядковый номер. При этом нумеровать таблицы можно как по всему реферату, так и в пределах глав. В последнем случае в номере таблицы должен присутствовать также номер самой главы. В приложениях первым указывают номер самого приложения (обычно русская или латинская буква).

Образец:

Таблица 2 — Характеристики крупнейших ГЭС России

Таблица 1.8 — Характеристики крупнейших ГЭС России

Таблица Б.1 — Характеристики крупнейших ГЭС России

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

Расположение в тексте

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

Образец:

В соответствии с таблицей 4…

Из таблицы 3.3 следует…

Как обозначено в таблице В.2…

Рассмотрим характеристики крупнейших российских ГЭС (таблица 1.2).

Работа с большими таблицами

Большая таблица может не поместиться на листе формата А4 или попросту съехать на второй лист. Возникает вопрос, как в этом случае быть с заголовком? Упомянутый выше ГОСТ предписывает оставлять заголовок только для первой части таблицы.

Все остальные части, расположенные на следующих страницах, сопровождают словом «Продолжение» и соответствующим номером таблицы. К примеру, для таблицы 3.1 вы должны написать: «Продолжение таблицы 3.1». При переносе таблицы в ее первой части должна отсутствовать самая нижняя линия, что говорит читателю о наличии продолжения.

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

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

Особенно внимательно отнестись к оформлению таблиц следует студентам технических специальностей. Им нужно знать ряд нюансов по правильному сокращению величин, расположению данных разного формата и т. д. Если вы получаете соответствующее образование, найдите методические пособия по предмету, в которых детально описаны нормы оформления таблиц. Также вам помогут стандарты ЕСКД.


Подпишитесь на нас в ВК.
Публикуем полезные лайфхаки для учёбы

Свойство макета таблицы CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установить различные алгоритмы верстки таблицы:

table.a {
  раскладка таблицы: авто;
ширина: 180 пикселей;
}

table.b {
  макет таблицы: зафиксированный;
  ширина: 180 пикселей;
}

Попробуйте сами »


Определение и использование

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

Подсказка: Основное преимущество макета таблицы: фиксированный; это что таблица рендерится намного быстрее. На больших таблицах пользователи не увидят ни одной части table до тех пор, пока браузер не отобразит всю таблицу. Итак, если вы используете table-layout: исправлено, пользователи будут видеть верхнюю часть таблицы во время загрузки браузера и отображает остальную часть таблицы. Создается впечатление, что страница загружает намного быстрее!

Показать демо ❯

Значение по умолчанию:авто
По наследству: нет
Анимация: нет. Читать про анимированный
Версия: CSS2
Синтаксис JavaScript: объект .style.tableLayout=”fixed” Попробуй


Поддержка браузера

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

Собственность
таблица-макет 14,0 5,0 1,0 1,0 7,0



Синтаксис CSS

table-layout: auto|fixed|initial|inherit;

Значения свойств

Значение Описание Демо
авто Браузеры используют алгоритм автоматической компоновки таблиц. Ширина столбца задается самым широким неразрывным содержимым в ячейках. Контент определяет макет Демонстрация ❯
фиксированный Задает фиксированный алгоритм компоновки таблицы. Ширина таблицы и столбца установлена по ширине таблицы и столбца или по ширине первой строки ячеек. Ячейки в других строках не влияют на ширину столбцов. Если ширины нет в первой строке ширина столбцов делится поровну по всей таблице, независимо от содержимого внутри ячеек Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


Связанные страницы

Учебник по CSS: Таблица CSS

Ссылка на HTML DOM: свойство tableLayout

❮ Предыдущая Полное руководство по CSS Далее ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9008 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

макет таблицы | CSS-трюки – CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

 таблица {
  макет таблицы: фиксированный;
} 

Как поясняется в спецификации CSS2.1, компоновка таблицы в целом обычно является делом вкуса и будет варьироваться в зависимости от выбора дизайна. Браузеры, однако, автоматически применяют определенные ограничения, которые будут определять расположение таблиц. Это происходит, когда 9Свойство 0025 table-layout имеет значение auto (по умолчанию). Но эти ограничения можно снять, если table-layout установить на fixed .

Значения

  • авто : по умолчанию. Автоматический алгоритм браузера используется для определения расположения строк, ячеек и столбцов таблицы. Результирующий макет таблицы обычно зависит от содержимого таблицы.
  • исправлено : с этим значением макет таблицы игнорирует содержимое и вместо этого использует ширину таблицы, любую указанную ширину столбцов, а также значения границ и интервалов между ячейками. Используемые значения столбцов основаны на ширине, определенной для столбцов или ячеек для первой строки таблицы.
  • наследовать : указывает, что значение унаследовано от значения table-layout его родителя
  • .

Чтобы значение фиксированное имело какой-либо эффект, ширина таблицы должна быть установлена ​​на значение, отличное от auto (значение по умолчанию для свойства width ). В приведенных ниже демонстрациях ширина всех таблиц установлена ​​на 100 %, что предполагает, что мы хотим, чтобы таблица заполняла родительский контейнер по горизонтали.

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

См. демо-версию свойства table-layout в CSS от Louis Lazaris (@impressivewebs) на CodePen.

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

Если вы нажмете кнопку «Переключить макет таблицы: фиксированный», вы увидите, как выглядит макет таблицы при использовании «фиксированного» алгоритма. Когда применяется table-layout: fixed , содержимое больше не определяет макет, вместо этого браузер использует любую определенную ширину из первой строки таблицы для определения ширины столбца. Если в первой строке нет ширины, ширина столбцов делится поровну по всей таблице, независимо от содержимого внутри ячеек.

Дальнейшие примеры помогут прояснить это. В следующей демонстрации таблица имеет элемент, первый элемент которого имеет ширину 400px . Обратите внимание, что в этом случае переключение table-layout: fixed не имеет никакого эффекта.

См. демо-версию свойства table-layout в CSS от Louis Lazaris (@impressivewebs) на CodePen.

Это происходит потому, что алгоритм макета по умолчанию, по сути, говорит: «Сделайте первый столбец шириной 400 пикселей и распределите оставшиеся столбцы на основе их содержимого». Поскольку остальные три столбца имеют одинаковое содержимое, изменений не будет. А теперь давайте добавим дополнительное текстовое содержимое в один из других столбцов:

См. демонстрацию свойства table-layout в CSS с шириной столбца и переменным содержимым, сделанную Louis Lazaris (@impressivewebs) на CodePen.

Теперь, если вы нажмете кнопку-переключатель, вы увидите, что столбцы настраиваются в соответствии с фиксированным макетом, независимо от содержимого. И снова происходит то же самое; первый столбец установлен на 400 пикселей, тогда остальные столбцы делятся поровну. Но на этот раз, поскольку один из столбцов имеет дополнительный контент, разница заметна.

Как алгоритм фиксированной компоновки определяет ширину столбцов

Следующие две демонстрации должны помочь понять, что первая строка таблицы помогает определить ширину столбцов таблицы, установленной на table-layout: fixed .

См. демонстрацию макета таблицы CSS с ячейкой в ​​​​строке 1 с заданной шириной от Louis Lazaris (@impressivewebs) на CodePen.

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

См. демонстрацию макета таблицы CSS с ячейкой в ​​​​строке 2 с заданной шириной от Louis Lazaris (@impressivewebs) на CodePen.

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

Преимущества алгоритма фиксированной компоновки

Эстетические преимущества использования макета таблицы : фиксированный должны быть очевидны из приведенных выше демонстраций. Но другим важным преимуществом является производительность. Спецификация называет фиксированный алгоритм «быстрым» алгоритмом, и на то есть веская причина. Браузеру не нужно анализировать содержимое всей таблицы перед определением размера столбцов; ему нужно только проанализировать первую строку. В результате получается более быстрая обработка макета таблицы.

Оставить комментарий