Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 1325

Visitas el mes pasado: 1660

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




6. Tablas (II)

6.2 Estilo con HTML.

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 número 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.



Color de fondo y bordes

Podemos modificar el color de los bordes de la tabla mediante el atributo bordercolor. Este atributo debemos insertarlo en la etiqueta table y afecta a toda la tabla.

También podemos cambiar el color de fondo de las celdas de la tabla, para ello usaremos el atributo bgcolor, el cual puede insertarse en las etiquetas de celda (td o th) o en las etiquetas de fila (tr), en este último caso el cambio de color afectará a toda la fila.

Los valores de los atributos bgcolor y bordercolor son los habituales para especificar un color. Hay varios métodos, todos ellos vienen especificados en la página 1.4 Colores y medidas del manual de CSS.

Por último, también podemos poner como fondo en una celda, una imagen, para ello utilizaremos el atributo background, dentro de la etiqueta de celda. La forma de emplear este atributo y los valores que debemos usar son los mismos que hemos visto para dar una imagen de fondo a la página mediante la etiqueta body tal como se indica en la página 5.4. más sobre imágenes de este mismo manual.

Vamos a aplicar estos atributos al ejemplo anterior para modificar el color de los bordes y el fondo de las celdas. al igual que en los anteriores ejemplos, debajo de la tabla viene escrito el código de la misma.

Ejemplo color bordes y fondo celdas.


Esta forma de tratar el estilo del fondo de la tabla no suele ser lo habitual. Lo normal suele ser emplear para esto código CSS.

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.



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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