Centro de Ayuda:

{

Pagos y Renovaciones
- Cómo pagar
- Aviso de Pago
- Renovaciones
- Upgrade/Ampliar Plan

Ayuda Básica
- Mi primera página
- Preguntas Frecuentes
- Videos Tutoriales
- Configurar Email en Outlook?

Email, Webmail, Outlook
- Crear Email
- Configurar Outlook
- Problemas Outlook
- Preguntas Varias Email

Servidores Vps Linux y Windows Chile




Diseño Web HTML Basico


En esta sección publicamos todos los contenidos que tienen que ver con HTML, como manual de HTML, talleres, servicios, complementos, etc. Disponemos, tal vez, del mejor manual de HTML de la Web en español, que trata todos los temas con gran detalle y ofrece cientos de consejos para mejorar nuestras técnicas.



Tablas en HTML. Atributos de la tabla y conclusión.


Conocemos los atributos principales que le podemos asignar a la tabla de modo general. Además vemos varios ejemplos prácticos de construcción de tablas.


Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aquí aquellos que pueden parecernos en un principio importantes:

align Alinea horizontalmente la tabla con respecto a su entorno.
background Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor Da color de fondo a la tabla.
border Define el número de pixels del borde principal.
bordercolor Define el color del borde.
cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing Define el espacio entre los bordes (en pixels).
height Define la altura de la tabla en pixels o porcentaje.
width Define la anchura de la tabla en pixels o porcentaje.

Los atributos que definen las dimensiones, height y width, funcionan de una manera análoga a la de las celdas tal y como hemos visto en el capitulo anterior. Contrariamente, el atributo align no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino más bien, justificar la propia tabla con respecto a su entorno.

Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la izquierda.

Ejemplo de tabla centrada
Esta tabla está centrada (aling="center"). Solo tiene una celda.
Este sería un texto cualquiera colocado al lado de una tabla centrada

Ejemplo de tabla alineada a la derecha
Esta tabla está alineada a la derecha (aling="right"). Solo tiene una celda.
Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado.

Ejemplo de tabla alineada a la izquierda
Esta tabla está alineada a la izquierda (aling="left"). Solo tiene una celda.
Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado.

Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto más estético. En un principio puede parecernos un poco confuso su uso pero un poco de practica será suficiente para hacerse con ellos.

En la siguiente imagen podemos ver gráficamente el significado de estos atributos.

Modelo de Cellpading y Cellspacing

Podéis comprobar vosotros mismos que los atributos definidos para una celda tienen prioridad con respecto a los definidos para una tabla. Podemos definir, por ejemplo, una tabla con color de fondo rojo y una de las celdas de color de fondo verde y se verá toda la tabla de color rojo menos la celda verde. Del mismo modo, podemos definir un color azul para los bordes de la tabla y hacer que una celda particular sea mostrada con un borde rojo. (Aunque esto no funcionará en todos los navegadores debido a que algunos no reconocen el atributo bordercolor.

Tabla de color rojo de fondo El atributo bgcolor de la tabla está en rojo.
Celda normal Esta celda está en verde. tiene el atributo bgcolor en color verde

Tablas anidadas

Muy útil también es el uso de tablas anidadas. De la misma forma que podíamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. Así, podemos incluir una tabla dentro de la celda de otra. El modo de funcionamiento sigue siendo el mismo aunque la situación puede complicarse si el número de tablas embebidas dentro de otras es elevado.

Consejo: Páginas como DesarrolloWeb.com y muchas otras (La mayoría de las páginas avanzadas) que basan su diseño en tablas, realizan anidaciones de tablas constantemente para meter unos elementos de la página dentro de otros. Se pueden anidar tablas sin límite, sin embargo, en el caso de Netscape 4 hay que tener cuidado con el número de tablas que anidamos, porque a medida que metemos una tabla dentro de otra y otra dentro de esta y otra más, aumentando el grado de anidación sucesivamente... podemos encontrar problemas en su visualización y puede que la página tarde un poco de tiempo más en mostrarse en pantalla.


Vamos a ver un código de anidación de tablas. Veamos primero el resultado y luego el código, así conseguiremos entenderlo mejor.

Celda de la tabla principal
Tabla anidada, celda 1 Tabla anidada, celda 2
Tabla anidada, celda 3 Tabla anidada, celda 4

Este sería el código:

<table cellspacing="10" cellpadding="10" border="3">
<tr>
    <td align="center">
    Celda de la tabla principal
    </td>
    <td align="center">
        <table cellspacing="2" cellpadding="2" border="1">
        <tr>
            <td>Tabla anidada, celda 1</td>
            <td>Tabla anidada, celda 2</td>
        </tr>
        <tr>
            <td>Tabla anidada, celda 3</td>
            <td>Tabla anidada, celda 4</td>
        </tr>
        </table>
    </td>
</tr>
</table>

Ejemplos prácticos

Hasta aquí la información que pretendíamos transmitiros sobre las tablas en HTML. Sería importante ahora realizar algún ejemplo de realización de una tabla un poco compleja. Por ejemplo la siguiente:

Animales en peligro de extinción
Nombre Cabezas Previsión 2010 Previsión 2020
Ballena 6000 4000 1500
Oso Pardo 50 0
Lince 10
Tigre 300 210

Se puede ver esta tabla en otra ventana, donde también podremos examinar su código fuente.

Otro ejemplo de tabla con el que podemos practicar:

Climas de América del Sur
Venezuela
Colombia
Ecuador
Perú
Parte de arriba de América del Sur. Países como:
Argentina
Chile
Uruguay
Paraguay
Parte de abajo de América del Sur. Países como:
Bosque tropical, clima de sabana, clima marítimo con inviernos secos. Climas marítimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima desértico.

También la podemos ver en una ventana a parte para extraer su código fuente.

Maquetar con tablas

En HTML tradicional se utilizan las tablas, aparte de mostrar información tabulada como hemos visto en este artículo, para maquetar páginas web. Con las tablas podemos generar una serie de espacios donde podemos mostrar contenidos estructurados en columnas y filas, como la maquetación de una revista o un portal. La maquetación por tablas la comentamos en un taller de HTML. Es muy recomendable su lectura para hacerse una idea del proceso de creación de páginas medianamente avanzadas y con información bien estructurada.



Indice Formularios HTML »


Tags:   como ponerle color a una tabla en html, alinear tabla a la derecha, poner color a las tablas en html, alinear tabla a la derecha html, como centrar una tabla en una celda en html, table cellspacing, bordes tablas html, definir los atributos de la tabla horario, dividir tabla html, como se elabora lista anidada, Web Hosting , como conectar dreamweaver al hosting , diseños de paginas musicales en html gratis , codigos html para una pagina sencilla , como puedo cambiar una cuenta de correo electronico , , logitech z906 chile , pdi viña del mar noticias , pagina web gratis , juegos para adultos iphone , elementos que se requiere para planear una pagina web , subir pagina hostlemon , , el mejor programa mantenimiento para mac? , creando en block de notas el htmal , plantilla web para periodico gratis , samsung chat 222 temas , como realizar una carta de menu , costo de la licencia del windows 7 , como activar mi cuenta de correo electronico en mi bb , tipos de letras a color

Planes Incluyen:


  Panel de Control
  Valores y Precios
  Plantillas Web Gratis
  Manuales y Tutoriales
  Asesorías en Dominios
  400 Video Tutoriales

Servicios Web:


  Diseño Web
  Diseño de Sitios Web
  Páginas Web
  Programación Web
  Posicionamiento Web
  Mails Google Apps

Soluciones para:


  Plantillas Web
  Buscadores
  Páginas Web Gratis
  Emailing
  E-Commerce
  Web Hosting

 |   Home  |   Faqs  |   Contacto  |

soporte@superhosting.cl
ventas@superhosting.cl
renovaciones@superhosting.cl

Super Hosting Chile 2000 - 2011 ® Todos los Derechos Reservados  -  Condiciones de uso

Parterns:  SuperWeb  :  Página Web Gratis  :  Eledos  :  SuperMaq  :  SuperSushi