Las tablas HTML se utilizan para organizar datos en filas y columnas. Se componen de elementos como <table>, <tr>, y <td> que definen la tabla, las filas y las celdas. Se pueden agregar bordes, colores de fondo, combinar celdas y filas, y ajustar el ancho, alto, espaciado y alineación de las celdas y tablas.

1. TABLAS HTML
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
<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>
El resultado es el siguiente:
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
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
<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>
Celda A1 Celda B1 Celda C1
Celda A2 Celda B2 Celda C2
Celda A3 Celda B3 Celda C3
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
<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>
Hemos combinados las tres columnas de la 1era fila
Combinación de Columnas
Celda 4 Celda 5 Celda 6
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>
Combinar Filas de una tabla
Campo unificado
Campo 2 Campo 3
Campo 5 Campo 6
Campo 8 Campo 9
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>
Head1 Head2
A B C D
E F G H
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
<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>
LUNES MARTES MIERCOLES
Internet Corel Draw HTML
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
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>
INGRESOS EGRESOS SALDOS
350.000 250.000 100.000
1.000.000 200.000 800.000
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
<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>
Marzo Abril Mayo
850 920 750
652 954 470
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
<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>
Paises Cantidad de habitantes
China 1300 millones
India 1080 millones
Estados Unidos 295 millones
EJERCICIOS
EJERCICIO 1
EJERCICIO 2
EJERCICIO 3
EJERCICIO 4
KARLOSNUN HERRAMIENTAS DE INTERNET EXCEL AVANZADO 3D MAX ACCESS COREL DRAW CSS More
CANAL DE YOUTUBE