Centro de Ayuda:

{

Pagos y Renovaciones
» Cómo pagar
» Aviso de Pago
» Solicitar Factura
» 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 para filas y celdas.


Continuamos con las tablas. Vemos los atributos que podemos colocar en las filas y las celdas.


Hemos visto en el capitulo anterior que las tablas están compuestas de líneas que, a su vez, contienen celdas. Las celdas son delimitadas por las etiquetas <td> o por las etiquetas <th> (si queremos texto en negrita y centrado) y constituyen un entorno independiente del resto del documento. Esto quiere decir que:

  • Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para, de esta forma, dar forma a su contenido.
  • Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
  • Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta.
Así pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda <td> o bien, en algunos casos, dentro de la etiqueta <tr>, si deseamos que el atributo sea valido para toda la línea. La forma más útil y actual de dar forma a las celdas es a partir de las hojas de estilo en cascada que ya tendréis la oportunidad de abordar más adelante.

Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:

align Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
valign Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.
bgcolor Da color a la celda o línea elegida.
bordercolor Define el color del borde.

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:

background Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height Define la altura de la celda en pixels o porcentaje.
width Define la anchura de la celda en pixels o porcentaje.
colspan Expande una celda horizontalmente.
rowspan Expande una celda verticalmente.

Nota: El atributo height no funciona en todos los navegadores, además, su uso no está muy extendido. Las celdas por lo general tienen el alto que ncesitan para que quepa todo el contenido que se le haya insertado, es decir, crecen lo suficiente para que quepa lo que hemos colocado dentro.

El atributo width si que funciona en todos los navegadores y lo tendréis que utilizar constantemente. Si le asignamos un ancho a la celda, el ancho será respetado y si dicha celda tiene mucho texto o cualquier otro contenido, la celda crecerá hacia abajo todo lo necesario para que quepa lo que hemos colocado.

Un matiz al último párafo. Se trata de que si definimos una celda de un ancho 100 por ejemplo, y colocamos en la celda un contenido como una imagen que mida más de 100 pixeles, la celda crecerá en horizontal todo lo necesario para que la imagen quepa. Si el elemento, aunque más ancho, fuera divisible (como un texto) el ancho sería respetado y el texto crecería hacia abajo o lo que es lo mismo, en altura, como señalábamos en el anterior párrafo.

Estos últimos cuatro atributos descritos son de gran utilidad. Concretamente, height y width nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al tamaño total de la tabla. Podéis leer un articulo interesante a propósito de estas dos modalidades de diseño en nuestro manual de usabilidad.

A titulo de ejemplo:

<td width="80">
Dará una anchura de 80 pixels a la celda. Sin embargo,

<td width="80%">
Dará una anchura a la celda del 80% de la anchura de la tabla.

Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer lo que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada para mantener la palabra en la misma línea. Por otra parte, si el texto resulta muy largo, la celda aumentara su altura para poder mostrar todo su contenido.

Análogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma columna, el navegador no sabrá a cual hacer caso. Es por ello que resulta conveniente tener bien claro desde un principio como es la tabla que queremos diseñar. No esta de más si la prediseñamos en papel si la complejidad es importante. El HTML resulta en general fácil pero las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a comprenderlas debidamente.

Los atributos rowspan y colspan son también utilizados frecuentemente. Gracias a ellos es posible expandir celdas fusionando éstas con sus vecinas. El valor que pueden tomar estas etiquetas es numérico. El número representa la cantidad de celdas fusionadas.

Así,
<td colspan="2">
Fusionara la celda en cuestión con su vecina derecha.

Esta celda tiene un colspan="2"
Celda normal Otra celda

Del mismo modo,
<td rowspan="2">

Esta celda tiene rowspan="2", por eso tiene fusionada la celda de abajo. Celda Normal
Otra celda normal

Expandirá la celda hacia abajo fusionándose con la celda inferior.

El resto de los atributos presentados presentan una utilidad y uso bastante obvios. Los dejamos a vuestra propia investigación.



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

Tags:   , , Web Hosting , plantilla diploma artes marciales , , poner un array en una cadena php , plantillas en word para diseñar cartilla para restaurante , , descargar programa para limpiar mac , etiqueta de subrayado en xml , configurar correo claro en outlook , como hacer un plan de marketing , dominio tk virus , renombrar base de datos en mysql , modelo de esquelas mortuorias , insertar imagenes en html en celdas fusionadas , porno chino en buenos aires , como insertar color enhtml , modelos esquelas funerarias descarga , codigo para poner una imagen y a la misma altura un texto html , como sincronizar mail en app outlook mail , clave para entrar a facebook , precio de un hosting

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 - 2013 ® Todos los Derechos Reservados  -  Condiciones de uso

Parterns:   Supermaq.cl  :   SuperWeb  :   Página Web Gratis  :  Eledos  :  SuperMaq  :  SuperSushi