Таблиците играят важна роля, когато става въпрос за представяне на данни в организиран формат. В този урок ще научиш как да създаваш основни HTML таблици и как да използваш основните тагове за оформлението и структурата.
Стъпка по стъпка ръководство
Нека започнем с изграждането на твоята първа таблица! Първо, трябва да знаеш, че основният таг за таблица е. Този таг обгръща цялата таблица.
Сега добавяме ред. Всеки ред се определя с тага, който означава "табличен ред". В този ред все още няма данни, така че той за момента остава празен. Можеш да си представиш, че всеки ред може да предостави място за няколко колони.
Сега е време да добавим някои данни в таблицата. За целта използваме тага и добавяме съответните стойности. Да предположим, че първото име е „Ян“, имейлът е „support@programmierenlern.info“ и датата на раждане е 23.06.1982. твоят ред трябва да изглежда по следния начин:
Увери се, че таблицата сега изглежда по-добре. Можеш да добавиш толкова редове, колкото желаеш, просто като използваш повече тагове и. Нека добавим още един служител. Нека го наречем „Джо Аверадж“ и неговият имейл може да бъде „joe@average.com“.
Когато сега презаредим таблицата, ще забележим, че тя расте и всички въведени данни са видими. Структурата е важна, тъй като ти предоставя ясен преглед на информацията.
Какво ще стане, ако желаеш да добавиш футер в края на таблицата, например за авторски права? Тук влиза в действие colspan. С colspan можеш да посочиш колко колони да заема една клетка. За да поставиш авторски права над всичките три колони, пишеш: Авторски права 2015 coding-geeks.de.
След добавянето на този футер трябва да провериш представянето. Идеята е футерът да е позициониран под колоните и да представя данните по прегледен начин. В този случай футерът няма собствена колона и следователно трябва да се постави над другите три колони.
Ако сега намалиш colspan на стойност две, можеш да добавиш и втори знак. Да предположим, че искаш да представиш „Кодиращи гикове“ в нова колона. Използвай отново тага, като правилно приложиш colspan.
Ако следваш всичките тези стъпки, си научил как да създаваш основни HTML таблици. Но визуалното оформление трябва винаги да се осъществява с CSS, за да се подобри оформлението и удобството за ползване. Това включва отделно оформяне на съдържанието и оформлението, за да имаш повече гъвкавост при дизайна на твоите уебсайтове в бъдеще.
Резюме - Основи на създаването на HTML таблици
Ти научи структурата и използването на HTML таблици, започвайки от изграждането и разположението на данни до футера. Сега можеш да представяш прости таблични данни на твоя уебсайт.
Често задавани въпроси
Какви са основните тагове за HTML таблици?Основните тагове са,, за заглавия и за данни.
Мога ли да създам неограничен брой редове и колони в таблица?Да, теоретично можеш да добавиш много редове и колони, но е важно да имаш предвид четливостта.
Как да оформям таблиците стилово?Използвай CSS за оформлението, вместо директни HTML атрибути като border.
Какво означава colspan?Атрибутът colspan позволява на клетка да се простира над няколко колони.
Защо CSS е по-подходящо за оформлението от HTML атрибути?CSS разделя съдържанието от стиловото оформяне и така предлага повече гъвкавост и възможности за дизайна.
