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