Powrót do strony głównej.

Powrót do moje lekcje programowania.

Sekcja 10 - Html|Tabele

Sekcja zarchiwizowana.

Spis treści:

Lekcja 54. Jak stworzyć tabelę? - 21.11.2022

Spis treści.
lekcja 54 na Udemy
  • Tabela - zestawienie (wykaz) danych rozmieszczonych w rubrykach (komórkach)
  • tr - table row
  • td - table data - informacje w tabeli (komórka - cell), rubryka
  • th - table header (nagłówek)
  • caption - podpis
  •                         
                                Stwórz ręcznie, a potem
                                z pomocą EMMET tabelkę z 3 wierszami i 5 kolumnami -----> table>(tr>td{"Zawartość $"}*5)*3
                                    ---
                                |
                                |
                                |
                                |
                                |
                                Nazwa Cena (zł)
                                ...   44
                            
                        
    Video Kursy
    NazwaCena(zł)
    C++49
    PHP39
    Java45

                            
    <table>
        <caption>Video Kursy</caption>
        <thead>
            <tr>
                <th>Nazwa</th><th>Cena(zł)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>C++</td><td>49</td>
            </tr>
            <tr>
                <td>PHP</td><td>39</td>
            </tr>
            <tr>
                <td>Java</td><td>45</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>
                                
                            

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

    Spis treści.
    lekcja 55 na Udemy
    Video Kursy
    NazwaCena(zł)Kategoria
    C++49Programowanie
    PHP39
    Java45
    HTML49WWW
    CSS39
    JavaScript45
    node.js45
    kursy w j. polskim

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

    Lekcja 56. Tabelki [LEKCJA archiwalna] - 21.11.2022

    Spis treści.
    lekcja 56 na Udemy
    tr stands for Table Row - wiersz tabelki
    td stands for Table Data - informacja w tabelce, reprezentuje komórkę (cell) lub też po prostu rubrykę
    border - ramka
    cellpadding - wypełnienie komórki
    cellspacing - obszar pomiędzy komórkami
    th stands for Table Header - nagłówek tabelki
    align = wyrównanie dostępne opcje: left/center/right
    valign = vertical align = pionowe wyrównanie, dostępne opcje: top/middle/bottom

    col column - kolumna
    span - rozpiętość
    colspan - rozpiętość kolumny
    rowspan - rozpiętość wiersza

    Video Kursy
    Nazwa: Cena brutto (zł)
    © Arkadiusz Włodarczyk
    Video Kurs C++ 39
    Video Kurs PHP 29
    Video Kurs Java 39
    Video Kurs JavaScript 39


                            
                                tabel>caption+(thead>th*2)+(tfoot>tr>td)+tbody>(tr>td*2)*4 
    
    <table border="1" cellspacing="0" cellpadding="10">
        <caption>Video Kursy</caption>
        <thead bgcolor="gray">
            <tr>
                <th>Nazwa:</th>
                <th>Cena brutto (zł)</th>
            </tr>
        </thead>
        <tfoot align="center" bgcolor="gray">
            <tr>
                <td colspan="2">© Arkadiusz Włodarczyk</td>
            </tr>
        </tfoot>
        <tbody align="center" bgcolor="silver">
            <tr>
                <td>Video Kurs C++</td>
                <td>39</td>
            </tr>
            <tr>
                <td>Video Kurs PHP</td>
                <td>29</td>
            </tr>
            <tr>
                <td>Video Kurs Java</td>
                <td>39</td>
            </tr>
            <tr>
                <td>Video Kurs JavaScript</td>
                <td>39</td>
            </tr>
        </tbody>
    </table>
                            
                        
    Nagłówek Główny tabelki
    1 Nagłówek 2 Nagłówek 3
         
    1 2 3
    Informacja 1 Informacja 2 Informacja 3

                            
                                table>caption+(thead>tr>th*3)+(tfoot>tr>td*3)+tbody>(tr>td*3)*2
    
    <table border="1" cellpadding="10" cellspacing="0" height="600">
        <caption>Nagłówek Główny tabelki</caption>
        <thead bgcolor="gray">
            <tr>
                <th>1</th>
                <th>Nagłówek 2</th>
                <th>Nagłówek 3</th>
            </tr>
        </thead>
        <tfoot bgcolor="gray">
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
        </tfoot>
        <tbody valign="top" bgcolor="silver">
            <tr>
                <td>1</td>
                <td align="center" valign="bottom">2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Informacja 1</td>
                <td>Informacja 2</td>
                <td>Informacja 3</td>
            </tr>
        </tbody>
    </table>
                            
                        
    Nagłówek Główny tabelki
    1 Nagłówek 2 Nagłówek 3
    Ja jestem rozpięta jak 3 komórki
    1 2 3
    Informacja 1 Informacja 2 Informacja 3

                            
                                table>caption>(thead>tr>th*3)+(tfoot>tr>td)+tbody>(tr>td*3)*2
    
    <table border="1" cellpadding="10" cellspacing="0">
        <caption>Nagłówek Główny Tabelki</caption>
        <thead bgcolor="gray">
            <tr>
                <th>1</th>
                <th>Nagłówek 2</th>
                <th>Nagłówek 3</th>
            </tr>
        </thead>
        <tfoot bgcolor="gray" align="center">
            <tr>
                <td colspan="3">Ja jestem rozpięta jak 3 komórki</td>
            </tr>
        </tfoot>
        <tbody valign="top" bgcolor="silver">
            <tr>
                <td>1</td>
                <td align="center" valign="bottom">2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Informacja 1</td>
                <td>Informacja 2</td>
                <td>Informacja 3</td>
            </tr>
        </tbody>
    </table>
                            
                        
    1
    2 2
    3

                            
    
                                table>(tr>td*2)*3
    
    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td colspan="2" align="center">1</td>
        </tr>
        <tr>
            <td>2</td>
            <td rowspan="2" valign="top">2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
    </table>
                            
                        
    BANER!!!
    MENU TREŚĆ

                            
    <table border="1" cellpadding="10" cellspacing="20" width="100%">
        <tr>
            <td colspan="2" align="center">BANER!</td>
        </tr>
        <tr height="500">
            <td width="10%" valign="top" align="center">MENU</td>
            <td valign="top">TREŚĆ</td>
        </tr>
    </table>