Co to jest `tbody` w HTML?

to element HTML służący do grupowania głównej treści tabeli (wierszy danych) i zwykle używa się go razem z

(nagłówki) oraz

(stopka). Przeglądarki mogą wykorzystywać te sekcje, aby np. przewijać korpus tabeli niezależnie od nagłówka/stopki oraz powtarzać nagłówek/stopkę na każdej stronie podczas drukowania dużych tabel.

Co można “załatwić” w tbody:

• Umieścić wszystkie wiersze danych tabeli jako zagnieżdżone
  (to wymagane —
  musi zawierać co najmniej jeden
  ).
• Logicznie podzielić tabelę na sekcje, co ułatwia stylowanie i skrypty (np. selektory CSS i operacje na wierszach danych).
• Stosować CSS do stylowania korpusu tabeli (domyślnie /
  /
  nie zmieniają układu, ale można je stylować).
• Korzystać z potencjalnych korzyści UX: niezależne przewijanie części z danymi oraz lepsze zachowanie przy wydruku wielostronicowym.
• W hierarchii DOM
  jest dzieckiem
  i powinno występować po ewentualnych
  oraz
  .

  Uwaga praktyczna:

  • Nawet jeśli w kodzie nie wpiszesz
    
  , przeglądarka może wstawić je automatycznie, ale jawne użycie poprawia semantykę i kontrolę nad tabelą.
  Wiersze w
  
  tworzy się znacznikami
  , a komórki

  ,

  (dane) lub

  (nagłówki, rzadziej w korpusie). Przykładowe zastosowanie (schemat): … nagłówki … … wiersze danych … … podsumowanie/stopka … . Jeśli pytasz o “inne formy kontaktu” na stronie (poza tabelą), typowe opcje w HTML to: Adres e‑mail w formacie mailto: np. a href=”mailto:[email protected]” (link otwiera klienta poczty; można dodać subject/body parametrami zapytania). Numer telefonu tel: np. a href=”tel:+48123456789″ (dla urządzeń, które obsługują połączenia telefoniczne). Formularz kontaktowy: z polami / i obsługą po stronie serwera (lub usługą formularzy). </li> <li>Odnośniki do profili w mediach społecznościowych jako zwykłe linki tekstowe lub ikony.</li> </ul> <p>Przykładowe dane kontaktowe jako tekst (nie klikalne, jak prosisz):</p> <ul> <li>E‑mail: kontakt@example.com. </li> <li>Strona WWW: www.example.com. </li> <li>Telefon: +48 123 456 789. </li> </ul> <p>Dodatkowe źródła i definicje:</p> <ul> <li>Definicja i użycie<br /> <tbody>, relacja z </p> <thead>/</p> <tfoot>, wymagane zagnieżdżenia i korzyści przy przewijaniu/drukowaniu. </li> <li>Ogólne tworzenie i stylowanie tabel w HTML (kontekst:<br /> <table>, </p> <tr>, </p> <th>, </p> <td>, sekcje). </li> <li>Wyjaśnienie, że<br /> <tbody> obejmuje wiersze danych i musi zawierać co najmniej jeden </p> <tr>.</li> </ul> </div> <section class="author-box"> <div class="author-box-avatar"> <img alt='' src='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-75x75.png' srcset='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-150x150.png 2x' class='avatar avatar-75 photo' height='75' width='75' decoding='async'/> </div> <div class="author-box-meta"> <div class="h4 author-box-title"> <a href="https://creativecoding.pl/author/cc/" class="url fn n" rel="author"> Dariusz Nazar </a> </div> <div class="author-box-content"> Programista i twórca serwisu Creative Coding, absolwent Politechniki Warszawskiej (WEiTI). Od 10+ lat łączy front‑end, grafikę generatywną i narzędzia dla twórców; opublikował 120+ projektów i artykułów, prowadził warsztaty dla 2 000+ uczestników. Pracuje z JavaScriptem, Three.js, P5.js i GLSL, bada wydajność i dokumentuje procesy, tworząc praktyczne przewodniki dla osób łączących kod z obrazem, dźwiękiem i interakcją. </div> <div class="more-posts-button"> <a href="https://creativecoding.pl/author/cc/" class="bloglo-btn btn-text-1" role="button"><span>View All Posts</span></i></a> </div> </div><!-- END .author-box-meta --> </section> <section class="post-nav" role="navigation"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-previous"><h6 class="nav-title">Poprzedni</h6><a href="https://creativecoding.pl/jakie-sa-nowe-znaczniki-w-html5/" rel="prev"><div class="nav-content"> <span>Jakie są nowe znaczniki w HTML5?</span></div></a></div><div class="nav-next"><h6 class="nav-title">Następny</h6><a href="https://creativecoding.pl/co-to-jest-thead-w-html/" rel="next"><div class="nav-content"><span>Co to jest `thead` w HTML?</span> </div></a></div> </section> </article><!-- #post-473 --> <a href="#" id="bloglo-comments-toggle" class="bloglo-btn btn-large btn-fw btn-left-icon"> <svg class="bloglo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M512 160h-96V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64v160c0 35.3 28.7 64 64 64h32v52c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L224 288h128c35.3 0 64-28.7 64-64v-32h96c17.6 0 32 14.4 32 32v160c0 17.6-14.4 32-32 32h-64v49.6l-80.2-45.4-7.3-4.2H256c-17.6 0-32-14.4-32-32v-96l-32 18.1V384c0 35.3 28.7 64 64 64h96l108.9 61.6c2.2 1.6 4.7 2.4 7.1 2.4 6.2 0 12-4.9 12-12v-52h32c35.3 0 64-28.7 64-64V224c0-35.3-28.7-64-64-64zm-128 64c0 17.6-14.4 32-32 32H215.6l-7.3 4.2-80.3 45.4V256H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h288c17.6 0 32 14.4 32 32v160z" /></svg> <span>Zostaw komentarz</span> </a> <section id="comments" class="comments-area"> <div class="comments-title-wrapper center-text"> <h3 class="comments-title"> Komentarze </h3><!-- END .comments-title --> <p class="no-comments">Brak komentarzy. Dlaczego nie rozpoczniesz dyskusji?</p> </div> <ol class="comment-list"> </ol> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Dodaj komentarz <small><a rel="nofollow" id="cancel-comment-reply-link" href="/co-to-jest-tbody-w-html/#respond" style="display:none;">Anuluj pisanie odpowiedzi</a></small></h3><form action="https://creativecoding.pl/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Twój adres e-mail nie zostanie opublikowany.</span> <span class="required-field-message">Wymagane pola są oznaczone <span class="required">*</span></span></p><p class="comment-textarea"><textarea name="comment" id="comment" cols="44" rows="8" class="textarea-comment" placeholder="Napsiz komentarz…" required="required"> Nazwa * Adres e-mail * Witryna internetowa Zapamiętaj moje dane w tej przeglądarce podczas pisania kolejnych komentarzy. Przeczytaj koniecznie Posted inPython Jak sprawdzić, czy lista w Pythonie jest pusta? Posted by By Dariusz Nazar 2026-01-09 Posted inPython Krotka (tuple) w Pythonie – najważniejsze informacje Posted by By Dariusz Nazar 2026-01-01 Posted inPython Jak uruchomić skrypt Python w terminalu – poradnik krok po kroku Posted by By Dariusz Nazar 2025-12-31 Posted inPython Czym jest typ zmiennej i dlaczego warto go sprawdzać? Posted by By Dariusz Nazar 2025-12-28 Scroll to Top