Continuamos con un nuevo capitulo del curso de html, hoy vamos a explicar a construir tablas y a alojar elementos en ellas de manera sencilla. Lo primero vamos a explicar que es una tabla ya que básicamente su función consiste en organizar los elementos de un fichero como por ejemplo las hojas de cálculo o las bases de datos.
Las tablas que se incluyen en la maquetacion del contenido de una Web tiene un final estético además de la función organizativa ya que nos ayudan a mostrar la información de manera ordenada y detallada a nuestros visitantes y le da un aspecto mas limpio a la página. Para construir una tabla sencilla usando html , usaremos la siguiente sintaxis.
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
El resultado:
Celda 1, linea 1 Celda 2, linea 1
Celda 1, linea 2 Celda 2, linea 2
Atributos para filas y celdas.
Los atributos mas frecuentes en la construccion de tablas son los siguientes.
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.
Bordes de tabla en HTML
Podemos definir y especificar el aspecto de los bordes de una tabla en htm usando atributos.
• void: Ningún borde externo
• above: Sólo aparece el borde superior
• below: Sólo el borde inferior de la tabla
• hsides:Se mostrará sólo el borde de arriba y abajo.
• vsides: Sólo los bordes de los lados izquierdo y derecho
• lhs: Se mostrará tan solo el borde izquierdo
• rhs: Se mostrará solamente el borde derecho
• box: Se muestran 4 bordes
• border: También se mostrarán los 4 bordes
• none: No se coloca ningún borde interno
• groups: Sólo se mostrarán bordes n los grupos de columnas o filas.
• rows: Sólo aparecerán bordes entre filas.
• cols: Los bordes internos sólo aparecerán para separar columnas
• all: Se mostrarán todos los bordes internos
Agrupando tablas
Podemos agrupar filas o columnas de una tabla y definir su estilo conjuntamente para ello haremos uso de los atributos:
<TBODY>: Para agrupar conjuntos de filas.
<COLGROUP>: Para agrupar conjuntos de columnas.
Articulo escrito por S3L3N1TY
No hay comentarios :