2011-05-03 10 views
8

Czy wiersz tabeli (<tr>) musi znajdować się w treści tabeli (<tbody>), jeśli tabela ma treść tabeli lub może istnieć poza korpusem tabeli?Czy <tr> musi znajdować się wewnątrz obiektu <tbody>

<table> 
    <tr> 
     <td colspan='2'>...</td> 
    </tr> 

    <tbody> 
     <tr> 
     <td>...</td> 
     <td>...</td> 
     </tr> 
    </tbody> 

    <tr> 
     <td colspan='2'>...</td> 
    </tr> 

    <tbody> 
     <tr> 
     <td>...</td> 
     <td>...</td> 
     </tr> 
    </tbody> 

</table> 
+1

Czy próbowałeś powyższy kod? http://jsfiddle.net/wQpfb/ – Dutchie432

+0

powyższy kod działa, zastanawiam się, czy jest on ważny zgodnie z w3 – superUntitled

+1

http: //validator.w3.org/ – Dutchie432

Odpowiedz

5

Nie, <tr> może być w <thead>, <tbody>, <tfoot> lub nie musi być w żadnym z nich.

+6

Chociaż * może * być dowolnym z elementów 'thead',' tbody' lub 'tfoot', jeśli' tr' znajduje się bezpośrednio w 'tabeli' przeglądarka doda *' tbody' do 'tr's. Więc to trochę * robi *. –

+0

Czy dodany "" będzie wyświetlany w renderowanym html, czy jest to coś dynamicznie wykonywane bez zmiany kodu? –

+0

W Chromium (Ubuntu 11.04) element 'tbody' jest dodawany dynamicznie (widoczny w Web Inspector, ale nie w źródle ramki). Demonstracja [w JS Fiddle] (http://jsfiddle.net/davidThomas/UMMVS/). –

1

<tbody> służy do oznaczania ciało swojego <table>, jeśli tabela zawiera <thead> (nagłówek tabeli). . lub <tfoot> (tabela stopka) elementy Jeśli tabela nie zawiera tych elementów, jesteś wolny, aby nie używać <tbody>

Poprawne użycie byłoby.

<table> 
<thead><tr><th>Item   </th><th>Cost </th></tr></thead> 
<tbody><tr><td>Stack Overflow</td><td>Free </td></tr> 
     <tr><td>Something cool</td><td>$1.00</td></tr></tbody> 
</table> 

HTML4 specification to tables

1

Jeśli masz <tr> zewnątrz w <tbody>, strona nie potwierdzi: http://validator.w3.org

jak inni to zauważyli, <tbody> jest obowiązkowe, chyba że używasz <thead> lub <tfoot>. Głównym powodem używania dwóch ostatnich elementów jest to, że nagłówek i stopka są powtarzane na każdej stronie, jeśli wydrukowany jest długi stół.

Wygląda na to, że tworzysz coś w rodzaju kalendarza, w którym chcesz wyświetlać naprzemiennie wiersze <th> (np. Dla dat) i <td> (np. Dla wydarzeń z tej daty). Jeśli tak jest, nie powinieneś owijać naprzemiennych wierszy w <thead> i <tbody> - w ten sposób pomylilibyśmy się z przeglądaniem przeglądarek, gdy dochodziło do drukowania strony. Jeśli po prostu opuścisz elementy grupowania, Twój stół zostanie zatwierdzony. Jednak niektóre czytniki ekranu mogą zostać pomylone z tym znacznikiem i zastosować najwyższy rząd nagłówków do wszystkich komórek znajdujących się pod nimi. W przypadku złożonej tabeli, takiej jak ta, konieczne jest dodanie dodatkowych znaczników, aby zapewnić czytelnikom ekranu zrozumienie sposobu organizacji stołu. Oto tabela z dostępnym znaczników:

<table summary="A brief description of how the table is organized, for screen reader users"> 
    <tr> 
    <th colspan='2' id="header1">...</th> 
    </tr> 
    <tr> 
    <td headers="header1">...</td> 
    <td headers="header1">...</td> 
    </tr> 
    <tr> 
    <th colspan='2' id="header2">...</th> 
    </tr> 
    <tr> 
    <td headers="header2">...</td> 
    <td headers="header2">...</td> 
    </tr> 
</table> 

Alternatywnie, można rozważyć, czy dane mogą być organizowane w wielu tabel, czy alternatywna wersja może być pod warunkiem, że będzie łatwiejszy w obsłudze dla użytkowników czytników ekranu. Na przykład kalendarz wydarzeń może być dodatkowo prezentowany jako lista zdarzeń.

6

Wbrew Terrill Thomson powiedział, stół z <tr> tagów zewnętrznych z <thead>, <tfoot> i <tbody> tagów ale wewnątrz <table> znaczniki będą sprawdzane przed W3C Markup Validation Service.

Niniejszy dokument został pomyślnie sprawdzony jako HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="en"> 
    <head> 
    </head> 
    <body> 
    <table> 
     <thead> 
     <th colspan="2">head1</th> 
     <th>head2</th> 
     </thead> 
     <tfoot> 
     <th colspan="2">foot1</th> 
     <th>foot2</th> 
     </tfoot> 

     <tr><td colspan="3">this row is outside of thead and tfoot</td></tr> 

     <tbody> 
     <tr> 
      <td>1-1</td> 
      <td>1-2</td> 
      <td>1-3</td> 
     </tr> 
     <tr> 
      <td>2-1</td> 
      <td>2-2</td> 
      <td>3-3</td> 
     </tr> 
     <tr> 
      <td>3-1</td> 
      <td>3-2</td> 
      <td>3-3</td> 
     </tr> 
     </tbody> 
    </body> 
</html> 
Powiązane problemy