Dodawanie i edytowanie tabel w języku HTML

Szybki hosting dla WordPressa

 

Tabele powstały pierwotnie z myślą o przedstawianiu wyników badań. Dzisiaj tabel używa się przeważnie do formatowania wyglądu strony – dzięki nim możesz podzielić elementy na stronie WWW lub nawet całą stronę WWW na kilka kolumn, wierszy i w nich umieszczać treść.

W niedalekiej przeszłości większość stron internetowych posiadała budowę w oparciu na tabelach HTML. Tabele nadal są bardzo popularne – nie tylko ułatwiają prezentację treści strony, np. tabel z parametrami produktu, tabel funkcjonalnych, obliczeniowych, ale także nadal mogą służyć jako szkielet tworzonej strony internetowej lub jej wybranego obszaru.

Jeśli jesteś użytkownikiem usług home.pl lub tworzysz stronę internetową, możesz wykorzystać tabele HTML np. podczas edytowania treści w kreatorze Click Web, w opisach, stronach informacyjnych czy kategoriach sklepu internetowego eSklep, a także podczas dodawania treści w popularnych systemach CMS, jak chociażby WordPress, dostępny w ramach usługi WordPress Hosting SSD.

Z poniższego artykułu dowiesz się w jaki sposób utworzyć tabelę w języku HTML, nadać jej własny styl i wprowadzić do niej treść.

Budowa tabeli

Przy tworzeniu tabel obowiązują pewne zasady:

  • zawsze po otwarciu tabeli <table> powinno znajdować się otwarcie wiersza <tr>, a po nim definicja kolumny <td>. Pomiędzy tymi trzema znacznikami nie można umieszczać tekstu, obrazków itp. To samo dotyczy znaczników zamykających kolumny, wiersze i tabele.
  • Ilość kolumn w każdym z wierszy tabeli powinna być zawsze taka sama.

Struktura tabeli

Tabelę tworzymy za pomocą 3 podstawowych znaczników:

  • <table>…</table> – znacznik otwarcia i zamknięcia tabeli,
  • <tr>…</tr> – znacznik otwarcia i zamknięcia wiersza, stosowany na początku i końcu każdego wiersza,
  • <td>treść komórki</td> – znacznik otwarcia i zamknięcia kolumny, stosowany wielokrotnie w jednym wierszu, w zależności od ilości kolumn, pomiędzy znacznikami otwarcia i zamknięcia wiersza.

Przykładowa tabela, zawierająca 2 wiersze i 2 kolumny:

<table>
   <tr><td>Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td></tr>
   <tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td></tr>
</table>

Komórki nagłówkowe

Stosowane w tabelach jako nagłówek wybranej kolumny lub wiersza. W odróżnieniu od znacznika komórki, dodatkowo nadają treści styl, np. pogrubienie i wyśrodkowanie. Można je stosować w jednym wierszu wraz z innymi znacznikami <tr>, tworząc kolejne komórki, lub zamiast znacznika <tr> zastępując zwykłe komórki <tr> komórkami nagłówkowymi <th>.

<table>
<tr><th>Nagłówek kolumny 1</th><th>Nagłówek kolumny 2</th></tr>
<tr><td>Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td></tr>
<tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td></tr>
</table>

Tytuł tabeli

Tytuł tabeli możemy nadać poprzez wprowadzenie nowego polecenia, występującego zaraz po znaczniku otwarcia tabeli. Użyj polecenia poniżej opisanego polecenia, aby nadać tytuł tabeli. Podaj położenie tytułu względem tabeli, po jej lewej lub prawej stronie, lub na środku nad tabelą.

<caption align=”lokalizacja”>Tytuł tabeli</caption>

  • lokalizacja: left (po lewej stronie tabeli), right (po prawej stronie tabeli) lub center (na środku) a także top (na górze), bottom (na dole)
<table >
<caption align="center">Tabela numer 12</caption>
<tr><td>Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td></tr>
<tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td></tr>
</table>

Parametry wierszy i kolumn w tabeli

