Uso de Divs Inside Tables | Programar Plus

0

A pesar de su condición de enemigos mortales, los divs y las tablas pueden trabajar juntos si es necesario. Debido a la capacidad de usar el centrado vertical en tablas, es una técnica algo popular usar una tabla unicelular con centrado horizontal y vertical para centrar absolutamente el contenido de su página en una ventana del navegador (en su mayoría, solo es útil para contenido de tamaño fijo) .

Una cosa importante para recordar al poner un div dentro de una tabla es que el div necesita vivir dentro de una tabla en particular. celda, significado dentro de un elemento td o th que es dentro de un elemento tr.

Para ver a qué me refiero, eche un vistazo a una tabla como esta:

<table border=1 width=200 cellpadding=10>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
</table>

tablediv1.png

Ahora desea agregar otra fila a esta tabla y poner un div dentro de ella, puede hacer esto:

<table border=1 width=200 cellpadding=10>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <div id="my_box">
      <p>I'm text in a div.</p>
    </div>
  </tr>
</table>

¡Pero eso rompe el diseño! Extraño pero cierto. Vea abajo:

tablediv2.png

Lo que debe hacer es asegurarse de que el div esté dentro de una celda de tabla real, un elemento td o th, así que haga eso:

<tr>
  <td colspan=3>
    <div id="my_box">
      <p>I'm text in a div.</p>
    </div>
  </td>
</tr>

Y deberías conseguir lo que esperas un div completamente estilizado dentro de una mesa:

tablediv3.png

Esto también puede ayudar con el uso del posicionamiento absoluto dentro de las celdas de la tabla. Vea este artículo.

(Visited 7 times, 1 visits today)