Tabele

tabela <table></table> składa się z wierszy oraz kolumn
wiersz <tr></tr> składa się z komórek:
<th></th> - komórka pełniąca funkcję nagłówka
<td></td> - zwykła komókra

zagnieżdzanie tabel - tworzenie tabeli wewnątrz komórki innej tabeli

struktura tabeli

<table>
 <tr>
  <td>
  </td>
 </tr>
</table>


tworzenie tabeli

<table style="width: 100%; border: 2px solid black; ">
 <tr>
  <td style="border: 2px solid blue; ">1</td>
  <td style="border: 2px solid blue; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>


1	1
2	2

struktura długiej tabeli

sekcje:
<thead></thead> - nagłówek tabeli
<tbody></tbody> - główna zawartość tabeli
<tfoot></tfoot> - stopka tabeli

<table>
 <thead>
  <tr>
   <td></td>
   <td></td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td></td>
   <td></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td></td>
   <td></td>
  </tr>
 </tfoot>
</table>

Najlepiej sprzedające się gry w historii (stan na maj 2020):

gra	sprzedaż
Minecraft	200 mln egzemplarzy
Grand Theft Auto V	120 mln egzemplarzy
Tetris (EA Mobile)	100 mln egzemplarzy
	420 mln egzemplarzy

<caption>nagłówek tabeli</caption>

<table>
<caption style="caption-side: top;">Najlepiej sprzedające się gry w historii (stan na maj 2020):</caption>
  <tr>
    <th>gra</th>
    <th>sprzedaż</th>
  </tr>
  <tr>
    <td>Minecraft</td>
    <td>200 mln egzemplarzy</td>
  </tr>
  <tr>
    <td>Grand Theft Auto V</td>
    <td>120 mln egzemplarzy</td>
  </tr>
</table>

wynik kodu

Najlepiej sprzedające się gry w historii (stan na maj 2020):

gra	sprzedaż
Minecraft	200 mln egzemplarzy
Grand Theft Auto V	120 mln egzemplarzy

<table>
<caption style="caption-side: bottom;">Najlepiej sprzedające się gry w historii (stan na maj 2020):</caption>
  <tr>
    <th>gra</th>
    <th>sprzedaż</th>
  </tr>
  <tr>
    <td>Minecraft</td>
    <td>200 mln egzemplarzy</td>
  </tr>
  <tr>
    <td>Grand Theft Auto V</td>
    <td>120 mln egzemplarzy</td>
  </tr>
</table>

wynik kodu

Najlepiej sprzedające się gry w historii (stan na maj 2020):

gra	sprzedaż
Minecraft	200 mln egzemplarzy
Grand Theft Auto V	120 mln egzemplarzy

Wymiary tabeli i komórek

szerokość tabeli

style="width: szerokość jednostka;"
style="width: szerokosc%"

wartość bezwzględna:
pt - w punktach
px - w pikslach
cm - w centymetrach
mm - w milimetrach

wartość względna
% - w procentach

<table style="width: 500px; border: 2px solid black; ">
 <tr>
  <td style="border: 2px solid blue; width: 200px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

wysokość tabeli

style="height: szerokość jednostka;"
style="height: szerokosc%"

<table style="width: 500px; border: 2px solid black; ">
 <tr>
  <td style="border: 2px solid blue; width: 200px; height: 50px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; height: 50px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

<table style="width: 500px; border: 2px solid black; ">
 <tr>
  <td style="border: 2px solid blue; width: 200px; height: 50px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; height: 50px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; height: 100px; ">2</td>
  <td style="border: 2px solid red; height: 100px; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

wysokość całej tabeli:
<table style="width: 500px; height: 200px;">...</table>

<table style="width: 500px; height: 200px; border: 2px solid black; ">
 <tr>
  <td style="border: 2px solid blue; width: 200px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

kolor tabeli

kolor tła tabeli

<table style="background-color: kod-koloru; "></table>
<table style="background-color: orange; "></table>

<table style="width: 450px; border: 2px solid black; background-color: orange; ">
 <tr>
  <td style="border: 2px solid blue; width: 150px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

kolor tła komórki tabeli

<td style="background-color: kod-koloru; "></td>
<td style="background-color: yellow; "></td>

<table style="width: 450px; border: 2px solid black; ">
 <tr>
  <td style="border: 2px solid blue; width: 150px; background-color: yellow; ">1</td>
  <td style="border: 2px solid blue; width: 300px; background-color: orange; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

scalanie komórek tabeli

scalanie komórek tabeli w poziomie

<td colspan="ilość-połączonych-komórek"></td>
<td colspan="2"></td>

