HTML nagłówka tabeli używając rowspan

<html> 
<body> 

<TABLE border="1" "> 

<CAPTION><EM>A test table with merged cells</EM></CAPTION> 

<TR><TH rowspan="2"><TH colspan="2"> Average 
    <TH rowspan="2">Red<BR>eyes </TH> 
</TR> 
<TR> 
    <TH>height</TH><TH>weight</TH> 
</TR> 
<TR> 
    <TD>1.9<TD>0.003<TD>40%</TD> 
</TR> 
<TR> 
    <TD>1.7<TD>0.002<TD>43%</TD> 
</TR> 

</TABLE> 
</body> 
</html>

Dostaję wyjście z pierwszego elementu nagłówka jako pustąHTML nagłówka tabeli używając rowspan

A test table with merged cells 
/-----------------------------------------\ 
|   |  Average  | Red | 
|   |-------------------| eyes | 
|   | height | weight |   | 
|-----------------------------------------| 
| 1.9  | 0.003 | 40% |   | 
|-----------------------------------------| 
| 1.7  | 0.002 | 43% |   | 
\-----------------------------------------/

Oczekiwany wyjściowego

A test table with merged cells 
/----------------------------- \ 
|  Average  | Red |   
|-------------------| eyes |   
| height | weight |   |   
|------------------------------| 
| 1.9  | 0.003 | 40% |   
|------------------------------| 
| 1.7  | 0.002 | 43% |   
\------------------------------/

Źródło

2012-04-20 m4n07

A twoje pytanie brzmi ...? –

usunąć dodatkowy TH w kodzie

http://jsfiddle.net/yqQsP/

<html> 
<body> 

<TABLE border="1" > 

<CAPTION><EM>A test table with merged cells</EM></CAPTION> 

<TR> 
    <TH colspan="2"> Average</TH> 
    <TH rowspan="2">Red<BR>eyes </TH> 
</TR> 
<TR> 
    <TH>height</TH><TH>weight</TH> 
</TR> 
<TR> 
    <TD>1.9<TD>0.003<TD>40%</TD> 
</TR> 
<TR> 
    <TD>1.7<TD>0.002<TD>43%</TD> 
</TR> 

</TABLE> 
</body> 
</html>

Źródło

2012-04-20 11:03:51 Nauphal

Zmień pierwszym rzędzie

<TR> 
    <TH colspan="2"> Average</TH> 
    <TH rowspan="2">Red<BR>eyes </TH> 
</TR>

będzie rozwiązać problemu

Źródło

2012-04-20 11:04:58

Podczas nauphal już skierowana problemu, po prostu chciałem zrobić jakieś sugestie dotyczące swojej strukturze HTML.

pierwsze, wielkimi literami nie jest obowiązkowe (HTML jest wielkość liter), choć należy zawsze przełączyć się na XHTML małymi jest obowiązkowe (i, szczerze mówiąc, wygląda trochę ładniejszy zbyt).

Po drugie, ponieważ element tbody zawsze jest włożona przez przeglądarkę (nie jestem pewien o wszystkich klientów, ale z pewnością Visual Web-clients), jeśli nie jest już jednym obecne, to zazwyczaj najlepiej owinąć te elementy, które reprezentuje "ciało" tabeli samodzielnie, w ten sposób można przypisać th wiersze elementu do thead, co zwiększa trochę semantykę (nie jestem pewien, jak użyteczne jest to, ale każda mała pomoc).

Po trzecie, należy pamiętać, aby zamknąć swoje tagi:

<TR> 
    <TD>1.9<TD>0.003<TD>40%</TD> 
</TR>

powinien naprawdę być:

<TR> 
    <TD>1.9</TD><TD>0.003</TD><TD>40%</TD> 
</TR>

Ponownie, to nie jest obowiązkowe (w HTML 4, wierzę), ale zmniejsza zakres błędów wprowadzonych przez posiadanie dodatkowych, niezamkniętych tagów startowych wokół marży.

Po czwarte, a to jest po prostu wybieranie nitów, być może, jeśli chcesz nadać całości całemu caption podkreślonemu tekstowi, łatwiej jest uniknąć wstawiania dodatkowego znacznika i po prostu styluj bezpośrednio caption.

To powiedziawszy, oto moja wersja stolika i niektóre CSS:

<table> 
    <caption>A test table with merged cells</caption> 
    <theader> 
     <tr> 
      <th colspan="2">Average</th> 
      <th rowspan="2">Red Eyes</th> 
     </tr> 
     <tr> 
      <th>height</th> 
      <th>weight</th> 
     </tr> 
    </theader> 
    <tbody> 
     <tr> 
      <td>1.9</td> 
      <td>0.003</td> 
      <td>40%</td> 
     </tr> 
     <tr> 
      <td>1.7</td> 
      <td>0.002</td> 
      <td>43%</td> 
     </tr> 
    </tbody> 
</table>

CSS:

caption { 
    font-style: italic; 
} 

td, 
th { 
    border: 1px solid #000; 
    padding: 0.2em; 
}

JS Fiddle.

Źródło

2012-04-20 11:22:03

HTML nagłówka tabeli używając rowspan

Odpowiedz

Powiązane problemy