Tabla html tr dentro de td

98

Estoy intentando crear una tabla en HTML. Tengo el siguiente diseño para crear. Había agregado un <tr>interior, <td>pero de alguna manera la tabla no se crea según el diseño.

ingrese la descripción de la imagen aquí

¿Alguien puede sugerirme cómo puedo lograr esto?

No puedo crear Name1 | Secciones Price1.

html  html-table 
— Escorpión
fuente

Respuestas:

162

Debes agregar una tabla completa dentro del td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Expandir fragmento

— Herrhansen
fuente
1
¿Es posible agregar una tabla completa dentro de un td? Yo nunca hice eso, por eso pregunto esto. Si lo es, es realmente genial
— Scorpion
2
puedes poner casi todo en un td, solo html, el cuerpo y la cabeza no están permitidos, creo
— herrhansen
1
Sí, esto es exactamente lo que me asustaba. Busqué en Google con la esperanza de que hubiera otra salida
— Giacomo Tecya Pigani
Bueno, a partir de ahora, no arroja ningún error cuando pongo tr s en td, de hecho he puesto muchos tr s dentro de algunos td s porque mi aplicación muestra matrices de objetos dentro de algunas propiedades, y funciona en todos los navegadores, (no sé sobre IE, ya que no lo probé en IE), cualquiera que esté interesado puede verificarlo - stackblitz.com/edit/angular-u7aman , Nota: es una aplicación Angular, no estoy seguro de que Angular esté detrás de esto comportamiento.
— Hasintha Abeykoon
Aunque no arroja un error en su navegador, es falso y puede arrojar errores en otros navegadores o circunstancias. Siempre debe intentar usar HTML-Elements en su uso previsto, como no usar block-Elements dentro de inline-Elements
— herrhansen
39

No puede poner tr dentro de td. Puede ver el contenido permitido en la documentación de documentos web de MDN sobre td. La información relevante está en la sección de contenido permitido .

Otra forma de lograr esto es usando colspany rowspan. Mira este violín .

HTML:

<table width="100%">
 <tr>
  <td>Name 1</td>
  <td>Name 2</td>
  <td colspan="2">Name 3</td>
  <td>Name 4</td>
 </tr>

 <tr>
  <td rowspan="3">ITEM 1</td>
  <td rowspan="3">ITEM 2</td>
  <td>name1</td>
  <td>price1</td>
  <td rowspan="3">ITEM 4</td>
 </tr>

 <tr>
  <td>name2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>name3</td>
  <td>price3/td>
 </tr>
</table>

Y algo de CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
— lavavrik
fuente
11
poner tabla dentro de la tabla es totalmente válido, escriba un código html simple donde inserte una tabla dentro del TD y péguela en el validador w3: validator.w3.org/check Notará que se aprobará. todos los errores están relacionados con las etiquetas de doctype y head missing.
— Malloc
poner un elemento de tabla dentro de tr en inválido mientras que poner una tabla dentro de un td es válido ... puede validar en validator.w3.org/check
— Lucky
3
Creo que el significado pretendido aquí fue que una tabla dentro de una tabla es un enfoque extraño para el escenario, ya que colspan& rowspanestán destinados a resolver este problema.
— connorbode
6
No estoy seguro de por qué esta solución recibe tantos votos a favor. El código publicado es completamente opaco sin un navegador, logrando un objetivo visual a expensas de la relación lógica que se supone que representa una tabla. Y, como señaló @Malloc, su primera oración es evidentemente falsa.
— brianpck
20

Puede resolver sin tablas anidadas.

<table border="1">
    <thead>
        <tr>
            <th>ABC</th>
            <th>ABC</th>
            <th colspan="2">ABC</th>
            <th>ABC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Item1</td>
            <td rowspan="4">Item1</td>
            <td colspan="2">Item1</td>
            <td rowspan="4">Item1</td>
        </tr>
        <tr>
            <td>Name1</td>
            <td>Price1</td>
        </tr>
        <tr>
            <td>Name2</td>
            <td>Price2</td>
        </tr>
        <tr>
            <td>Name3</td>
            <td>Price3</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td>Item2</td>
            <td colspan="2">Item2</td>
            <td>Item2</td>
        </tr>
    </tbody>
</table>
Expandir fragmento

— WalterV
fuente
6

Prueba este código

<table border="1" width="100%">
<tr>
    <td>Name 1</td>
    <td>Name 2</td>
    <td colspan="2">Name 3</td>
    <td>Name 4</td>
</tr>

<tr>
    <td rowspan="3">ITEM 1</td>
    <td rowspan="3">ITEM 2</td>
    <td>name</td>
    <td>price</td>
    <td rowspan="3">ITEM 4</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
</table>
— Kedar1442
fuente
4

Ponga otra tabla dentro del elemento td como esta .

<table>
    <tr>
        ...
    </tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            <table>
                <tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr>
...
            </table>
        </td>
        <td>ABC</td>
    </tr>
...
</table>
— Patricio
fuente
4

Simplemente agregue un nuevo tableen el tdque desee. Ejemplo: http://jsfiddle.net/AbE3Q/

<table border="1">
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
    </tr>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td><table border="1">
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            </table></td>
        <td>Item3</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>  
</table>
— João C
fuente
4

Ejemplo completo: 

<table border="1" style="width:100%;">
  <tr>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 1</td>
    <td>
      <table border="1" style="width: 100%;">
        <tr>
          <td>Name 1</td>
          <td>Price 1</td>
        </tr>
        <tr>
          <td>Name 2</td>
          <td>Price 2</td>
        </tr>
        <tr>
          <td>Name 3</td>
          <td>Price 3</td>
        </tr>
      </table>
    </td>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
  </tr>
</table>
— Jagu
fuente
2

Puede verificar esto, solo use la tabla dentro de la tabla como esta

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
      </tr>
      <tr>
        <td>Item1</td>
        <td>Item1</td>
        <td>
          <table style="width:100%">
            <tr>
              <td>name1</td>
              <td>price1</td>
            </tr>
            <tr>
              <td>name2</td>
              <td>price2</td>
            </tr>
            <tr>
              <td>name3</td>
              <td>price3</td>
            </tr>
          </table>
        </td>
        <td>item1</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
      </tr>
      <tr>
        <td>E</td>
        <td>R</td>
        <td>T</td>
        <td>T</td>
      </tr>
    </table>
  </body>
</html>
— Arman H
fuente
0 
<table border="1px;" width="100%" >
        <tr align="center">
            <td>Product</td>
            <td>quantity</td>
            <td>Price</td>
            <td>Totall</td>
        </tr>
        <tr align="center">
            <td>Item-1</td>
            <td>Item-1</td>
            <td>
                <table border="1px;" width="100%">
                    <tr align="center">
                        <td>Name1</td>
                        <td>Price1</td>
                    </tr>
                    <tr align="center">
                        <td>Name2</td>
                        <td>Price2</td>
                    </tr>
                    <tr align="center">
                        <td>Name3</td>
                        <td>Price3</td>
                    </tr>
                    <tr>
                        <td>Name4</td>
                        <td>Price4</td>
                    </tr>
                </table>
            </td>
            <td>Item-1</td>
        </tr>
        <tr align="center">
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
        </tr>
        <tr align="center">
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
        </tr>
    </table>
— Azizul Hakim
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.