<table style="width: 450px; border: 2px solid black; " cellpadding="1" cellspacing="1">
 <tr>
  <td style="border: 2px solid blue; " colspan="2" >1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
</tr>
</table>

wynik kodu

1
2	2

<table style="width: 450px; border: 2px solid black; " cellpadding="1" cellspacing="1">
 <tr>
  <td style="border: 2px solid blue; " >1</td>
  <td style="border: 2px solid blue; " >1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red;" colspan="2">2</td>
 </tr>
</table>

wynik kodu

1	1
2

scalanie komórek tabeli w pionie

<td rowspan="ilość-połączonych-komórek"></td>
<td rowspan="2"></td>

<table style="width: 450px; border: 2px solid black; " cellpadding="1" cellspacing="1">
 <tr>
  <td style="border: 2px solid blue; width: 150px;" rowspan="2">1</td>
  <td style="border: 2px solid blue; width: 300px;">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
	2

<table style="width: 450px; border: 2px solid black; " cellpadding="1" cellspacing="1">
 <tr>
  <td style="border: 2px solid blue; width: 150px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; " rowspan="2">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2

zmiana marginesów komórek tabeli

cellpadding - szerokość wewnętrznego marginesu każdej z komórek tabeli
cellspacing - szerokość odstępu między sąsiednimi komórkami tabeli (przyjmującego kolor tła tabeli)
<table cellpading="szerokość-marginesu-komórek" cellspacing="szerokość-odstępu-między-komórkami"></table>


<table style="width: 450px; border: 2px solid black; " cellpadding="1" cellspacing="1">
 <tr>
  <td style="border: 2px solid blue; width: 150px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

<table style="width: 450px; border: 2px solid black; " cellpadding="10" cellspacing="1">
 <tr>
  <td style="border: 2px solid blue; width: 150px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

<table style="width: 450px; border: 2px solid black; " cellpadding="1" cellspacing="10">
 <tr>
  <td style="border: 2px solid blue; width: 150px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

<table style="width: 450px; border: 2px solid black; " cellpadding="10" cellspacing="10">
 <tr>
  <td style="border: 2px solid blue; width: 150px; ">1</td>
  <td style="border: 2px solid blue; width: 300px; ">1</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; ">2</td>
  <td style="border: 2px solid red; ">2</td>
 </tr>
</table>

wynik kodu

1	1
2	2

określenie położenia zawartości komórki tabeli

wyrównanie w poziomie:
style="text-align: left" - wyrównanie do lewego marginesu
style="text-align: right" - wyrównanie do prawego marginesu
style="text-align: center" - wycentrowanie
style="text-align: justify" - wyrównanie do obu marginesów (wyjustowanie)

wyrównanie w pionie:
style="vertical-align: top" - wyrównanie do górnego marginesu
style="vertical-align: middle" - wycentrowanie
style="vertical-align: bottom" - wyrównanie do dolnego marginesu


<table style="width: 1000px; height: 200; border: 2px solid black; " cellpadding="10" cellspacing="1">
 <tr>
  <td style="border: 2px solid blue; width: 250px; text-align: left;">text-align: left</td>
  <td style="border: 2px solid blue; width: 250px; text-align: right;">text-align: right</td>
  <td style="border: 2px solid blue; width: 250px; text-align: center;">text-align: center</td>
  <td style="border: 2px solid blue; width: 250px; text-align: justify;">text-align: justify</td>
 </tr>
 <tr>
  <td style="border: 2px solid red; vertical-align: top;">vertical-align: top</td>
  <td style="border: 2px solid red; vertical-align: middle;">vertical-align: middle</td>
  <td style="border: 2px solid red; vertical-align: bottom;">vertical-align: bottom</td>
  <td style="border: 2px solid red; ">2</td>  </tr>
</table>

wynik kodu

text-align: left	text-align: right	text-align: center	text-align: justify
vertical-align: top	vertical-align: middle	vertical-align: bottom	2

szerokość, odstępy, krawędzie, kolor tła (STARY Sposób nie używany w HTML5)

atrybuty:
width="500" - określenie szerokości np. tabeli, komórki tabeli (wyrażana w pikselach)
border="2" - szerokość krawędzi obramowania
bgcolor="#eeeeee" - kolor tła zarówno tła jak i poszczególnych komórek
cellpadding="10" - odspęp pomiędzy zawartością komórki a jej obramowaniem
cellspacing="40" - odstęp pomiędzy poszczególnymi komórkami tabeli


<table width="500" border="2" bgcolor="#eeeeee" cellpadding="10" cellspacing="40">
 <tr>
  <td>1</td>
  <td>1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>2</td>
 </tr>
</table>

wynik kodu

1	1
2	2