Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

6. Tablas (II)

6.2 Estilo con HTML.

En esta página veremos cómo cambiar el aspecto de la tabla usando el lenguaje HTML. Aunque lo normal es modificar el aspecto de la tabla usando el lenguaje CSS (esto podemos verlo en el manual de CSS), hay algunos aspectos que pueden resultarnos más fácil modificarlos mediante el lenguaje HTML.

Mostramos aquí las modificaciones en el estilo que se pueden hacer mediante HTML, correspondiendo al diseñador decidir si usa HTML o CSS para cambiar el aspecto de la tabla.

Bordes

Las celdas de la tabla aparecen por defecto sin un borde definido. esto se puede cambiar usando el atributo border en la etiqueta <table>, el valor de este atributo es un número que nos indicará el grosor del borde medido en pixels. Ejemplo:

<table border="2"> ... </table>

El atributo border debe utilizarse únicamente con la etiqueta table ya que con las otras etiquetas de la tabla no tiene ningún efecto. Además las celdas quedan separadas entre sí por un pequeño margen, lo cual puede modificarse como veremos más adelante.

En el siguiente ejemplo se muestra una tabla sencilla a la que se le ha puesto borde, y debajo de ella su código HTML:

ejemplo de tabla con bordes

Tamaño de celdas

Podemos modificar el tamaño de las celdas de la tabla, para ello utilizaremos los atributos height (alto) y width (ancho). Los atributos pueden colocarse en cualquiera de las celdas, pero hay que tener en cuenta que si se modifica el ancho de una celda, se modifica también el tamaño de la columna, y al modificar el alto de una celda, modificamos el alto de la fila.

Los valores de los atributos height (alto) y width (ancho) pueden ser números o porcentajes. Si escribimos un número, indicará píxeles, y si escribimos un porcentaje, éste está referido al total del ancho o alto de la tabla.

Si usamos los atributos height (alto) y width (ancho) con la etiqueta table definiremos la anchura o la altura de toda la tabla, y las celdas se adaptarán proporcionalmente al tamaño de la tabla.

Si modificamos el tamaño de dos celdas de la misma fila o columna, la tabla tomará siempre el valor más alto de los dos y lo aplicará a esa fila o columna.

En el siguiente ejemplo vemos la tabla anterior a la que hemos modificado el tamaño de las celdas, debajo de la tabla vemos el código HTML de la misma.

Ejemplo Tamaño de celdas

Alineación

Por defecto el texto dentro de las celdas marcadas por la etiqueta td aparece alineado a la derecha y centrado respecto a la vertical. En las celdas con la etiqueta th el texto aparece por defecto centrado en horizontal y en vertical, y además en negrita. Esto puede cambiarse y alinearlo de diferentes formas.

Podemos alinear el texto de las celdas igual que si fuera un párrafo mediante el atributo align. Los valores que puede tomar el atributo son left (izquierda) center (centrado) o right (derecha) aplicado a las etiquetas td o th .

También podemos alinear el texto de la celda en vertical, mediante el atributo valign. Los valores que puede tomar el atributo son top (posición superior), middle (en el centro) o bottom (posición inferior). lo aplicaremos igualmente a las etiquetas td o th .

Si utilizamos el atributo align en la etiqueta table la tabla entera quedará alinada respecto a su elemento contenedor (en su defecto respecto al fondo de la página), pero no se alinean los elementos del interior de las celdas.

Si queremos alinear de igual modo todos los elementos de una fila podemos usar los atributos align y valign en la etiqueta tr correspondiente a la fila. Todas las celdas de esa fila se alinearán de la manera indicada.

En el siguiente enlace vemos la tabla del ejemplo anterior a la que le hemos aplicado algunas alineaciones. debajo de la tabla vemos el código HTML de la misma.

Ejemplo alineación de celdas

Separación entre celdas

Por defecto las celdas aparecen separadas unas de otras mediante una pequeña separación. Podemos aumentar o disminuir esta separación mediante el atributo cellspacing cuyo valor es un número que indicará los píxeles que deben estar separados. Si su valor es cero desaparece la separación entre las celdas. El atributo debe aplicarse a la etiqueta table.

También podemos dejar una separación entre el borde de la celda y el texto o contenido de la misma, de modo que el texto o contenido no quede pegado a los bordes de la misma. Para ello emplearemos el atributo cellpadding cuyo valor será el número de píxeles que debe debe estar separado el texto o contenido del borde de la celda.

Veamos ahora el ejemplo anterior con las celdas sin separación entre ellas:(cellspacing="0")

Ejemplo celdas sin separación.

Todos los cambios en el estilo de la tabla vistos hasta ahora también pueden hacerse mediante la aplicación de estilo CSS, tal como podemos ver en el manual de CSS.

---

En la siguiente página veremos como juntar varias celdas en una para formar tablas más complejas.

Fusión de celdas.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com