Embedded Files
DEFINICIÓN
DEFINICIÓN
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.
Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.
Ejemplo 1
Ejemplo 1
<table >
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
BORDE DE UNA TABLA Y IMAGEN DE FONDO
BORDE DE UNA TABLA Y IMAGEN DE FONDO
Para colocar un borde a un tabla, usaremos el atributo BORDER="ancho", además también podemos colocar un color al borde con el atributo BORDERCOLOR="color">
También puedes colocar una imagen de fondo a la tabla de la siguiente manera.
<TABLE BACKGROUND="url de imagen">
Ejemplo 2
Ejemplo 2
<TABLE BORDER="3" bordercolor="red">
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
<TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR>
<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR>
</TABLE>
COMBINAR CELDAS
COMBINAR CELDAS
Podemos combinar columnas y filas en una tabla, usando los siguientes atributos:
COLSPAN="# columnas" Nos indica la cantidad de columnas que se combinan en una tabla.
ROWSPAN="# filas" Nos indica la cantidad de filas que se combinan en una tabla.
Ejemplo 3
Ejemplo 3
<table border="1">
<tr>
<td colspan="3">Combinación de Columnas</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Ejemplo 4
Ejemplo 4
<table border="1">
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
Ejemplo 5
Ejemplo 5
<TABLE WIDTH="100%"BORDER="1">
<TR>
<TD COLSPAN="2">Head1</TH>
<TD COLSPAN="2">Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
ANCHO Y LARGO
ANCHO Y LARGO
Para cambiar las dimensiones de una tabla y/celda ,se puede lograr con los siguientes atributos:
WIDTH="ancho" ; se puede especificar en píxeles o en porcentaje (ancho de la página en el momento que se esta visualizando.
HEIGHT = " alto" ; también se puede especificar la altura de una celda o tabla en píxeles o en % porcentaje.
Ejemplo 6
Ejemplo 6
<table width="350" border="1">
<tr>
<td>LUNES</td>
<td width="150">MARTES</td>
<td>MIERCOLES</td>
</tr>
<tr>
<td height="80">Internet</td>
<td>Corel Draw</td>
<td>HTML</td>
</tr>
</table>
ESPACIADO Y COLOR DE FONDO EN UNA TABLA
ESPACIADO Y COLOR DE FONDO EN UNA TABLA
Otros atributos importantes en una tabla son los siguientes:
CELLSPACING="3" ;Es el espacio entre las celdas de una tabla
CELLPADDING="6" ;Es el espacio entre el contenido de las celdas y el borde de las mismas.
BGCOLOR="Color" ; No permite colocar color de fondo a una tabla, fila y celda.En código hexadecimal o nombre del color.
Ejemplo 7
Ejemplo 7
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.
<table BGCOLOR="yellow" border="1" cellspacing="10"
CELLPADDING="12">
<tr>
<td>INGRESOS</td>
<td >EGRESOS</td>
<td>SALDOS</td>
</tr>
<tr>
<td bgcolor="#FFDEAD">350.000</td>
<td>250.000</td>
<td>100.000</td>
</tr>
<tr>
<td>1.000.000</td>
<td>200.000</td>
<td>800.000</td>
</tr>
</table>
ALINEACIONES
ALINEACIONES
En una tabla tenemos tanto alineación vertical y horizontal.
ALIGN="left" ; Alineación a la izquierda, existen 3 tipos de alineaciones horizontales: left (izquierda), right (derecha) y center (centro).
VALIGN="top" ; La alineación es superior, existen 3 tipos de alineacion vertical : top (arriba), middle (medio) y bottom (abajo)
Ejemplo 8
Ejemplo 8
<table BGCOLOR="#7FFFD4"
bordercolor="#330099" border="3"
width="320">
<tr height="100" valign="top">
<td> Marzo</td>
<td> Abril</td>
<td> Mayo</td>
</tr>
<tr align="right">
<td>850</td>
<td>920</td>
<td>750</td>
</tr>
<tr bgcolor="#FFFF99">
<td>652</td>
<td>954</td>
<td>470</td>
</tr>
</table>
ENCABEZADO A UNA TABLA
ENCABEZADO A UNA TABLA
Para definir encabezado a una tabla en la primera fila es mediante la etiqueta :
<th> ; define una celda como encabezado de un grupo de celdas en una tabla. Se reemplaza a la etiqueta <td> por <th>
Ejemplo 9
Ejemplo 9
<table border="2">
<tr>
<th>Paises</th>
<th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td>
<td>1300 millones</td>
</tr>
<tr>
<td>India</td>
<td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td>
<td>295 millones</td>
</tr>
</table>
EJERCICIOS
EJERCICIOS
EJERCICIO 1
EJERCICIO 1
EJERCICIO 2
EJERCICIO 2
EJERCICIO 3
EJERCICIO 3
EJERCICIO 4
EJERCICIO 4
Google Sites
Report abuse