17. Креирање табела

Табеле се креирају помоћу <table> тага. Табеле се деле у редове (rows) помоћу тага <tr>, а сваки ред се састоји од једне или више ћелија података (data cells) помоћу тага <td>. Ћелије табеле могу да садрже текст, слику, листу, параграф, форму, хоризонталну линији, па чак и нову табелу (табела у табели).
Изглед и елементе табеле можемо прецизно одредити помоћу атрибута чија је једна спецификација као што следи:
  • SUMMARY=Текст (сврха/структура табеле)
  • WIDTH=Ширина (ширина табеле)
  • BORDER=Пиксел (ширина ивице)
  • CELLSPACING=Length (размак између ћелија)
  • CELLPADDING=Length (размак унутар ћелија)
  • ALIGN=[ left | center | right ] (поравнање табеле)
  • BGCOLOR=Color (боја позадине табеле)
Ево једног примера табеле:

<table border="1">
<tr>
<td>ред 1, ћелија 1</td>
<td>ред 1, ћелија 2</td>
</tr>
<tr>
<td>ред 2, ћелија 1</td>
<td>ред 2, ћелија 2</td>
</tr>
</table>
Овако би горња табела изгледала у претраживачу:

ред 1, ћелија 1

ред 1, ћелија 2

ред 2, ћелија 1

ред 2, ћелија 2

Други пример је табела у којој имамо пример заглавља и опис садржаја табеле

Оквир за текст

<TABLE>
  <CAPTION>Заједничке скраћенице на Уснету <br>Common Usenet

Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Скраћеница <br>Abbreviation</TH>
      <TH>Дужа форма <br> Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>
На екрану ћете видети

Заједничке скраћенице на Уснету
Common Usenet Abbreviations
Скраћеница
Abbreviation
Дужа форма
Long Form
AFAIK As Far As I Know
IMHO In My Humble Opinion
OTOH On The Other Hand
Уколико желите жуту позадину табеле онда је изглед кода следећи

<TABLE BGCOLOR="#FFFF00">
  <CAPTION>Заједничке скраћенице на Уснету <br>Common Usenet

Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Скраћеница <br>Abbreviation</TH>
      <TH>Дужа форма <br> Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>

Изглед табеле на екрану је следећи

Заједничке скраћенице на Уснету
Common Usenet Abbreviations
Скраћеница
Abbreviation
Дужа форма
Long Form
AFAIK As Far As I Know
IMHO In My Humble Opinion
OTOH On The Other Hand
Уколико желите ивице у табели онда је код као у следећем примеру

<TABLE BGCOLOR="#FFFF00" border="10">
  <CAPTION>Заједничке скраћенице на Уснету <br>Common Usenet

Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Скраћеница <br>Abbreviation</TH>
      <TH>Дужа форма <br> Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>
Изглед на екрану је следећи

Заједничке скраћенице на Уснету
Common Usenet Abbreviations
Скраћеница
Abbreviation
Дужа форма
Long Form
AFAIK As Far As I Know
IMHO In My Humble Opinion
OTOH On The Other Hand

Вежбе

  1. Промените боју позадине табеле у табели у примеру . Позовите наставника
  2. Промените боју позадине и дебљину ивица у примеру. Позовите наставника
  3. Додајте два нова реда са текстом у табели из примера. Позовите наставника
ċ
17-01.html
(1k)
ОШ ХРШ Информатика и рачунарство,
15.01.2011. 08:21
ċ
17-02-1.html
(1k)
ОШ ХРШ Информатика и рачунарство,
15.01.2011. 09:33
ċ
17-02-2.html
(1k)
ОШ ХРШ Информатика и рачунарство,
15.01.2011. 09:33
ċ
17-02.html
(1k)
ОШ ХРШ Информатика и рачунарство,
15.01.2011. 09:15
Comments