cabecera de la tabla HTML usando 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>

Me estoy poniendo la salida con el primer elemento de la cabecera como en blancocabecera de la tabla HTML usando rowspan

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

Resultados previstos

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

Fuente

2012-04-20 m4n07

Y su pregunta sería ...? –

Retire la TH extra en su código

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>

Fuente

2012-04-20 11:03:51 Nauphal

Cambio primera fila

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

Se va a resolver el problema

Fuente

2012-04-20 11:04:58

Mientras nauphal ya ha abordado el problema, sólo quería hacer algunas sugerencias con respecto a su estructura HTML.

En primer lugar, mayúsculas no es obligatorio (entre mayúsculas y minúsculas de HTML), aunque si alguna vez cambia a XHTML minúscula es obligatoria (y, francamente, se ve un poco más agradable también).

En segundo lugar, porque el navegador inserta siempre un elemento tbody (no estoy seguro de todos los clientes, pero ciertamente de los clientes web visuales) si no hay uno presente, generalmente es mejor ajustar los elementos que represente el 'cuerpo' de la tabla en un tbody usted mismo, de esa manera puede asignar th element-rows a thead, lo que aumenta la semántica un poco (no estoy seguro de lo útil que es, pero todo ayuda).

En tercer lugar, no olvide cerrar sus etiquetas:

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

debe, realmente, ser:

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

Una vez más, no es obligatoria (en HTML 4, creo), pero reduce la alcance de los errores introducidos al tener etiquetas de inicio adicionales, sin cerrar, alrededor de su margen de beneficio.

En cuarto lugar, y esto es sólo picadura de ganchillo, posiblemente, si desea dar estilo al texto caption como subrayado, es más fácil evitar la inserción de un margen extra y simplemente aplicar el estilo caption directamente.

Dicho esto, aquí está mi versión de su mesa y un poco de 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.

Fuente

2012-04-20 11:22:03

cabecera de la tabla HTML usando rowspan

Respuesta

Cuestiones relacionadas