tabella HTML intestazione utilizzando 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>

sto ottenendo l'uscita con il primo elemento di intestazione come vuototabella HTML intestazione utilizzando rowspan

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

uscita prevista

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

fonte

2012-04-20 m4n07

E la tua domanda sarebbe ..? –

Rimuovere il TH in più nel codice

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>

fonte

2012-04-20 11:03:51 Nauphal

Change prima riga

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

Si risolverà il problema

fonte

2012-04-20 11:04:58

Mentre nauphal ha già affrontato il problema, volevo solo fare alcuni suggerimenti in merito tua struttura HTML.

In primo luogo, maiuscola non è obbligatoria (di HTML case-insensitive), anche se si dovrebbe mai passare a XHTML minuscole è obbligatoria (e, francamente, sembra un po 'più bello troppo).

In secondo luogo, poiché un elemento tbody viene sempre inserito dal browser (non sono sicuro di tutti i client, ma di sicuro visual client Web) se non ce ne è già uno, di solito è meglio avvolgere quegli elementi che rappresenta il "corpo" della tabella in un tbody da soli, in questo modo è possibile assegnare le righe di elementi th a thead, il che aumenta un po 'la semantica (non sono sicuro di quanto sia utile, ma ogni piccolo aiuto).

In terzo luogo, ricordarsi di chiudere i tag:

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

Qualora, in realtà, essere:

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

Anche in questo caso, non è obbligatorio (in HTML 4, credo), ma riduce la possibilità di errori introdotti da tag di inizio extra, non chiusi, attorno al mark-up.

In quarto luogo, e questo è solo pignoleria, forse, se hai intenzione di stile tutto il caption come testo sottolineato è più facile evitare di inserire più mark-up e solo lo stile del caption direttamente.

Detto questo, ecco la mia versione della tabella e un po 'di 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.

fonte

2012-04-20 11:22:03

tabella HTML intestazione utilizzando rowspan

risposta

Problemi correlati