Html código de medida de tabla
Como crear una tabla con diferente medida
Como dividir las medidas en las columnas de la tabla
Explicación
Medida de la tabla:
Podemos setear la medida de la tabla basándonos en pixeles o porcentaje. Primero podremos ver como setear la medida basada en píxeles. Los atributos ancho y alto serán utilizados.
Código:
<table border=1 bgcolor="verde" width=300 height=100>
<tr height=30>
<td>
Esto es 1ra fila 1ra columna
</td>
<td>
Esto es 1ra fila 2da columna
</td>
</tr>
<tr height=70>
<td>
Esto es 2da fila 1ra columna
</td>
<td background="./test.jpg">
Esto es 2da fila 2da columna <br><br> Hermoso Fondo
</td>
</tr>
</table>
Ahora vamos a setear el total de la tabla con un ancho de 300 y una altura de 100 y dividimos ellas en filas, dando un valor de 30 para la primer fila y 70 a la segunda fila.
Resulta:
Esto es 1ra fila 1ra columna | Esto es 1ra fila 2da columna |
Esto es 2da fila 1ra columna | Esto es 2da fila 2da columna Hermoso Fondo |
Medida de tabla en porcentaje
El ancho y alto de la tabla puede setearse usando porcentaje.
Ejemplo:
width=60%.
Esto significa que la tabla sera dibujada en un 60% del actual componente.
Ejemplo:
si nosotros hacemos una tabla dentro de la etiqueta body usando una medida del 100% luego el ancho de la tabla sera equivalente al ancho del navegador.
Pueden existir tablas dentro de tablas. Esto se verá más adelante.
Código:
<table border=1 bgcolor="verde" width=80% height=20%>
<tr height=30%>
<td>
Esto es 1ra fila 1ra columna
</td>
<td>
Esto es 1ra fila 2da columna
</td>
</tr>
<tr height=70%>
<td>
Esto es 2da fila 1ra columna
</td>
<td background="./test.jpg">
Esto es 2da fila 2da columna <br><br> Hermoso Fondo
</td>
</tr>
</table>
Ahora nosotros vamos a setear el total de la tabla con un ancho de 80%
To explain in depth, say we have the component size as width=500,height=500 so the table will now take 80% of 500 (400) as its total width and 30% of 500 (150) as its total height. Then it will split that 150 height in to 30% for first row and 70% for second row.
Resulta:
Esto es 1ra fila 1ra columna | Esto es 1ra fila 2da columna |
Esto es 2da fila 1ra columna | Esto es 2da fila 2da columna Hermoso Fondo |