imagenes - tablas en html ejemplos

Dividir una celda de tabla en dos columnas en HTML

Question

Tengo la siguiente tabla:

<table border="1">
  <tr>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>Split this one into two columns</td>
  </tr>
</table>

Y deseo dividir la celda que contiene " Dividir ésta en dos columnas " en dos celdas / columnas. ¿Cómo hago para esto?

Fiddle

Answer 1

¿Es eso lo que buscas?

<table border="1">
<tr>
 <th scope="col">Header</th>
 <th scope="col">Header</th>
 <th scope="col" colspan="2">Header</th>
</tr>
<tr>
 <th scope="row">&nbsp;</th>
 <td>&nbsp;</td>
 <td>Split this one</td>
 <td>into two columns</td>
</tr>
</table>  

Answer 2

Cambie <td> para que se divida y se vea así:

<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td> 

Answer 3

Me gusta este http://jsfiddle.net/8ha9e/1/

Agregue colspan="2" a la tercera <th> y luego tenga 4 <td> en su segunda fila.

<table border="1">
  <tr>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
    <th scope="col" colspan="2">Header</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <!-- The following two cells will appear under the same header -->
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

Answer 4

Por favor, intente de la siguiente manera.

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

Answer 5

Tienes dos opciones.

1. Use una columna adicional en el encabezado y use <colspan> en su encabezado para estirar una celda para dos o más columnas.
2. Inserte una <table> con 2 columnas dentro de la td que quiere columnas adicionales.

Answer 6

Utilice este ejemplo, puede dividir con el atributo colspan

<TABLE BORDER>
     <TR>
         <TD>Item 1</TD>
         <TD>Item 1</TD>
         <TD COLSPAN=2>Item 2</TD>
    </TR>
    <TR>
         <TD>Item 3</TD>
         <TD>Item 3</TD>
         <TD>Item 4</TD>
         <TD>Item 5</TD>
    </TR>
</TABLE>

Más ejemplos en http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html .

Answer 7

Vine aquí por un problema similar al que me enfrentaba con los encabezados de mis mesas.

La respuesta de @MisterManMan, así como otras, fue realmente útil, pero las fronteras estaban superando mi juego. Por lo tanto, hice una investigación para encontrar el uso rowpan .

Esto es lo que hice y creo que podría ayudar a otros a enfrentar algo similar.

<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
    <tr align="center" >
        <th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th>
        <th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th>
        <th style="padding:2.5px;" rowspan="2">Quantity</th>
        <th style="padding:2.5px;" colspan="2">Rate per Item</th>
        <th style="padding:2.5px;" colspan="2">AMOUNT</th>
    </tr>
    <tr>
        <th>Rs.</th>
        <th>P.</th>
        <th>Rs.</th>
        <th>P.</th>
    </tr>
</table>