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>