A veces tienes que incluir tablas en tu página web. Para los gráficos, tal vez puedas simplemente exportar tu tabla en un gráfico en y luego pegarlo en tu página; pero para presentar datos, generalmente necesitas una tabla para hacerlo ordenadamente. Para hacer una tabla en una página web lo primero que debes hacer es definir sus propiedades. Luego continúas con sus filas y celdas.
Empieza por abrir un marcador <table></table> en tu página web y especifica sus propiedades, así:
<table border="0" width="480" cellpadding="0" cellspacing="0">
</table>
Con eso estás ordenando al navegador que muestre una table de 480 píxeles de ancho, sin bordes, con datos relativamente juntos porque no quieres espacio entre las celdas (cellspacing) ni entre el borde de una celda y los datos que contiene (cellpadding). Con estas especificaciones generales, ahora es sencillo completar el resto de la tabla.
Usa <tr></tr> para iniciar y terminar una nueva fila. Dentro de ella, usa <td></td> para especificar el principio y fin de cada celda de la tabla.
<table border="0" width="480" cellpadding="0" cellspacing="0">
<tr>
<td>columna uno</td><td>columna dos</td>
</tr>
<tr>
<td>fila dos</td><td>última celda</td>
</tr>
</table>
Fácil, ¿verdad?
En algunos casos necesitas fundir o bien dos columnas o bien dos filas para acomodar tus datos de una manera adecuada. Si necesitas hacer esto, simplemente usa las propiedades colspan="" o rowspan="" para especificar cuántas celdas necesitas fundir, teniendo en cuenta que colspan="" funde columnas y que rowspan="" funde filas. Usa estas propiedades en la celda que deseas fundir.
<table border="1" width="480" cellpadding="0" cellspacing="0">
<tr>
<td>columna uno</td><td>columna dos</td>
</tr>
<tr>
<td colspan="2">celdas fundidas en una fila</td>
</tr>
</table>
Velo por ti mismo.
Hay otras ocasiones en las que necesitas especificar si el texto de la celda debe ir arriba, al medio o abajo; alineado a la izquierda, derecha, al centro o justificado. Usa align="" y valign="" para especificar estas propiedades. Úsalas en una celda para especificar las propiedades de esa celda, o en una fila para especificar las propiedades de toda una fila.
Éstos son los valores posibles:
align="" puede incluir left, right, center o justify
valign="" puede incluir include top, middle o bottom.
<table border="0" width="480" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">columna uno</td><td>columna dos</td>
</tr>
<tr>
<td>fila dos</td><td>última celda</td>
</tr>
</table>
Fácil y práctico.
En los años 1990s, las páginas web se diseñaban con tablas para asegurar que se vieran iguales en diferentes navegadores. Esto ya no se considera apropiado o útil. A decir verdad, cuando un navegador lee el código de una tabla, lo lee dos veces: una primera vez para leer la estructura de la tabla, y una segunda vez para su contenido. Esto hace que tu página abra un poco más despacio, y no es una buena idea.
Para diseñar páginas web, ahora se usan cajas <div></div>.
Heptagrama, la web en síntesis.
Derechos reservados.
Descubre y aprende + Computadores e Internet
