Таблици

Таблицата служи за по-нагледно представяне на Вашата информация. Например по-добре изглежда следния ред. Състои се от редове и колони. Всяка клетка от таблицата може да съдържа данни. За да направите таблица трябва да използвате елемента <TABLE> и  </TABLE> за да я завършите. За изграждане на ред в таблицата се използва <TR> и </TR> (TABLE ROW –  ред в таблица) . Колоните във всеки ред се изписват с <TD> и </TD> (TABLE DATA – данни в таблицата), като между тях се вписва съдържанието на клетката. Всъщност, когато използвате <TD> вие създавате една клетка в реда, който сте започнали с <TR>. Колкото елемента <TD> има между два елемента <TR></TR>, толкова колони ще има в таблицата. Когато приключите реда с </TR> автоматично минавате на следващия. Пример за таблица с 2 колони и 3 реда с празни клетки:

<table align=“center“ border=“1″  width=“90%“>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td ></td>
    <td></td>
</tr>
</table>

• Новото тук е допълнението border=“1″ към елемента <TABLE>, както и width=“90%“. Числото в кавичките след border указва дебелината на рамката в пиксели, а това след width широчината на таблицата в проценти от екрана на браузъра. Подравняването на таблицата става с align, като са възможни 3 варианта, „left“ (ляво), „center“ (в средата) и „right“ (вдясно). Особеното при задаването на широчината на таблицата е това, че тя може да се зададе в процент от ширината на екрана, но може да се зададе и в брой пиксели. В първия случай след числото се поставя знака %, а във втория не се поставя. Така че width=“50%“ задава широчина на таблицата половината от екрана, а width=“50″ ширина само 50 пиксела.
  Когато съдържанието на клетката е по голямо от размера и, тя автоматично се разширява във височина за да го побере.
• Вместо <TD> можете да използвате <TH> (Table Heading – заглавие в таблицата). В такъв случай текста в клетката автоматично се центрира в средата и се показва удебелен.
• Цвета на рамката се задава с атрибута bordercolor на елемента <TABLE> и представлява познатото ви вече шестнадесетично число, с което се определя съотношението на трите цвята, червено, зелено и синьо.
• С атрибутите fontcolor и bgcolor задавате цвета на текста и цвета на фона на клетката, реда или на цялата таблица.
• Поставянето на картинка в таблицата става по следния начин:

<table align=“center“ border=“0″ width=“200″>
<tr>
<td valign=“middle“ align=“center“><img border=“0″ src=“back.jpg“ width=“80″ height=“40″></td>
<td valign=“middle“ align=“center“><img border=“0″ src=“forward.jpg“ width=“80″ height=“40″></td>
</tr>
</table>

• Хубаво е сложите border=“0″ след <img, иначе картинката ви ще бъде заградена с рамка, което няма да ви хареса много. Следва src=“ името на файла“ и след това размера му, width=“80″ ширина и height=“40″ височина. Ако искате клетката да съдържа линк към друга страница преди <img.. трябва да добавите познатото ви вече <a href=“http:// …и т.н.“> и да завършите с </a> накрая.
• Параметрите cellpadding и cellspacing указват как да се подравни клетката в таблицата. Първият задава разстоянието от съдържанието на клетката до ръба й, а вторият разстоянието между клетките. Пример:

  <table align=“center“ border=“1″ cellpadding=“10″ cellspacing=“10″ width=“250″>
  <tr>
  <td valign=“middle“ align=“center“><img border=“0″ src=“back.jpg“ width=“80″ height=“40″></td>
  <td valign=“middle“ align=“center“><img border=“0″ src=“forward.jpg“ width=“80″ height=“40″></td>
  </tr>
  </table>

• Ако не зададете параметрите cellpadding и cellspacing, техните стойности по подразбиране са „1“, а не „0“, така че ако не искате да имате разстояние между клетките и ограничаване на разстоянието между съдържанието на клетката и ръба на клетката трябва винаги да пишете cellpadding=“0″ cellspacing=“0″.
• Можете да обединявате редове и колони в таблицата с colspan и rowspan. Числото в кавички показва броя на клетките, които искате да се обединят.  Например colspan=“2″ задава да се обединят съседните 2 клетки хоризонтално, а rowspan=“2″ вертикално. 
• Освен width за широчина на таблицата можете да използвате и параметъра height за да зададете и нейната височина. Стойностите също може да са в проценти от екрана на браузъра или в брой пиксели. Също така може освен цвета на рамката да зададете и цвета на светлата и тъмната част от нея. Това става с bordercolorlight и bordercolordark.