Header Ads

Atributos width y height de tablas en HTML

Entre los atributos de una tabla, podemos encontrar 2 atributos que nos permiten generar el alto y el ancho de esta.

El atributo "height" define la altura de la tabla en pixeles o porcentajes. En el siguiente ejemplo aplicaremos un alto de 300 a nuestra tabla .
<table height="300" border="1">

Código HTML:



Resultado:


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Ahora otra forma de poner los parámetros tanto para los atributos "height y width" es con porcentajes :
<table border="1" height="50%">

Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como se nota al colocar height="50%" la tabla ocupa el 50% de lo alto de la pagina. Si usamos cualquier porcentaje, nuestra tabla lo usara con respecto al tamaño de la pagina.

El atributo "width" define la anchura de la tabla en pixeles o como ya mencionamos en porcentajes. En el siguiente ejemplo aplicaremos un ancho de 500 a la tabla :
<table border="1" width="500">

Código HTML:



Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Ahora usaremos <table border="1" width="50%">

Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como notamos al poner width="50%" , nuestra tabla ocupa la mitad del tamaño de nuestra pagina, osea el 50% de esta.

Como ultimo ejemplo combinaremos ambos atributos, en este caso usaremos:
<table border="1" height="300" width="500">


Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3





No hay comentarios