Таблицы данных содержат различную информацию в столбцах и строках для удобства чтения. Данные обычно частично числовые с текстовыми метками. Примером может служить таблица данных, которая показывает, сколько калорий человек съедает каждый день. Создание таблицы данных в режиме онлайн можно выполнить с помощью HTML или более сложного языка браузера CSS. Итоговая таблица выглядит так же, как таблица данных, созданная в электронной таблице или на бумаге. Единственное отличие - это фоновое кодирование, которое не видно, если не смотреть в исходный код. Кодировка может быть создана редакторами HTML, текстом или другими способами. В Интернете есть много сайтов, которые предлагают возможность вводить данные, устанавливать несколько атрибутов и создавать для вас всю кодировку таблиц. Таблицы данных онлайн обычно используются как часть веб-страницы. Таблицы данных часто используются для создания списков товаров с категориями, например, товаров для продажи. Некоторые веб-страницы используют их для отображения статистических данных. Хотя таблицы данных можно использовать в автономном режиме для печати или в отчетах, обычно лучше использовать программное обеспечение для работы с электронными таблицами, такое как Microsoft Office Excel, которое предлагает гораздо больше возможностей для работы с данными. В этом руководстве показано, как создать таблицу данных HTML с помощью Блокнота.
Откройте HTML-редактор или обычный текстовый документ Блокнота, чтобы ввести HTML-код. Блокнот хорошо работает, если вы привыкли кодировать HTML. Редакторы HTML ускоряют выполнение повторяющихся задач, но некоторые из них, например Frontpage, добавляют лишний ненужный код, который может замедлить работу веб-страниц. Лучше всего сначала написать код с помощью редактора HTML, а затем вернуться и отредактировать код вручную, чтобы очистить его.
Определите атрибуты таблицы для границы, ширины, цвета фона и цветов шрифта. Вам необходимо принять во внимание макет веб-страницы, ширину, цвета и другие атрибуты, чтобы таблица была легко читаемой. Вам также необходимо решить, сколько строк и столбцов необходимо для данных. Начните определение атрибутов таблицы. (В нашем примере показано количество калорий, съеденных за обедом и ужином в каждый будний день. Нам нужно три столбца (День, Обед и Ужин) и семь строк (два для ярлыков и по одному для каждого дня недели).
Добавьте рамку вокруг таблицы и ячеек данных. Границы разделяют данные на ячейки для удобного просмотра. Он измеряется в пикселях, и ему можно присвоить значение 0, чтобы не использовать их. Граница в один или два пикселя, как правило, подходит. Тег для границы
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Цвет границы можно изменить с помощью тега
bordercolor = "CHOSEN_COLOR"
в котором используются основные термины цветов, такие как красный или черный или шестизначные шестнадцатеричные коды цветов. Шестнадцатеричные числа предлагают больше цветов. В нашем примере используются border = "2" и bordercolor = "black".
Определите ширину всей таблицы. Он измеряется в пикселях или процентах от размера экрана. Пиксели являются окончательными, а проценты позволяют таблице адаптироваться к разным размерам экрана. Попробуйте оценить ширину по ширине данных в строках. Если позже вы обнаружите, что стол слишком тонкий или широкий, его можно заменить. В нашем примере используется width = "175".
Установите цвет фона ячеек данных. Он отличается от цвета фона страницы, который может обеспечивать хороший контраст. Тег
bgcolor = "CHOSEN_COLOR"
точно так же, как цвет границы. В нашем примере используется bgcolor = "white".
Установите цвет шрифта текста в ячейках. Убедитесь, что цвет хорошо контрастирует с фоном, чтобы он был легко читаемым. Лучше всего всегда работает светлый на темном или темный на светлом. Тег
font = "CHOSEN_COLOR"
Наш пример - font = "black", который хорошо контрастирует с белым фоном.
Запишите полные теги таблицы между стрелкой влево и вправо с пробелом между атрибутами тега и начните с тега таблицы впереди. Порядок тегов не имеет значения, пока «таблица» находится впереди.
Определите ширину столбца. Ширина каждого столбца зависит от ширины всей таблицы. Возьмите ширину таблицы и разделите ее на количество ячеек, чтобы получить столбцы одинакового размера. При необходимости отрегулируйте ширину столбцов, но общая не может превышать ширину таблицы. Когда ширина одной ячейки изменяется, другие ячейки необходимо отрегулировать так, чтобы общая ширина таблицы. (В нашем примере ширина 175 и три столбца в строке, так что разделение на равное примерно 59. Фактическое разделение - 70, 60, 40.)
Начните добавлять свои данные. Сначала начните новую строку и добавьте строку таблицы с кодом
Введите свои данные для ячейки; используя этот код для представления пустых ячеек:
Закройте ячейку с тегом. Тег bordercolor используется для указания цвета границы ячейки, если это необходимо. Если он не указан, используется цвет границы таблицы по умолчанию. Код первой ячейки нашего примера:
Повторяйте создание ячеек данных таблицы, каждую в новой строке, пока все ячейки в строке не будут заполнены. Затем завершите строку тегом. Начните следующий ряд тем же способом, начиная с
Закройте код таблицы с помощью тег. Наш окончательный код таблицы, если он заканчивается после двух строк данных, приведен ниже.
Вещи, которые вам понадобятся
- HTML-редактор или блокнот
- Данные