Меню

Работа с таблицами в MultiCAD NET Часть 1 Создание отчета на основе шаблона



УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

  1. Главная »
  2. Учебные курсы »
  3. Уроки HTML и CSS »
  4. Урок 6. Табличный макет сайта

Уроки HTML и CSS

Урок 6. Табличный макет сайта

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

Табличная верстка сайта – достаточно распространенный на сегодняшний день метод верстки.

Если таблица служит для разметки страницы и оформления дизайна, то она называется макетной.

На рисунке 1 приведен внешний вид сайта, на рисунке 2 – зеленым цветом обозначена таблица, которая является основой макета этого сайта. Для того, чтобы макетную сетку не было видно, используется таблица с невидимой границей. Для этого в теге TABLE задается атрибут border=»0″.

Рисунок 1. Внешний вид сайта

Рисунок 2. Таблица, которая лежит в основе макета сайта

Все многообразие дизайна средствами таблиц можно свести к трем типам:

  1. «Фиксированный» (жесткий),
  2. «Резиновый» дизайн и
  3. Комбинированный из первых двух.

1. «Фиксированный» табличный дизайн (макет) сайта

При «фиксированном» дизайне макет страницы создается на основе таблиц определенной ширины, например макетная таблица шириной 1000px

«1000«>.

Пример 1. Табличная верстка сайта – «фиксированный» дизайн сайта. На рисунке 3 приведен пример кода фиксированного (жесткого) дизайна, в основе которого лежит макетная таблица шириной 1000px. На рисунке 4 – внешний вид этого макета.

Выбор ширины таблицы зависит от ориентации на определенное разрешение мониторов пользователей. Так, для разрешения экрана по горизонтали 1024px – следует брать ширину макетной таблицы 960-980 пикселей, для ширины экрана1280px – ширину макетной таблицы можно взять 1200-1220px и т.д.

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

1. Реализуйте web-страничку на основе рисунков 3 и 4. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

табличная верстка сайта табличный макет сайта уроки html и css

2. «Резиновый» табличный дизайн (макет) сайта

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

Достоинство – используется все доступное пространство экрана, недостаток – при большом разрешении монитора текст сложно читать, т.к. строки получаются длинными, такую строку трудно отслеживать взглядом.

Пример 2. Табличная верстка сайта – «резиновый» дизайн сайта. На рисунке 5 приведен пример кода «резинового» дизайна, в основе которого лежит макетная таблица шириной 100% от экрана. На рисунке 6 – внешний вид этого макета.

табличная верстка сайта табличный макет сайта уроки html и css

1. Реализуйте web-страничку на основе рисунков 5 и 6. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

3. Комбинированный дизайн сайта

Можно сделать гибкую комбинированную структуру сайта (рис. 7) – комбинацию «фиксированного» и «резинового» дизайна, когда ширина некоторых ячеек таблицы задается абсолютным значением (в пикселах), а те ячейки, которые надо сделать резиновыми задаются в процентах от ширины макетной таблицы, либо параметр ширины (width) не указывается вообще. Например:

В вышеприведенном примере ширина «резиновой» ячейки не указана и будет изменяться в зависимости от оставшегося свободного места экрана.

Так, если ширина экрана равна 1600 пикселей, ширина «резиновой» ячейки будет 1600-100-50-150=1300 пикселей.

Если ширина экрана 1280 пикселей, ширина «резиновой» ячейки будет 1280-100-50-150=980 пикселей.

Если ширина экрана 1024 пикселя, ширина «резиновой ячейки» будет 1024-100-50-150=724 пикселя.

Пример 3. Комбинация «фиксированного» и «резинового» дизайна. На рисунке 8 приведен пример кода комбинированного дизайна, в основе которого лежит макетная таблица шириной 100% от экрана. На рисунке 9 – внешний вид этого макета.

1. Реализуйте web-страничку на основе рисунков 8 и 9. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

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

Пример 4. Резиновый сайт с вложенными таблицами

1. Реализуйте web-страничку на основе рисунков 10 и 11. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

Контрольное задание

1. Используя элементы сайта MyHouse.ru создайте две web-страницы с табличным комбинированным макетом сайта.

2. В верхней части сайта разместите бегущую строку.

