Sekcja 10: HTML

Lekcja 54. Jak stworzyć tabelę? - 28.05.2022

Wykaz cen kursów
Nazwa	Cena (zł)	Ilość	Producent	Dodatek
HTML
CSS

                             
                                 <table border="1"> 
                                    <caption>Wykaz cen kursów</caption> 
                                    <thead> 
                                        <tr> 
                                            <th>Nazwa</th> 
                                            <th>Cena (zł)</th> 
                                            <th>Ilość</th> 
                                            <th>Producent</th> 
                                            <th>Dodatek</th> 
                                        </tr> 
                                    </thead> 
                                    <tbody> 
                                        <tr> 
                                            <td>HTML</td> 
                                            <td></td> 
                                            <td></td> 
                                            <td></td> 
                                            <td></td> 
                                        </tr> 
                                        <tr> 
                                            <td>CSS</td> 
                                            <td></td> 
                                            <td></td> 
                                            <td></td> 
                                            <td></td> 
                                        </tr> 
                                    </tbody> 
                                 </table>

table>(tr>td{Zawartość$}*5)*3

Zawartość1	Zawartość2	Zawartość3	Zawartość4	Zawartość5
Zawartość1	Zawartość2	Zawartość3	Zawartość4	Zawartość5
Zawartość1	Zawartość2	Zawartość3	Zawartość4	Zawartość5

                    
                        <table> 
                            <tr> 
                                <td>Zawartość1</td> 
                                <td>Zawartość2</td> 
                                <td>Zawartość3</td> 
                                <td>Zawartość4</td> 
                                <td>Zawartość5</td> 
                            </tr> 
                            <tr> 
                                <td>Zawartość1</td> 
                                <td>Zawartość2</td> 
                                <td>Zawartość3</td> 
                                <td>Zawartość4</td> 
                                <td>Zawartość5</td> 
                            </tr> 
                            <tr> 
                                <td>Zawartość1</td> 
                                <td>Zawartość2</td> 
                                <td>Zawartość3</td> 
                                <td>Zawartość4</td> 
                                <td>Zawartość5</td> 
                            </tr> 
                        </table>

<table</table> - tag bierze w klamrę dane które będą składały się na konkretną tabelę
<tr></tr> - wiersz tabeli (w pionie)
<td></td> - komórka tabeli (w poziomie)
<th></th> - oznacza dane składające się na nagłówki kolumn danej tabeli
<caption></caption> - oznacza nagłówek tabeli
atrybut border="1" - oznacza przestrzały atrybut opisujący jaka ma być grubość krawędzi tabeli
<thead></thead> - to co składa się na komórki nagłówka tabeli - podobno ma potem ułatwić formatowanie tabeli w CSS
<tbody></tbody> - to co składa się na tabelę poza table-head tabeli - podobno ma potem ułatwić formatowanie tabeli w CSS

Lekcja 55. Łączenie/rozciąganie komórek w tabelach (colspan/rowspan) - 29.05.2022

Spis treści.

Nazwa	Cena(zł)	Kategoria
C++	49	Programowanie
PHP	39
Java	45
HTML	49	WWW
CSS	39
JavaScript	45
node.js	45
kursy w języku polskim

                            
                                <table border="2"> 
                                    <tr> 
                                        <th>Nazwa</th> 
                                        <th>Cena(zł)</th> 
                                        <th>Kategoria</th> 
                                    </tr> 
                                    <tr> 
                                        <td>C++</td> 
                                        <td>49</td> 
                                        <td rowspan="3">Programowanie</td> 
                                    </tr> 
                                    <tr> 
                                        <td>PHP</td> 
                                        <td>39</td> 
                                    </tr> 
                                    <tr> 
                                        <td>Java</td> 
                                        <td>45</td> 
                                    </tr> 
                                    <tr> 
                                        <td>HTML</td> 
                                        <td>49</td> 
                                        <td rowspan="4">WWW</td> 
                                    </tr> 
                                    <tr> 
                                        <td>CSS</td> 
                                        <td>39</td> 
                                    </tr> 
                                    <tr> 
                                        <td>JavaScript</td> 
                                        <td>45</td> 
                                    </tr> 
                                    <tr> 
                                        <td>node.js</td> 
                                        <td>45</td> 
                                    </tr> 
                                    <tr> 
                                        <td colspan="3" align="center">kursy w języku polskim</td> 
                                    </tr> 
                                </table>

