HTML таблици

HTML таблици

Запознаване с таблиците в 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” или “Таблични данни”. Както вече казахме те реално представляват отделни клетки.

Сега вече сме готови да добавим данни в първата си таблица:
1 Създайте нов html файл и го отворете за редактиране. Ако сте пропуснали как става, можете да проверите в предишния урок
2 Ако използвате Notepad++ изберете меню “Encoding”->”Encode in UTF-8″. Ако вашият редактор няма възможност за избиране на encoding по-добре напишете текстът на латиница. В следващи уроци ще покажем как да кажем на браузъра на какъв език е написана страницата, за да се разчита правилно кирилица.
3 Добавете таг за таблица
4 Вложете 2 тага за ред и ги форматирайте, както описахме по-горе.
5 Във всеки ред добавете по две клетки и ги форматирайте.
6 Във първите клетки на всеки ред напишете кой ред е това поред (1,2)
7 Във вторите клетки на редовете запишете в съответния ред двете си любими ястия
8 Запазете и отворете в браузър.

Кодът на моята таблица изглежда така:

<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 за начинаещи

Вижте още уроци за начинаещи!

Върни се от “HTML таблици” към началната страница на Национална Академия по разработка на софтуер.

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad