El documento proporciona información sobre cómo crear tablas en HTML. Explica que las tablas están formadas por filas y celdas, y proporciona ejemplos de código HTML para crear una tabla básica con dos filas y dos columnas. También describe cómo formatar tablas y celdas individuales modificando atributos como el ancho, el color de fondo y el borde.

1. COLEGIO NACIONAL NICOLAS ESGUERRA
EDIFICAMOS FUTURO
Dilan Eduardo ríos
Duvan Felipe pesca 904
PAGINA WEB V
Tablas:
imagen y texto
COLUM
NA
Texto dentro
de una celda
FILA CELDA
Las tablas están formadas por celdas, que son los recuadros quese obtienen
como resultado de la intersección entre una fila y una columna.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la
tabla. Estas etiquetas deberán insertarseentre las etiqetas <table> y
</table>.
EJEMPLO:

2. <table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas, es necesario
también especificar el número de columnas.
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
EJEMPLO:
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Formatode la tabla
Es posible modificar los siguientes atributos de una tabla:

3. 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 de las
celdas y el borde
un número
cellspacing espacio entre celdas un número
border grosor del borde un número
align
alineación de la tabla dentro de
la página
left (izquierda)
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
Por ejemplo, para modificar la tabla de la página anterior para que quedase
como la siguiente:
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
EJEMPLO:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" b
gcolor="#FFCC99">
Formatode las celdas
Es posible modificar los siguientes atributos de una celda

4. 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
align
alineación horizontal del
contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign
alineación vertical del contenido
de la celda
baseline (línea de base)
bottom (inferior)
middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
EJEMPLO:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" b
gcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
Se ha establecido el color naranja como fondo de toda la tabla, pero con la
línea de código <tr align="center" bgcolor="#0099CC">seha establecido el
color azulcomo color de fondo de la primera fila, por lo que dicha fila se
mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha
cambiado el color de la segunda celda de la primera fila por el color verde, a
través de la línea <td bgcolor="#66CC99">Domingo</td>por lo que esta fila

5. en vez de ser azul será verde, los atributos de celda tienen prioridad sobrelos
de la fila.
Encabezado de columna <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de
las filas, pero podemos poner en su lugar las etiquetas <th> y </th>.
<table width="50%" border="1" align="center">
<tr>
<th>Sabado</td>
<th>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Sábado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
Título de tabla <caption>
No solamente es posible establecertítulos para las columnas, también
es posible establecerun título para la tabla mediante las etiquetas
<caption> y </caption>.
EJEPMLO:

6. <table width="50%" border="1" align="center">
<caption align="right" valign="top">Titulo de la tabla<tr>
<tr>
<th>Sabado</td>
...
</tr>
</table>
RESULTADO FINAL:

7. CODIGO:
<html>
<head>
<title>tecnologiadyd904</title>
<head>
<!--Paginaweb elaborada por dilanrios y duvan pesca904 //-->
<body bgcolor="red">
<hr>
<MARQUEE><B><I>BIENVENIDOS A NUESTRA WEB CORPORATIVA</B></I>></MARUQEE><br>
<hr>
<H3>nuestra empresabrinda un serviciorapido, confiable y a la vezseguro</H3><br>
<font color="white" size="7" face="ARIAL"><B> tecnolgiadyd <B> </font>
<font color="green" size="6" face="ARIAL"><B> tecnolgiadyd <B> </font><BR>
<img src="imagenes/1.jpg" alt="ciencia_y_tec.jpg" border="3" width="600" height="160"
align="middle">
<P ALIGN="CENTER">TecnologiaDYD se usa a menudo para referirse a cualquierforma de hacer
cómputo. Como nombre de
un programa de licenciatura,se refiere a la preparación que tienenestudiantespara satisfacer
las necesidadesde
tecnologíasencomputo y comunicaciónde gobiernos,seguridadsocial,escuelasy cualquiertipo
de organización
<font color="white" size="7" face="ARIAL"><B> tecnolgiadyd <B> </font>
<font color="green" size="6" face="ARIAL"><B> tecnolgiadyd <B> </font><BR>
<img src="1.jpg" alt="ciencia_y_tec.jpg" border="3" width="600" height="160" align="middle">
<table width="25%" border="4" align="center" cellspacing="4" bordercolor="#000000"
bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>COMPUTADORES</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>LENOVO</td>
<td>computador con memoria 4.0 gb</td>
</tr>
<tr>
<td>HP</td>
<td>computador portatil con audifonosoriginales</td>
</tr>
</table>
<hr align="left" width="82%" size="5" color="blue" noshade>

8. <pre> Copyright 2015
ColegioNacional Nicolas Esuguerra
cll 58 N SUR #18-45
TECNOLOGYDYD15@HOTMAIL.COM</pre>
</body>
</html>