Zarówno wierszom w tabeli, jak i kolumnom w tabeli można nadawać parametry.

 <table cellspacing="0" cellpadding="0" border="1" style="width: 100%;">
  <tbody>
  <tr bgcolor="#cc3300">
  <td width="30%" valign="top">
  Kolumna 1 Wiersz 1
  </td>
  <td width="200" align="center">
  Kolumna 2 Wiersz 1
  </td>
  </tr>
  </tbody>
 </table>
  1. Otwierasz tabelę i definiujesz jej parametry.
  2. Otwierasz wiersz i ustalasz kolor tła na czerwony (#cc3300).
  3. Wstawiasz pierwszą kolumnę. Ustalasz, że jest ona szeroka na 30% szerokości całej tabeli oraz jej zawartość będzie wyrównana w poziomie do góry tabeli.
  4. Definiujesz kolejną kolumnę. W tym przypadku ustalasz szerokość na 200 pikseli i całą jej zawartość wyrównujesz w pionie do środka.
  5. Zamykasz wiersz.
  6. Zamykasz tabelę.

Standardowo, pomiędzy znacznikami wprowadzamy treść wybranej komórki. Może to być tekst, liczba a także np. obraz lub hiperłącze.

Łączenie kolumn tabeli w pionie oraz poziomie

Stosując polecenia colspan (poziomo) i rowspan (pionowo) możemy łączyć kilka komórek w jedną. Stosując to polecenie, podajemy ile kolejnych komórek ma zostać połączonych, dodając samo polecenie do pierwszej z komórek, która ma być nim objęta.

Za pomocą poleceń colspan oraz rowspan masz możliwość łączenia kolumn – zarówno w pionie jak i w poziomie.

Przykład 1
  <table cellspacing="0" cellpadding="0" border="1" style="width: 100%;">
   <tbody>
   <tr>
   <td rowspan="2">
   Kolumna 1 Wiersz 1 i 2
   </td>
   <td colspan="3">
   Kolumna 2,3 i 4 Wiersz 1
   </td>
   </tr>
   <tr>
   <td>
   Kolumna 2 Wiersz 2
   </td>
   <td>
   Kolumna 3 Wiersz 2
   </td>
   <td>Kolumna 3 Wiersz 2
   </td>
   </tr>
   </tbody>
  </table>
  1. Otwierasz tabelę.
  2. Następnie otwierasz wiersz.
  3. Wynikiem tego kodu będzie połączenie pierwszej kolumny z wiersza pierwszego z tą samą kolumną w wierszu drugim – rowspan.
  4. W tej linii łączysz trzy sąsiadujące kolumny w jedną – colspan.
  5. Zamykasz wiersz.
  6. Otwierasz drugi wiersz.
  7. Jako że piewsza kolumna tego wiersza uległa połączeniu w poprzednim wierszu, nie musisz już jej tutaj definiować. Pozostały Ci jedynie trzy z czterech kolumn. Tutaj definiujesz pierwszą z nich.
  8. Tutaj drugą.
  9. I trzecią ostatnią. W tym punkcie należy policzyć czy ilość kolumn w obu wierszach się zgadza.
  10. Zamykasz drugi wiersz.
  11. Kończysz tabelę.

 

Przykład 2
Jeśli posiadasz w tabeli 3 komórki i chcesz połączyć 2 i 3, polecenie colspan=”2″ należy użyć w 2 komórce oraz usunąć komórkę numer 3.

<table>
<tr><td>Kolumna 1, wiersz 1</td><td colspan="2">Kolumna 2 i 3, wiersz 1</td></tr>
<tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td><td>Kolumna 2, wiersz 1</td></tr>
<tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td><td>Kolumna 2, wiersz 1</td></tr>
</table>

Jeśli łączymy komórki w jedną całość, należy zwrócić uwagę, aby usunąć nadmiarowe komórki z wiersza lub kolumny. Stosując polecenia łączenia komórek, ubywa w tabeli znaczników <td>. Komórki łączone są według schematu: komórka w której użyto polecenie + następna komórka w wierszu lub kolumnie.

Położenie zawartości komórki

Wprowadzone treści możemy formatować, zmieniając ich położenie względem komórki, np. na środku. Położenie treści można określić względem prawej i lewej, a także górnej i dolnej krawędzi komórki. Polecenia można także używać w stosunku do znacznika wiersza, w ten sposób nadając położenie treści wszystkim komórkom w wierszu.

W tym celu skorzystaj z polecenia aling (prawo, lewo, środek) oraz valign (góra, dół, środek):

  • align=”left” (inne dostępne wartości: right oraz center)
  • valign=”top” (inne dostępne wartości: bottom oraz middle)
<table>
<caption align="center">Tabela numer 12</caption>
<tr><td align="right">Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td></tr>
<tr align="right"><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td></tr>
</table>

Przykład zastosowania

Oto przykład prostej tabeli:

  <table cellspacing="0" cellpadding="0" border="1" style="width:100%;">
   <tbody>
   <tr>
   <td>
   Kolumna 1 Wiersz 1
   </td>
   <td>
   Kolumna 2 Wiersz 1
   </td>
   </tr>
   <tr>
   <td>
   Kolumna 1 Wiersz 2
   </td>
   <td>
   Kolumna 2 Wiersz 2
   </td>
   </tr>
   </tbody>
 </table>
  1. Rozpoczynasz od definicji tabeli – podajesz jej szerokość width (ustalasz, że będzie ona rozciągnięta na całą szerokość okna), podajesz odległości między polami tabelki – cellspacing oraz odległość tekstu od krawędzi pola tabelki – cellpadding. Aby wyswietlić obramowanie tabelki musisz je uaktywnić wpisując cyfrę 1 – border.
  2. Otwierasz definicję wiersza.
  3. Otwierasz kolumnę w pierwszym wierszu i wpisujesz do niej przykładowy tekst.
  4. Podobnie jak wyżej, tylko tym razem operujesz na drugiej kolumnie.
  5. Zamykasz pierwszy wiersz.
  6. Otwierasz drugi wiersz.
  7. Podobnie jak w punkcie 3 tworzysz pierwszą kolumnę w drugim wierszu.
  8. To samo dla drugiej kolumny.
  9. Zamykasz drugi wiersz.
  10. Zamykasz tabelę.

Bezpieczny hosting dla Twojej strony WWW

Przygotowaliśmy miejsce, w którym Twoja strona WWW i poczta e-mail będą się czuły komfortowo.


  • Czy artykuł był pomocny ?
  • Tak   Nie
Szukaj
Generic filters
Tylko dokładne dopasowania
Szukaj w tytułach
Szukaj w treści
Filter by Article Categories
Najczęściej zadawane pytania
Dodatkowe narzędzia hostingu
Statystyki serwera (nowe)
Połączenie SSH
Statystyki serwera (stare)
WebFTP
Autoinstalator
Kontrola wersji (SVN)
Listy mailingowe
Poczta home.pl
Obsługa poczty webmail
Programy pocztowe
Nowa platforma home.pl
Częste pytania
Bezpieczeństwo
Instalacje
Panel klienta
Domeny
Hosting
Serwer Apache
Bazy danych
Certyfikaty SSL
Zamawianie SSL
Instalacja i konfiguracja SSL
Poczta e-mail
Office 365
WordPress Hosting SSD
Dodatki od partnerów
Poprzednia platforma home.pl
Certyfikaty SSL
Zamawianie certyfikatów SSL
Konfiguracja i instalacja SSL
Panel home.pl
Informacje podstawowe
Pulpit
Usługi
Płatności
Profil
Centrum Pomocy
Operacje w Panelu home.pl
Serwery
WebFTP
Informacje podstawowe
Konfiguracja serwerów
Serwery Unix
Serwery Windows
Obsługa baz danych
phpMyAdmin (MySQL)
phpPgAdmin (PgSQL)
myLittleAdmin (MSSQL)
Sklep internetowy eSklep
Panel usługi eSklep
RODO w sklepie internetowym
Panel sklepu internetowego
Pierwsze kroki
Promocja sklepu
Sprzedaż
Pierwsze uruchomienie
Dodatki od partnerów
Asortyment
Klienci
Integracje
Inne integracje
Systemy aukcyjne
Baza produktów
Aplikacje
App store
Aplikacja mobilna
Marketing
Modyfikacja wyglądu
Dokumentacja
Dla deweloperów
Style graficzne
Inne zagadnienia
Raporty i statystyki
Zawartość
Filmy instruktażowe
Konfiguracja sklepu
Rozliczenia i dokumenty
Faktury
Zmiana danych (cesja)
Rozliczenia i płatności
Dokumenty do pobrania
Produkty i usługi
Kreator Stron WWW
eCommerce
Moduły
Ustawienia
Szablony
Nawigacja
Publikacja i dodatki
Szybki start
Prestahosting
Profesjonalne usługi IT
Certyfikaty SSL
Przywracanie danych
Udostępnienie logów
Operacje na plikach i bazach danych
WordPress
Terminal płatniczy SumUp
Wordpress hosting SSD
Office 365
OneDrive
Domeny
Informacje podstawowe
Rejestracja / opłacanie
Konfiguracja domen
Transfer domen
Giełda domen
Dodatki do domen
Serwery VPS
Skrzynki e-mail
Microsoft Exchange
Cloud Email Xchange
Obsługa skrzynek w Panelu home.pl
Jak zarejestrować Personal email lub Business email?
Bezpieczeństwo
eKsięgowość
Reklama internetowa
Reklama Allegro Ads
Tworzenie stron WWW
Contact LEADer
Reklama banerowa Google
Zakupy Google
Google Ads (AdWords)
eKampanie Google
SEMSTORM
Pozycjonowanie
rankingCoach
Baza wiedzy
Facebook
Systemy CMS
Internet w praktyce
Przydatne programy
Konfiguracja programów FTP
Zagadnienia techniczne
.htaccess
mod_rewrite
Kursy i specyfikacje
Kurs HTML
Kurs PHP
Kurs SQL
Rejestracja usług
RODO w home.pl
English
Control Panel
Webmail
FTP
Office 365
WordPress
SSL
Aplikacje w marketplace
SimplySign
SiteLock - ochrona WWW
Dropsuite Email Backup
CCleaner
Antywirus Kaspersky
Dropbox - dysk w chmurze
Płatności PayU
Programy antywirusowe AVAST
Office 365
AVG PC TuneUp
Reklama na start
Google AdWords
Zareklamuj stronę WWW na Facebook
Cloud Email Xchange
Brand24
Microsoft OneDrive
FreshMail.pl
Tłumaczenia online
G Suite - poczta Gmail
Program prowizyjny
Acronis Backup
Informacje podstawowe
Ustawienia dodatkowe
Panel użytkownika
Panel administratora
lub