<th> dla kolumny zamiast wiersza?

Question

Rozważmy następujący HTML:

<table> 
    <tr> 
     <td>Born</td> 
     <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td> 
    </tr> 
    <tr> 
     <td>Gender</td> 
     <td>Male</td> 
    </tr> 
    <tr> 
     <td>Sports</td> 
     <td>Football<br />Tennis</td> 
    </tr> 
    <tr> 
     <td>Teams</td> 
     <td>Liverpool FC<br />Spain FC</td> 
    </tr> 
</table> 

Czy jest możliwe aby użyć <th> w odniesieniu do kolumny, zamiast z rzędu? Chciałbym pogrubić lewą kolumnę.

Answer 1

Tak, można użyć <th> dla komórek w wierszach lub kolumnach.

<table> 
    <tr> 
     <th>Born</th> 
     <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td> 
    </tr> 
    <tr> 
     <th>Gender</th> 
     <td>Male</td> 
    </tr> 
... 

Answer 2

Albo można dodać, że css do pogrubienie tylko na pierwszej kolumnie

table tr td:first-child{font-weight:bold;} 

Answer 3

The spec wyraźnie mówi, że element th może dostarczyć informacji nagłówka kolumny lub wiersza (lub grupy kolumn lub wydziwianie). Atrybut scope=row może być użyty do jawnego powiedzenia, że ​​komórka nagłówka jest nagłówkiem wiersza.

Używanie th w porównaniu do td ma kilka implikacji. Implikacja funkcjonalna polega na tym, że programy użytkownika mogą w szczególny sposób traktować th, dając użytkownikowi dostęp do komórek danych za pomocą odpowiednich informacji nagłówkowych. Dotyczy to głównie agentów bazujących na mowie. Aby było to znaczące, komórka th powinna w rzeczywistości dostarczać informacje identyfikujące wiersz danych lub kolumnę danych. W takim przypadku warunek jest spełniony. Więc możesz i powinieneś używać th zamiast td, niezależnie od pożądanego renderowania.

Innymi konsekwencjami są domyślnie, że zawartość elementu jest renderowana pogrubioną czcionką i wyśrodkowana poziomo. Jeśli nie jest to uważane za odpowiednie, możesz z łatwością przesłonić je w CSS (lub nawet w HTML). W twoim przypadku, jeśli chcesz, aby zawartość była pogrubiona, ale wyrównana do lewej, użyj th { text-align: left; }. (Innym, być może lepszym, stylem jest wyrównanie wiersza do nagłówków: th { text-align: right; }. Centrowanie może wyglądać dziwnie.)