Запознаване с таблиците в 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>

Сега виждате информацията, която сте въвели, но в табличен вид. Вероятно вашата таблица все още няма видими граници на редовете и колоните. Това е така, защото по подразбиране те не се виждат. Как да укажем да се показват, както и други неща прочетете в следващите редове.