3. В левой части сайта – меню, в правой части – содержимое web-страницы.

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

Читайте также:  Вывести имена файлов их размеры и даты создания

Источник

1.7. HTML-таблицы

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

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

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

Для всех элементов таблицы доступны ‎глобальные атрибуты, а также собственные атрибуты.

Создание таблиц в HTML

  • Содержание:
  • 1. Как создать таблицу
  • 2. Как создать строки (ряды) таблицы
  • 3. Как сделать ячейку заголовка столбца таблицы
  • 4. Как сделать ячейку тела таблицы
  • 5. Как добавить подпись (заголовок) к таблице
  • 6. Группирование строк и столбцов таблицы и
  • 7. Группировка разделов таблицы
,

и
  • 8. Как объединить ячейки таблицы
  • 9. Атрибуты элементов таблицы
  • 10. Пример создания таблицы
  • 1. Как создать таблицу

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

    Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:

    текст заголовка текст заголовка
    данные данные

    Фигура 1. Внешний вид таблицы без форматирования css-свойствами

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

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

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

    Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения: padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду.

    Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

    2. Как создать строки (ряды) таблицы

    3. Как сделать ячейку заголовка столбца таблицы

    Элемент

    создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством элементов . Для элемента доступны атрибуты colspan , rowspan , headers .

    4. Как сделать ячейку тела таблицы

    5. Как добавить подпись (заголовок) к таблице

    6. Группирование строк и столбцов таблицы

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

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

    С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента доступен атрибут span , задающий количество столбцов для объединения.

    table_primerРис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и

    7. Группировка разделов таблицы

    Элемент

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

    и для указания каждой части таблицы.

    Элемент

    группирует основное содержимое таблицы. Используется в сочетании с элементами

    и .

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

    и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

    8. Как объединить ячейки таблицы

    Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

    table_primer2Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

    9. Атрибуты элементов таблицы

    Таблица 1. Атрибуты элементов таблицы

    Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .

    Атрибут Описание, принимаемое значение
    colspan Количество ячеек в строке для объединения по горизонтали.

    Возможные значения: число от 1 до 999.
    headers Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.

    . .
    rowspan Количество ячеек в столбце для объединения по вертикали.

    Возможные значения: число от 1 до 999.
    span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

    Принимаемые значения: любое целое положительное число.

    10. Пример создания таблицы

    table-htmlРис. 4. Создание меню ресторана с помощью HTML-таблицы

    Источник

    Работа с таблицами в MultiCAD.NET. Часть 1. Создание отчета на основе шаблона

    Этой публикацией мы открывам цикл статей про возможности и особенности API для работы с таблицами в MultiCAD.NET.

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

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

    Каждая розетка отмечена многоуровневой выноской, которая содержит следующую информацию:

    • тип розетки,
    • артикул/производитель,
    • номер помещения для установки.

    Процесс решения поставленной задачи может быть разбит на три этапа:

    1. создание собственного шаблона таблицы для отчета,
    2. загрузка шаблона и последовательное заполнение таблицы данными,
    3. разбивка и постраничная вставка таблицы.

    Создание шаблона таблицы

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

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

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

    В данной реализации ячейки шаблона содержат специальные строки-идентификаторы «#code» и «#room», которые в ходе заполнения таблицы позволят определить какие данные должны быть записаны в конкретную ячейку. Это обеспечит корректное наполнение таблицы даже при возможном изменении количества строк и столбцов в шаблоне.

    Формирование отчета

    Алгоритм построения таблицы отчета можно разделить на следующие шаги:

    1. регистрация команды создания отчета,
    2. выбор на чертеже всех выносок, содержащих описание электрических розеток,
    3. загрузка шаблона, запуск табличного редактора для возможного изменения шаблона,
    4. структурирование данных выбранных объектов для последующей записи в таблицу,
    5. заполнение колонтитулов таблицы (название таблицы, названия столбцов по числу помещений),
    6. заполнение строк таблицы.

    Полный код примера доступен по этой ссылке, а мы остановимся на некоторых ключевых моментах.

    Регистрация команды создания отчета

    Добавим «главный» метод приложения, который является обработчиком команды smpl_CreateTableReport и будет содержать реализацию алгоритма:

    Выбор объектов

    Выбор объектов типа «выноска для многослойных конструкций» осуществляется стандартным способом, с помощью задания фильтра объектов:

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

    Для заполнения таблицы будет удобно записать содержимое всех выбранных объектов в единую структуру данных, подходящую для поиска и сортировки элементов. В данном примере используется структура из вложенных словарей вида: >.

    Загрузка шаблона

    Будем считать, что у нас уже создан шаблон нужной структуры с помощью метода CreateTemplate() и сохранен в файл, например, «C:\template.dat». Загрузка таблицы из внешнего файла осуществляется с помощью метода McTable.LoadFromFile() . Создадим объект таблицы, загрузим для него структуру и наполнение из созданного шаблона, а также вызовем табличный редактор, чтобы дать пользователю возможность внести правки в шаблон, если такие имеются. Конечно, при этом шаблон таблицы должен быть записан в формат, позволяющий сохранить не только содержимое, но и структуру и форматирование таблицы.

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

    Разбивка таблицы на страницы

    Отдельно стоит упомянуть такую полезную возможность при работе с таблицами, как разбивка на страницы. По умолчанию отчет представлен в виде единой таблицы, размер которой при большом количестве строк может быть критичным. Разбить таблицу на страницы с ограничением их высоты можно с помощью метода McTable.PagesTable.SetPageHeight(). Следующий фрагмент кода разобьет таблицу на страницы высотой не более 50:


    Дополнительный способ — вставить принудительный разрыв страницы с помощью метода McTable.PagesTable.SetPageBreak() . Например, чтобы разбить таблицу на две страницы в строке с индексом 7:

    Результатом будет таблица, состоящая из двух страниц:

    Источник

    Создание таблиц в HTML. Все о HTML таблицах

    +++++

    В HTML для создания таблиц используются теги группы table. К ним относятся:

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

    Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

    Простая HTML таблица

    Чтобы создать простую таблицу HTML достаточно 3 тега: , и .

    Далее необходимо определить строки и ячейки — структуру таблицы.

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

    Ячейка 1 Ячейка 2 Ячейка 3
    Ячейка 4 Ячейка 5 Ячейка 6
    Ячейка 7 Ячейка 8 Ячейка 9

    Исходный код простой таблицы HTML

    Заголовки таблицы HTML

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

    Пример HTML таблицы с заголовком th

    Volkswagen AG Daimler AG BMW Group
    Audi Mercedes-Benz BMW
    Skoda Mercedes-AMG Mini
    Lamborghini Smart Rolls-Royce

    Исходный код таблицы HTML с заголовками th

    Объединение ячеек в таблице HTML

    В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

    Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х» , у ячейки или , где x — количество ячеек для объединения.

    Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х» , у ячейки или , где x — количество ячеек для объединения.

    Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

    Пример HTML таблицы с объединением ячеек

    Nissan
    Модель Комплектация Наличие
    Nissan Qashqai VISIA +
    TEKNA +
    Nissan X-Trail ACENTA +
    CONNECTA

    Исходный код таблицы HTML с объединенными ячейками

    Колонтитулы и подпись в HTML таблицах

    HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.

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

    По необходимости к таблице можно добавить подпись. Для этого используйте тег .

    Подпись , при использовании, ставится сразу после открывающего тега .

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

    Комплектации Renault Sandero Stepway

    Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
    Наличие + + +
    Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
    Топливо бензин бензин дизель
    Норма токсичности Евро-6 Евро-6 Евро-5

    Исходный код таблицы с колонтитулами и подписью

    Колонки и группы колонок

    HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

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

    Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число» , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

    Теги и похожи друг на друга, однако тег позволяет использование вложенных тегов , таким образом можно задать стили группе колонок через и конкретной колонке внутри группы через элемент (см. пример ниже).

    Если внутри есть вложенные теги , то атрибут span у тега не ставится, а количество колонок на которые влияет тег определяется вложенными элементами.

    Пример HTML таблицы с разделением на колонки

    ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
    1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
    дизель бензин дизель Топливо
    АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

    Исходный код таблицы HTML c и

    Таблицы в макете страниц сайта

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

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

    Источник