HTML

Páginas: 5 (1028 palabras) Publicado: 26 de junio de 2015

ETIQUETAS PARA TBLAS EN HTML
 Una tabla básica
Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:
 y 
 son las etiquetas donde está contenida la tabla
 y  son las etiquetas que indican el comienzo y finde una fila ( y  si es una fila de cabecera)
 y  señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente

El resultado no es muy brillante, pero vamosa ir viendo las distintas posibilidades que tenemos para mejorarlo.
 Atributos de la etiqueta TABLE
Todos los atributos son opcionales
BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2


CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.
Otro ejemplo


 Atributos de las etiquetas de fila y celda
Las etiquetas que soportan las filas y las celdas son
WIDTH="30". Ancho de toda la fila ocelda. También se puede dar en %
ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el número de columnas que abarca la fila
ROWSPAN=2. Especifica el número de filas queabarca la columna
Tercer ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos





Como ves, se pueden ir modificando los comandos básicos para obtener la tabla que deseemos.
Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadores presentan la tabla igual y nos ahorramos unas cuantas pulsaciones de teclas. Otros usos de las tablas
Como dijimos, las tablas son a veces la mejor manera de asegurarnos que cada cosa esté en su sitio. En esos casos toda la página es una tabla invisible y los distintos elementos aparecen colocados en el sitio exacto mediante el uso de filas, columnas, sus dimensiones y alineamientos, el espacio entre las mismas, etc.
Normalmente el ancho de esas tablas es de alrededor de600 píxels para que la presentación sea similar en todos los monitores. Hay muchos ejemplos de este uso, sobretodo en las páginas diseñadas por profesionales, observa sino la de El Pais o la de Microsoft
Como inconvenientes señalar que las tablas impiden el deslizamiento uniforme de la ventana, cuando se desplaza con la barra y el tamaño de la página aumenta considerablemente.

COMBINAR CELDAS ENHTML

En ocasiones crear una tabla de ese modo tan cuadriculado no se acerca mucho a lo que queremos. A veces nos viene mejor que una de las celdas sea más larga o más alta que las otras, es decir, que ocupe varias celdas. Para lograr esto hay que recurrir a combinar celdas. Vamos a ver cómo se hace eso.
El ejemplo más clarito que se me puede ocurrir ahora mismo (con Carlitos dándome la lata consus juguetes... je je je), es la de una tabla con, por ejemplo, tres columnas (verticales) pero en la que aparezca una sola celda arriba del todo, ocupando la anchura total de la tabla. Algo como esto:






Para conseguir eso, tenemos que colocar en esa primera fila una sola celda, pero hay que ponerle una palabra mágica para indicar a cuántas celdas corresponde o lo que es lo mismo, cuantas...
Leer documento completo

Regístrate para leer el documento completo.

Estos documentos también te pueden resultar útiles

  • HTML
  • QUE ES HTML
  • Html
  • html
  • HTML
  • Html
  • Html
  • Html

Conviértase en miembro formal de Buenas Tareas

INSCRÍBETE - ES GRATIS