Kategoria	Nazwa	Cena(zł)
Programowanie	C++	49
	PHP	39
	Java	45
WWW	HTML	49
	CSS	39
	JavaScript	45
	node.js	45
kursy w języku polskim

                            
                                <table border="2">
                                    <tr>
                                        <th>Kategoria</th>
                                        <th>Nazwa</th>
                                        <th>Cena(zł)</th>
                                    </tr>
                                    <tr>
                                        <td rowspan="3">Programowanie</td>
                                        <td>C++</td>
                                        <td>49</td>
                                    </tr>
                                    <tr>
                                        <td>PHP</td>
                                        <td>39</td>
                                    </tr>
                                    <tr>
                                        <td>Java</td>
                                        <td>45</td>
                                    </tr>
                                    <tr>
                                        <td rowspan="4">WWW</td>
                                        <td>HTML</td>
                                        <td>49</td>
                                    </tr>
                                    <tr>
                                        <td>CSS</td>
                                        <td>39</td>
                                    </tr>
                                    <tr>
                                        <td>JavaScript</td>
                                        <td>45</td>
                                    </tr>
                                    <tr>
                                        <td>node.js</td>
                                        <td>45</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" align="center">kursy w języku polskim</td>
                                    </tr>
                                </table>

Komórka rozięta oznacza komórkę, która będzię zajmowała większy obszar - czyli obszar trzech komórek w wysokości
atrybut rowspan="4" - oznacza, że od tego miejsca zostaną zajęte cztery pozycje w dół - jeśli oczywiście będzie na to miejsce w ilości dostępnych tagów tr
Jeśli korzystamy z atrybutu rowspan - czyli liczymy ilość podanych jednostek w dół - podspodem należy usunąć dany tag td - ponieważ dana komórka jest domyślnie tworzona przez atrybut rowspan
colspan="3" - tak ten rozciąga daną komórkę w poziomie - tak naprawdę tworzy w pamięci dalsze tagi td w poziomie - tak to przynajmniej sobie wyobrażam. Podając wartość 3 dla atrybutu colspan w tagu td - zostaną stworzone dodatkowe dwie komórki w prawo.
align="center" - stary atrybut - robi się to z poziomu CSS - wyrównuje tekst do środka

Lekcja 56. Tabelki [LEKCJA archiwalna] - 30.05.2022 i

Spis treści.

Nazwa	Cena(zł)	Kategoria
C++	49	Programowanie
PHP	39
Java	45
HTML	49	WWW
CSS	39
JavaScript	45
node.js	45
kursy w języku polskim

                            
                                <table border="2" cellpadding="10" cellspacing="0">
                                    <tr>
                                        <th>Nazwa</th>
                                        <th>Cena(zł)</th>
                                        <th>Kategoria</th>
                                    </tr>
                                    <tr>
                                        <td>C++</td>
                                        <td>49</td>
                                        <td rowspan="3">Programowanie</td>
                                    </tr>
                                    <tr>
                                        <td>PHP</td>
                                        <td>39</td>
                                    </tr>
                                    <tr>
                                        <td>Java</td>
                                        <td>45</td>
                                    </tr>
                                    <tr>
                                        <td>HTML</td>
                                        <td>49</td>
                                        <td rowspan="4">WWW</td>
                                    </tr>
                                    <r>
                                        <td>CSS</td>
                                        <td>39</td>
                                    </tr>
                                    <tr>
                                        <td>JavaScript&l/td>
                                        <td>45</td>
                                    </tr>
                                    <tr>
                                        <td>node.js</td>
                                        <d45</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" align="center">kursy w języku polskim</td>
                                    </tr>
                                </table>

Tabelka testowa
1	2	3

