Tworzenie tabel

Bardzo przydatną funkcją przy tworzeniu serwisów internetowych jest tworzenie tabel. Znacznikiem zaczynającym tabelę jest <table>. Jego atrybuty:

• align - wyrównanie tabeli; możliwe wartości: left, right, center
• background - obrazek w tle; wartość: bezwzględny lub względny adres url obrazka
• bgcolor - kolor tła; wartość: tryplet szesnastkowy bądź nazwa koloru
• border - grubość obramowania tabeli podawana w pikselach
• bordercolor - kolor obramowania; wartość: tryplet szesnastkowy lub nazwa koloru
• bordercolordark - ciemniejszy kolor trójwymiarowego obramowania
• bordercolorlight - jaśniejszy kolor trójwymiarowego obramowania
• cellpadding - odstęp między obramowaniem, a zawartością komórki
• cellspacing - odstęp między komórkami
• height - wysokość tabeli podawana w pikselach lub procentach
• valign - wyrównanie w pionie tekstu zawartego w komórkach; wartości: top lub bottom
• width - szerokość tabeli podawana w pikselach lub procentach

Umiemy już zacząć tabelę, teraz należałoby stworzyć jakieś wiersze i komórki. Do stworzenia wiersza służy <tr>. Oto jego atrybuty:

• align - wyrównanie tekstu w komórkach w danym wierszy; wartości: left, right, center, justify, char
• bgcolor - tło wiersza; wartość: tryplet szesnastkowy lub nazwa koloru
• bordercolor - kolor obramowania wiersza tabeli
• bordercolordark - ciemniejszy kolor trójwymiarowego obramowania wiersza
• bordercolorlight - jaśniejszy kolor trójwymiarowego obramowania wiersza

Do stworzenia pojedynczej komórki służy znacznik <td>. Oto jego atrybuty:

• align - wyrównanie tekstu w komórce; wartości: left, right, center, justify, char
• background - obrazek w tle
• bgcolor - kolor tła
• bordercolor - kolor obramowania
• bordercolordark - ciemniejszy kolor trójwymiarowego obramowania
• bordercolorlight - jaśniejszy kolor trójwymiarowego obramowania
• colspan - liczba kolumn, na jakiej rozpięta jest komórka
• height - wysokość komórki
• nowrap - zapobiega łamaniu wiersza; brak wartości
• rowspan - liczba wierszy, na jakiej jest rozpięta komórka
• width - szerokość komórki Przykład użycia tabeli:
  
  

  <table cellpadding="1" cellspacing="0" border="1"> <tr><td colspan="2">tekst 1</td></tr> <tr><td>tekst 2</td><td>tekst 3</td></tr> </table>

  
  
  Używając wielu tabel można stworzyć potrzebny układ strony. Oto najczęściej używany:
  

  Menu - link 1 - link 2 - link 3 - link 4 - link 5 - link 6	Tekst tekst...

  
  
  Oto nieco zmieniony (rozmiary) kod HTML tego układu:

  <table cellpadding="1" cellspacing="0" border="1" width="500"> <tr><td colspan="2" width="800"><br><br></td></tr> <tr><td width="100"> <div align="center"><table cellpadding="1" cellspacing="0" border="1" width="90"> <tr><td>Menu</td></tr> <tr><td>- link 1</td></tr> <tr><td>- link 2</td></tr> <tr><td>- link 3</td></tr> <tr><td>- link 4</td></tr> <tr><td>- link 5</td></tr> <tr><td>- link 6</td></tr> </table></div> </td><td width="400">Tekst tekst...</td></tr> <tr><td colspan="2" width="500"><br><br></td></tr> </table>