Html, texto y tablas

Aunque sea tan colorida como quieras, una tabla debe contener algo, de lo contrario no tendría razón de ser. Veamos entonces cómo combinar y formatear adecuadamente una tabla para que contenga texto en su interior.

Alineación de texto Veamos, una vez insertado texto, cómo alinear el texto dentro de la tabla con el comando align. Primero, creemos la tabla.

Aquí está la tabla:

Insertemos texto:

Así se ve la tabla con el texto:

Esta es mi tabla

¡Perfecto! Ahora, si quisiéramos alinear el texto al centro de esta manera:

Esta es mi tabla

el código será:

Bueno, sí, los párrafos vuelven a entrar en juego. Con el atributo p identificamos un párrafo y con align lo alineamos a nuestro gusto, en nuestro ejemplo, al centro. Claramente, para la alineación, puedes usar los parámetros left y a tu elección.
Los márgenes Si el texto resulta estar demasiado pegado al borde de la tabla, es posible aumentar el espacio entre estos dos elementos utilizando el atributo cellpadding que nos permite crear espacio expresado en píxeles. Comparemos dos tablas, una sin cellpadding y otra con cellpadding:
Sin cellpadding:

Esta es mi tabla

Con cellpadding establecido en 3pxl:

Esta es mi tabla

Aquí está el código con cellpadding:

El espaciado Ahora veamos cómo podemos ajustar el espaciado del texto dentro de la tabla. Retomemos nuestro ejemplo añadiendo una línea de texto:

Aquí está mi tabla Aquí está mi tabla

Veamos ahora cómo eliminar el espacio creado entre los dos párrafos de texto para poder obtener este resultado:

Aquí está mi tabla Aquí está mi tabla

Para eliminar el espacio hemos utilizado la etiqueta style. Con margin-top para el espaciado superior y margin-bottom para el inferior, podemos establecer a cero píxeles estos dos márgenes, es decir, siendo cada línea de párrafo, una línea en sí misma, a cada una de ellas hemos establecido los márgenes, uno superior y uno inferior, eliminándolo completamente. Intentemos establecer el margen superior en ambos párrafos, a 5 píxeles:

Aquí está mi tabla Aquí está mi tabla

Como pueden ver entre el primer párrafo y el segundo, en la parte superior, se crea un espacio de 5px. Ahora si establezco también el margen inferior a 5px obtendremos lo siguiente:

Aquí está mi tabla Aquí está mi tabla

Practiquen a dar varias medidas a los márgenes probando así las varias combinaciones. Esta lección recién vista es muy determinante a los fines de la configuración gráfica del texto.

Pubblicato in HTML & CSS