III TRIMESTRE
HTML TABLAS
TABLAS
<table> y </table> INICO Y FIN DE
TABLA
<tr> y </tr> Inicio y fin de fila
<td> y </td> columna o celda
<TABLE> INICIO DE TABLA
Ojo: No se
<tr> inicio de fila 1 confundan,
observen bien,
<td>…</td> celda 1 de la fila 1
para que
<td>…</td> celda 2 de la fila 1 distingan las
etiquetas y
</tr> fin de la fila 1
lleguen a
<tr> inicio de fila 2 diferenciar la
etiqueta de tabla
<td>…</td> celda 1 de la fila 2
y de la de fila.
<td>…</td> celda 2 de la fila 2
</tr> Fin de la fila 2
</table> Fin de la tabla
ATRIBUTOS DE UNA TABLA
ATRIBUTO SIGNIFICADO POSIBLES VALORES
width Ancho de la tabla un número, acompañado de % cuando se
desee que sea en porcentaje
height Altura de la tabla un número, acompañado de % cuando se
desee que sea en porcentaje
cellpadding Espacio entre el contenido un número
de las celdas y el borde
cellspacing Espacio entre celdas un número
border Grosor del borde un número
Alineación de la tabla left (izquierda)
align dentro de la página right(derecha)
center (centro)
bgcolor Color de fondo número hexadecimal
background Imagen de fondo número hexadecimal
bordercolor Color del borde número hexadecimal
<table border="2">
<tr>
<td>nombre</td>
<td>descripocion</td>
2 <td>FOTOGRAFIA</td>
ICA
</tr>
<tr>
T
AC
<td>FIESTA 4 DE JULIO</td>
<td>POR EL CENTENARIO DE LA FACULTAD</td>
PR
<td>aquí va texto, imágenes, video</td>
</tr>
<tr>
<td>GATITO</td>
<td>GRAFICO EXTARIDO DEL TUTORIAL</td>
<td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td>
</tr>
<tr>
<td> OTRO CUALQUIERA</td>
<td> PUEDE IR CUALQUIER COSA</td>
<td> O SIMPLEMENTE TEXTO</td>
</tr>
</table>
DO
nombre descripción FOTOGRAFIA
LTA
POR EL CENTENARIO DE
LA FACULTAD aquí va texto,
SU
FIESTA 4 DE JULIO
imágenes, video
RE
GRAFICO EXTRAIDO DEL
GATITO TUTORIAL
PUEDE IR CUALQUIER O SIMPLEMENTE TEXTO
OTRO CUALQUIERA COSA
ATRIBUTOS DE UNA CELDA
ATRIBUTO SIGNIFICADO POSIBLES VALORES
width Ancho de la tabla un número, acompañado de % cuando se
desee que sea en porcentaje
height Altura de la tabla un número, acompañado de % cuando se
desee que sea en porcentaje
Alineación horizontal del left (izquierda)
align contenido de la celda right(derecha)
center (centro)
baseline (línea de base)
Alineación vertical del bottom (inferior) middle
valign (medio)
contenido de la celda
top (superior)
bgcolor Color de fondo número hexadecimal
background Imagen de fondo número hexadecimal
bordercolor Color del borde número hexadecimal
<tr align="center" bgcolor="yellow">
<td bgcolor="purple">GATITO</td>
Para toda la fila la alineación es Centrado y el fondo amarillo Solo para la celda el fondo es
púrpura
TITULO DE COLUMNA
<th> y </th> idéntico a td pero centrado y negrilla
COMBINACIÓN DE CELDAS
colspan y rowspan
colspan. Especifica el número de columnas por las que se extenderá la celda
Rowspan. Especifica el número de filas por las que se extenderá la celda
<table width="575" border="2" cellspacing="2">
<tr align="center" valign="middle">
3 <th colspan="4">combinacion de 4 columnas</th>
ICA
</tr>
<tr align="center" valign="middle">
T
AC
<th rowspan="2">NOMBRE</th>
PR
<th colspan="2">DATOS</th>
<th rowspan="2">FECHA</th>
</tr>
<tr align="center" valign="middle">
<th>NOTA 1</th>
<th>NOTA 2</th>
</tr>
CONTINUA……….
<tr align="center" valign="middle">
<td>JUAN CARLOS</td>
<td>1.75</td>
<td>2.97</td>
<td>16/AGOSTO/2017</td>
</tr>
<tr align="center" valign="middle">
<td>LUISA</td>
<td >3.65</td>
<td >2.65</td>
<td>30/AGOSTO/2017</td>
</tr>
</table>
D O
TA
U L combinación de 4 columnas
ES DATOS
R NOMBRE
NOTA 1 NOTA 2
FECHA
JUAN CARLOS 1.75 2.97 16/AGOSTO/2017
LUISA 3.65 2.65 30/AGOSTO/2017
