Tworzenie tabeli HTML

Jak wstawić tabelę HTML

Tworzenie tabeli HTML

Posted On:  By:  Comments: Comment

Tabela HTML

<table>

Kolejnym sposobem prezentowania i grupowania danych w języku Html jest tabela. Sposób prezentowania danych w tabeli html jest taki sam jak w każdej innej tabeli, którą znamy z życia codziennego.Tabele tworzymy przy użyciu elementu <table>.

<table>
 
</table>

Tabela HTML – Wiersz

<tr>

Jednak, żeby tabela powstała, musimy do niej dodać jeszcze wiersze oraz umieścić tam komórki. Wiersze do tabeli dodajemy poprzez element <tr> (ang. table row – wiersz tabeli).

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

Tabela HTML – Komórka

<td>

Żeby nasza tabela była kompletna i poprawnie wyświetlała dane, należy jeszcze dodać do niej komórki. Komórki tabeli dodajemy poprzez element <td> (ang. table data, table cell – dane tabeli, komórka tabeli). Do rozwijania skrótu td powszechnie używa się table cell, jednak nazwa pochodzi od table data.

<table>
  <tr>
    <td>Treść</td>
  </tr>
</table>

Nagłówek Tabeli HTML

<th>

Mamy już treść tabeli. Przydałoby się jeszcze oznaczyć czego dotyczą nasze dane. W tym celu posłużymy się nagłówkiem tabeli. Nagłówek taki uzyskujemy poprzez zastosowanie elementu <th> (ang. table heading). Element ten stosujemy tak jak zwykłą komórkę tabeli, czyli <td>. Nagłówki również umieszczamy w wierszach tabeli, czyli elementach <tr>.

1. Nagłówek Kolumny

<table>
  <tr>
    <th>Nagłówek kolumny</th>
  </tr>
  <tr>
    <td>wiersz</td>
  </tr>
 </table>

   
		

		
		

			    	

    	




 
    

        

            Łączenie komórek w HTML 
        

        

                                    

                         

                        Posted On:  By:                                   
                                    Comments: Comment 
                                
                            
                                                                                         
                    

                        

    

        	

    		 			
Tabela HTML – Łączenie komórek


W przypadku, gdy jedna komórka odnosi się do więcej niż jednego nagłówka, możemy dokonać połączenia kilku komórek w jedną, żeby kilkukrotnie nie powtarzać jej wartości. Łączenie nie jest jednak najlepszym określeniem, w przypadku tabeli html. W zasadzie nie dokonujemy łączenia komórek, a zwiększenia ich rozpiętości w pionie lub poziomie.


Łączenie Komórek Kolumnami (w poziomie)


colspan


W celu zwiększenia rozpiętości poziomej komórki używamy atrybutu colspan(ang. column span – rozpiętość kolumnowa komórki). Atrybut ten przyjmuje wartości liczbowe, tzn. przekazujemy tam jaką rozpiętość kolumnową (czyli w poziomie) ma posiadać dana komórka tabeli.


1. Przykład z zastosowaniem atrybutucolspan


<table>
  <tr>
    <th></th>
    <th>Poniedziałek</th>
    <th>Wtorek</th>
  </tr>
  <tr>
    <th>18:00</th>
    <td>Kręgle</td>
    <td>Polo</td>
  </tr>
  <tr>
    <th>20:00</th>
    <td colspan="2">Basen i Sauna</td>
  </tr>
 </table>









Poniedziałek
Wtorek




18:00
Kręgle
Polo




20:00
Basen i Sauna






Łączenie Komórek Wierszami (w pionie)


rowspan


Rozpiętość komórek możemy podawać nie tylko w poziomie, ale również w pionie, łącząc kolejne wiersze. W tym celu posłużymy się atrybutem rowspan (ang. row span – rozpiętość wierszowa komórki). Atrybut ten działa analogicznie do poprzedniego, tylko tym razem zwiększając rozpiętość komórki w pionie.


1. Przykład z zastosowaniem atrybuturowspan


<table>
  <tr>
    <th></th>
    <th>Rodzaj</th>
  </tr>
  <tr>
    <th>Sharknado</th>
    <td rowspan="3">Horror</td>
  </tr>
  <tr>
    <th>Shartopussy</th>
  </tr>
  <tr>
    <th>Piranha 3DD</th>
  </tr>
</table>









Rodzaj




Sharknado
Horror




Shartopussy




Piranha 3DD









   
		

		
		

			    	

    	




 
    

        

            Sekcje tabeli HTML 
        

        

                                    

                         

                        Posted On:  By:                                   
                                    Comments: Comment 
                                
                            
                                                                                         
                    

                        

    

        	

    		 			
Tabela HTML – Sekcje


Każdą tabele można podzielić na trzy sekcje, które definiują nagłówek, ciało, a także stopkę tabeli. Taki podział może przydać się nam przy formatowaniu tabeli, gdy będziemy do niej dodawać zasady CSS. Jednak nie jest on konieczny do wprowadzenia. Jest to raczej kwestia semantyczna.


Tabela HTML – Sekcja nagłówka


<thead>


Sekcję nagłówkową oznaczymy elementem <thead> (ang. table head – sekcja nagłówkowa tabeli). Ten element przyda nam się przy oznaczaniu nazw kolumn przy użyciu elementu <th>.


Tabela HTML – Sekcja główna


<tbody>


W tzw. ciele tabeli znajdzie się jej główna treść, te nasze dane właściwe. Ciało tabeli oznaczymy elementem <tbody> (ang. table body – ciało tabeli).


Tabela HTML – Stopka


<tfoot>


Dane podsumowujące tabelę mogą znaleźć się w stopce tabeli. Sekcję tą oznaczymy elementem <tfoot> (ang. table footer – stopka tabeli).

   
		

		
		

			    	

    	




 
    

        

            Przykładowa tabela HTML 
        

        

                                    

                         

                        Posted On:  By:                                   
                                    Comments: Comment 
                                
                            
                                                                                         
                    

                        

    

        	

    		 			
<table>
  <thead>
    <tr>
      <th scope="col">Rok</th>
      <th scope="col">Przychody</th>
      <th scope="col">Koszty</th>
      <th scope="col">Zysk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">2013</th>
      <td>200'000</td>
      <td>150'000</td>
      <td>50'000</td>
    </tr>
    <tr>
      <th scope="row">2014</th>
      <td>500'000</td>
      <td>300'000</td>
      <td>200'000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Razem</th>
      <td>700'000</td>
      <td>450'000</td>
      <td>250'000</td>
    </tr>
  </tfoot>
</table>








Rok
Przychody
Koszty
Zysk






2013
200’000
150’000
50’000




2014
500’000
300’000
200’000






Razem
700’000
450’000
250’000








To by było na tyle z tabel, jeśli chodzi o czysty html. Natomiast formatowaniem tabeli zajmiemy się podczas kursu CSS i tylko w ten sposób będziemy ją formatować.

   
		

		
		

			    	

    	



   
    





    

        
              
        	

                      

            

            

        

    






	

        

		

            

                        

            

                            

            

                

                

                    Copyright © 2024 Kurs HTML. All rights reserved.