English
Запознаване с таблиците в HTML
Таблиците винаги са били удобен начин за представяне на различна информация. В Уеб страниците те се използват много често – за представяне на календари, менюта, организиране на информацията в колони и т.н. В html таблиците се ограждат с таг <table> </table>. В следващите редове ще се запознаем с различни тагове и атрибути, които може да съдържа таблицата.
Ред – <tr> </tr> – "tr" идва е съкращение на английското "Table Row" или "Ред в таблица". Редовете са основния критерий, по който се организират таблиците в html. Всяка таблица трябва да съдържа поне един ред. За да добавим ред в таблица трябва да добавим таговете за ред между <table> и </table>.
Това добавяне на таг в таг се нарича влагане. То се прави по определени правила. Вложеният таг трябва да бъде затворен преди да се затвори външния таг, в който той е вложен. Иначе казано Ако имаме ред в таблицата, то задължително редът трябва да бъде затворен преди да затворим таблицата. Ето и един пример как трябва да изглежда това:
<table><tr> </tr></table>
А ето и един пример, който не отговаря на правилата и ще доведе до грешка и информацията няма да се покаже правилно:
<table><tr></table></tr>
Следващото правило е по-скоро препоръка: Когато се влагат тагове е добре вложените да се слагат на нов ред и един таб навътре. Това се прави с цел по-лесно разбиране на кода на страницата. В следващите два примера ще добавим 3 реда към таблица, като в първият ще подредим таговете, както е препоръчано, а във втория ще ги оставим на един ред.
Пример за добре форматирано влагане:
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
Пример за лошо форматирано влагане:
<table><tr> </tr><tr> </tr><tr> </tr></table>
Дори от този прост пример се вижда, колко по-ясно се открояват редовете в таблицата при горната подредба. Реално всяка страница ще съдържа много повече тагове и ако липсва добро форматира ще бъде изключително трудно четенето на кода на страницата.
Добавяне на данни в талбица
Добавянето на редове все още не е достатъчно, за да имаме видима таблица. Както се досещате всяка таблица освен редове има и колони. В html понятието за колона не популярно. Вместо колони, всеки ред съдържа определен брой клетки. Те се обграждат с таг <td> </td>. "td" е съкращение от английското "Table Data" или "Таблични данни". Както вече казахме те реално представляват отделни клетки.
Сега вече сме готови да добавим данни в първата си таблица:
- Създайте нов html файл и го отворете за редактиране. Ако сте пропуснали как става, можете да проверите в предишния урок;
- Ако използвате Notepad++ изберете меню "Encoding"->"Encode in UTF-8". Ако вашият редактор няма възможност за избиране на encoding по-добре напишете текстът на латиница. В следващи уроци ще покажем как да кажем на браузъра на какъв език е написана страницата, за да се разчита правилно кирилица.;
- Добавете таг за таблица.;/li>
- Вложете 2 тага за ред и ги форматирайте, както описахме по-горе.;
- Във всеки ред добавете по две клетки и ги форматирайте.;
- Във първите клетки на всеки ред напишете кой ред е това поред (1,2).;
- Във вторите клетки на редовете запишете в съответния ред двете си любими ястия.;
- Запазете и отворете в браузър.
Кодът на моята таблица изглежда така:
<html>
<table>
<tr>
<td>1</td>
<td>Печурки на жар</td>
</tr>
<tr>
<td>2</td>
<td>Вафли</td>
</tr>
</table>
</html>
Сега виждате информацията, която сте въвели, но в табличен вид. Вероятно вашата таблица все още няма видими граници на редовете и колоните. Това е така, защото по подразбиране те не се виждат. Как да укажем да се показват, както и други неща прочетете в следващите редове.
Атрибути на таблиците в html
Както вече писахме в предишния урок, атрибутите са елементи, които дават допълнителна информация за даден таг. В случая ще даваме информация за нашата таблица.
Атрибут за html таблица: border – в директен превод от английски означава "граница/ръб". С този атрибут оказваме дебелината на рамката на таблицата. Стойността по подразбиране (когато не използваме този атрибут) е 0, което означава, че границата е невидима. Редактирайте горния пример и добавете новия атрибут и му задайте стойност 2.
Тагът на таблицата ви, би трябвало да изглежда така:
<table border="2">
Запазете промените и вижте как изглежда страницата ви в браузър.
Следващият атрибут за html таблици, който ще разгледаме е "align". Той указва как да се подравни таблицата спрямо екрана. По подразбиране таблиците са ляво подравнени, затова и досега виждахте таблицата си залепена вляво на екрана. Сега ще сменим подравняването на "center". След промяната трябва да получите:
<table border="2" align="center">
Запазете и вижте резултата. Ако искате направете проба и с дясно подравняване – "right".
Последния атрибут, който ще разгледаме сега е "bgcolor". Той служи за смяна на цвета на фона на таблицата.
Задайте му стойност "yellow" и проверете какво ще се получи. Сега тагът на таблицата ви трябва да изглежда така:
<&table border="2" align="center" bgcolor="yellow">
Ако искате можете да изпробвате други цветове за фон (blue, red, green или друг цвят).
За да упражните наученото до момента направете самостоятелно html таблица с 5 реда, като всеки ред има по 3 клетки. В първата клетка записвайте номера на реда. Във втората датата, с която започва тази седмица и продължите с датите от следващите дни. В третата клетка на всеки ред записвайте какъв ден от седмицата се пада съответната дата. Подравнете таблицата си по ваш избор, задайте и задайте цвят за фон и дебелина на рамката и.
Искате ли да научите още много за HTML, CSS и JavaScript? Запишете се на курс при нас! За записване и/или повече информация, свържете се с нас.
Следващ урок: CSS за начинаещи
Предишен урок: HTML за начинаещи.
