Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

Tabelka w poście (1/2)

||
tutaj treść 1 tutaj treść 1 tutaj treść 1 tutaj treść 1 tutaj treść 1 tutaj treść 1
tutaj treść 2 tutaj treść 2 tutaj treść 2 tutaj treść 2 tutaj treść 2 tutaj treść 2
tutaj treść 3 tutaj treść 3 tutaj treść 3 tutaj treść 3 tutaj treść 3 tutaj treść 3

Czasami zamiast poematu na dwie strony w Wordzie możemy się podjąć innej metody, aby coś przedstawić. Wyniki, analizy i tym podobne. Pierwsze co przychodzi nam na myśl to... tabela! Dziś przedstawiam kod na to, jak takową wprowadzić do posta oraz omówię poszczególne części krok po kroku.


Najpierw tworzymy nowy post - z pewnością każdy wie, jak to zrobić. Następnym krokiem jest zaplanowanie, gdzie tabelka ma być - na początku posta, w środku lub na końcu posta - zależy od własnego uznania. Przyjmijmy, że na początku.

1. Wchodzimy w HTML posta (patrz: rysunek, punkt 1.), po czym wklejamy poniższy kod:

<table style="width: 100%; border: 1px solid #000;"> 
<tr> 
<td>tutaj treść 1</td> 
<td>tutaj treść 1</td> 
<td>tutaj treść 1</td> 
<td>tutaj treść 1</td> 
<td>tutaj treść 1</td> 
<td>tutaj treść 1</td> 
</tr> 
<tr> 
<td>tutaj treść 2</td> 
<td>tutaj treść 2</td> 
<td>tutaj treść 2</td> 
<td>tutaj treść 2</td> 
<td>tutaj treść 2</td> 
<td>tutaj treść 2</td> 
</tr> 
<tr> 
<td>tutaj treść 3</td> 
<td>tutaj treść 3</td> 
<td>tutaj treść 3</td> 
<td>tutaj treść 3</td> 
<td>tutaj treść 3</td> 
<td>tutaj treść 3</td> 
</tr> 
</table>
border: - czyli ramka. Możemy zmienić jej grubość np. z 1px na 5 px.
width: - czyli rozmiar. Najlepiej zostawić tak, jak jest. 100% oznacza, że rozmiar tabelki sam dopasuje się do szerokości posta.

Widzimy wyraźnie, że w kodzie występują 3 zwrotki, a w każdej 6 linijek. Zwrotki symbolizują liczbę wierszy, a linijki są odzwierciedleniem kolumny. Podsumowując: jeżeli chcemy 5 wierszy i np.8 kolumn piszemy: 

<table style="width: 100%; border: 1px solid #000;">
<tr>
<td>tutaj treść 1</td>
<td>tutaj treść 1</td>
<td>tutaj treść 1</td>
<td>tutaj treść 1</td>
<td>tutaj treść 1</td>
<td>tutaj treść 1</td>
<td>tutaj treść 1</td>
<td>tutaj treść 1</td>
</tr>
<tr>
<td>tutaj treść 2</td>
<td>tutaj treść 2</td>
<td>tutaj treść 2</td>
<td>tutaj treść 2</td>
<td>tutaj treść 2</td>
<td>tutaj treść 2</td>
<td>tutaj treść 2</td>
<td>tutaj treść 2</td>
</tr>
<tr>
<td>tutaj treść 3</td>
<td>tutaj treść 3</td>
<td>tutaj treść 3</td>
<td>tutaj treść 3</td>
<td>tutaj treść 3</td>
<td>tutaj treść 3</td>
<td>tutaj treść 3</td>
<td>tutaj treść 3</td>
</tr>
<td>tutaj treść 4</td>
<td>tutaj treść 4</td>
<td>tutaj treść 4</td>
<td>tutaj treść 4</td>
<td>tutaj treść 4</td>
<td>tutaj treść 4</td>
<td>tutaj treść 4</td>
<td>tutaj treść 4</td>
</tr>
<tr>
<td>tutaj treść 5</td>
<td>tutaj treść 5</td>
<td>tutaj treść 5</td>
<td>tutaj treść 5</td>
<td>tutaj treść 5</td>
<td>tutaj treść 5</td>
<td>tutaj treść 5</td>
<td>tutaj treść 5</td>
</tr>
<tr>
</table>
Troszkę to zawiłe, ale mam nadzieję, że nikt się nie pogubił. Gdy już wkleimy sobie kod i dostosujemy go do naszych potrzeb czas na dalszą edycję. Wracamy do NOWY POST (okienko obok HTML). Zamiast "tutaj treść..." piszemy to, co chcemy (dokładniej to, co chcemy mieć w tabelce). Tabela gotowa. Za jakiś czas pojawi się drugi post obrazujący, jak wprowadzić kilka zmian w takiej tabelce - kolory i tym podobne. Mam nadzieję, że instrukcja jest w miarę zrozumiała. Jeżeli macie pytania, zadawajcie! W końcu jestem tu od tego, by wam pomóc.

2 komentarze