Cómo puedo hacer una tabla HTML en línea

En HTML, quiero mostrar una tabla pequeña como parte de un párrafo. Una forma de hacerlo es la siguiente:Cómo puedo hacer una tabla HTML en línea

<table> 
    <tr> 
    <td> 
     Before 
     <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table> 
     After 
    </td> 
    </tr> 
</table>

que produce este diseño agradable:

 a b 
Before  After 
     c d

que es exactamente lo que quiero.

Pero me parece un poco tonto usar una mesa dentro de una mesa cuando lo que realmente quiero es usar una tabla dentro de un párrafo. Sin embargo, si intento usar este código HTML:

<p> 
    Before 
    <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table> 
    After 
</p>

consigo este diseño feo:

Before 
a b 
    After 
c d

He intentado usar distintos tipos de presentaciones, pero ninguno parece hacer lo que quiero.

¿Estoy obligado a usar el código tabla dentro de la tabla, o me falta algo?

Fuente

2011-09-17 oz1cz

¿qué broswer (y versión) representa el segundo ejemplo como lo ha mostrado? [no mío =)] – Shad

Firefox 6 e IE 9. – oz1cz

Debería haber mencionado que mi Doctype es XHTML 1.0 Strict. El problema no aparece con HTML 4.01 Transitional. – oz1cz

Haciendo el párrafo display: inline; me funciona. Pero, si tiene varios párrafos, deberá agregar un <br /> después de cada uno de ellos.

Fuente

2011-09-17 19:52:28 Will

Debería haber mencionado que mi Doctype es XHTML 1.0 Strict. Su solución funciona bien (incluso sin
) en XMTHML 1.0 Strict; pero esperaba poder lograr lo que quería sin modificar el estilo del párrafo circundante. Pero quizás no puedo. – oz1cz

No creo que puedas, ya que los párrafos no son elementos en línea por defecto. – Will

Supongo que tiene una buena razón para usar una tabla aquí en lugar de css. Puedes obtener el efecto usando una sola tabla.

<table> 
    <tr> 
    <td rowspan="2">Before</td> 
    <td>a</td> 
    <td>b</td> 
    <td rowspan="2">After</td> 
    </tr> 
    <tr> 
    <td>c</td> 
    <td>d</td> 
    </tr> 
</table>

Fuente

2011-09-17 20:02:42 natedavisolds

Eso no funcionará para mí porque el texto "Antes" y "Después" son en realidad varias líneas de texto y la tabla pequeña aparece en el medio del párrafo. – oz1cz

no hay problema. No me di cuenta de las especificaciones. Lo siento. Aclamaciones. – natedavisolds

podría utilizar el siguiente CSS:

display:inline-table

onnly IE7 y abajo no son compatibles con esta propiedad. Probablemente envolver la tabla en un lapso con zoom:1 aplicado podría ayudar a IE7.

Fuente

2011-09-17 22:01:38

Esta debería ser la respuesta preferida. No requiere ningún contexto de elemento externo. – Steven

Estoy utilizando el navegador Chrome en Linux y soy capaz de conseguir que esto funcione mediante la adición de display:inline-table tanto al párrafo (p) y etiquetas de tabla:

<p style="display:inline-table;"> 
    Before 
    <table style="display:inline-table;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table> 
    After 
</p>

acaba de comprobar Firefox en Linux y parece para trabajar allí también

FYI: La eliminación de cualquiera de los dos estilos display:inline-table dio formato indeseable.

Fuente

2014-04-18 16:03:38

Cómo puedo hacer una tabla HTML en línea

Respuesta

Cuestiones relacionadas