1	2	3
Ja jestem rozpięta na trzy komórki.
Informacja 1	Informacja 2	Informacja 3
Informacja 1		Informacja 3
Informacja 1		Informacja 3

                            
                                <table border="1 cellpadding="10" cellspacing="10" width="100%" height="1000">
                                    <caption>Tabelka testowa</caption>
                                    <thead height="100">
                                        <tr bgcolor="red">
                                            <th>1 </th>
                                            <th>2 </th>
                                            <th>3 </th>
                                        </tr>
                                    </thead>
                                    <tfoot bgcolor="green" height="100">
                                        <tr>
                                            <td colspan="3"> </td>
                                        </tr>
                                    </tfoot>
                                    <tbody bgcolor="gray">
                                        <tr>
                                            <td align="right">1 </td>
                                            <td align="center">2 </td>
                                            <td align="left">3 </td>
                                        </tr>
                                        <tr valign="top">
                                            <td colspan="3" valign="middle" align="middle">Ja jestem rozpięta na trzy komórki.</td>
                                        </tr>
                                        <tr>
                                            <td valign="top">Informacja 1 </td>
                                            <td valign="middle" rowspan="3">Informacja 2 </td>
                                            <td valign="bottom">Informacja 3 </td>
                                        </tr>
                                        <tr>
                                            <td valign="top">Informacja 1 </td>
                                            <td valign="bottom">Informacja 3 </td>
                                        </tr>
                                        <tr>
                                            <td valign="top">Informacja 1 </td>
                                            <td valign="bottom">Informacja 3 </td>
                                        </tr>
                                    </tbody>
                                </table>

table - główny tag, w którym są ze sobą kojarzone wszystkie tagi składające się na daną tabelę.
tr - tag Table Row
td - tag Table Data
th - tag Table Header
tbody - tag Table Body - tag zawierający zbiór tagów środka tabelki - ułatwia edytowanie większej ilości tagów - organizuje pracę
thead - tag Table Head - tag zawierający zbiór tagów nagłówka tabelki - ułatwia edytowanie większej ilości tagów - organizuje pracę
tfoot - tag Table Foot - powinno się dawać zaraz pod thead - bez względu na miejsce wewnątrz tagu table - tworzy najniższy rząd tabelki - oczywiście wewnątrz niego musi być tag tr i td - oraz ilość td musi się zgadzać z ilością komórek w rzędzie. Jeśli ma być pusty powinien zawierać zwrot &nb+sp;.
&nb+sp; znak - zajmuje miejsce w komórce - chociaż nie jest widoczny - nastronie widać pustą komórkę - w środku nie ma plusa - bez niego nie będzie widać z jakich znaków puste pole jest zbudowane.
border="1" atrybut - grubość ramki w pikselach
cellpadding="10" atrybut - wypełnienie komówrki - odległość tekstu wewnąątrz komórki od ramki w pikselach
cellspacing="10" atrybut - obszar pomiędzy komórkami - odległość jednej komórki od drugiej. Ustawienie go na 0 spowoduje, że ramka staje się pojedyńczą linią.
align="center" atrybut - left/center/right - left jest domyślne - określa położenie tekstu wewnątrz komórki w orientacji pionowej - wyrównanie do środka
valign="top" atrybut - vertical align - top/middle/bottom - określa położenie tekstu wewnątrz komórki w orientacji pionowej.
width="1000" atrybut - dana w tagu table - określa maksynalną szerokość wszystkich wierszy razem - dana dla td - określa szerokość komórki. Jeśli jakiś tag wykorzysta np 500 pikseli, podczas gdy w tagu rodzica jest 1000 pikseli to tag mający 500 piksceli będzię zajmował połowę szerokości tableki.
height="1000" atrybut - dana w tagu table - oreśla maksymalną wysokość wszystkich wierszy razem - w td określa wysokość komórki. Jeśli jakiś tag wykorzysta np 500 pikseli, podczas gdy w tagu rodzica jest 1000 pikseli to tag mający 500 piksceli będzię zajmował połowę wysokości tableki.
bgcolor="red" atrybut przestarzały - edytuje/dodaje kolor do tła tekstu
colspan="3" atrybut - rociąga jeden tag td na szerokość np. jak w tym przykładzie trzech komórek. Colspan o wartości 1 nic nie robi. Col - column - kolumna. Span - rozpiętość.
rowspan="3" atrybut - który rociąga komórkę w orientacji pionowej. W niższym/niższych tagach tr - jeśli w tagu td trzecim z koleji tagu tr w którym on się pojawia - w tagach poniżej musi być o jeden tag td mniej - tak aby atrybut rowspan - mógł zająć jego miejsce i zajmie inne tagi td przesówając w prawo.
width="100%" - zawsze będzie wykorzystywało 100% szerokości przeglądarki.

Sekcja 10 - Html|Tabele

Lekcja 54. Jak stworzyć tabelę? - 28.05.2022

Lekcja 55. Łączenie/rozciąganie komórek w tabelach (colspan/rowspan) - 29.05.2022

Lekcja 56. Tabelki [LEKCJA archiwalna] - 30.05.2022 i