COLEGIO NACIONAL NICOLAS
ESGUERRA
EDIFICAMOS FUTURO
SANTIAGO SANCHEZ
SEBASTIAN SALAMANCA
PAGINAWEB V
Tablas
En este tema vamos a ver cómo trabajar con tablas. Podremos insertartablas, filas y
columnas, y modificar sus propiedades.
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros que se obtienen como
resultado de la intersección entre una fila y una columna.
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas
etiquetas habrá que especificar las filas y columnas que formarán la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas
etiquetas deberán insertarse entre las etiqetas <table> y </table>.
Por ejemplo, para crear una tabla con cincofilas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columnao 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.
Habría que escribir:
<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>
Formato de la tabla
Por ejemplo, para modificar la tabla de la página anterior para que quedase como la
siguiente:
Formato de las celdas
También es posible modificar estos atributos de toda una fila, especificándolos en la
etiqueta <tr>, en lugar de en la etiqueta <td>.
Hay que tener en cuenta que los atributos tienen más prioridad cuandoson establecidos
para una celda que cuando son establecidos para una fila completa. Al mismo tiempo,
tienen más prioridad los atributos establecidos para una fila que los establecidos para
toda la tabla.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#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>
<HTML>
<HEAD>
<TITLE>PASION DEPORTE 905</TITLE>
</HEAD>
<I--PAGINA WEBELABORADA POR:SantiagoSanchezy SebastianSalamanca//-->
<BODY BGCOLOR="#333333">
<hr>
<MARQUEE bgcolor="WHITE" behavior="alternate"direction="right"><H1>BIENVENIDOSA
NUESTRA WEB CORPORATIVA</marquee>
<hr>
<center> <imgsrc="imagenes/PASION.jpg"width="300"height="150">
<img src="imagenes/uniforme.png"width="300"height="150">
<img src="imagenes/MERCURIAL.png"width="300"height="150"></center>
<hr>
<font color="black"size="6"face="comicsansMS"><B>PASION DEPORTE</B> </font>
<font color="white"size="3"face="comicsansMS"><B>ARTICULOS DEPORTIVOS
</B></I></font>
<BR>
<P ALIGN="CENTER">
La empresaoriginalmente llamada"GebrüderDasslerSchuhfabrik"fue fundadaporAdolf "Adi"
Dassler,
en loscomienzosde ladécadade 1920 en Alemaniajuntoconlaayuda de su hermanoRudolf
Dassler.
Confeccionabanzapatillasypantuflassinmarcaadquirida,ytambiéncalzadoconclavospara
deportistas.
Adi era el artistaintrovertidoyRudi el encargadode relacionespúblicas.
Amboslograroncolocarsus productosenel equipoalemánde atletismo.Peroel golpemaestro
fue fichara Jesse Owens,
el atletaque deslumbróenlosJuegosOlímpicosde Berlínen1936
</P>
<font color="black"size="6"face="comicsans MS"><B>PASION DEPORTE</B> </font>
<font color="white"size="3"face="comicsansMS"><B>ARTICULOS DEPORTIVOS
</B></I></font>
<blockquote>
NUESTRA EMPRESA LLEVA 10 AÑOSBRINDANDOLOSMEJORES PRODUCTOSDEPORTIVOS
<hr>
<table width="50%"border="2"align="center"cellspacing="0"bordercolor="#000000"
bgcolor="#FFCC99">
<tr align="center"bgcolor="003366">
<td>ficha</td>
<td bgcolor="green">tecnica</td>
</tr>
<tr>
<td>adidasmercurial</td>
<td>200.000</td>
</tr>
<tr>
<td>uniforme</td>
<td>150.000</td>
</tr>
<tr>
<td>adidasbrazuca</td>
<td>80.000</td>
<hr align="center"width="50%"size="5"color="blue"noshade>
<pre>
copyright2015
COLEGIO NACIONALNICOLASESGUERRA
CALLE 6 85 - 35 BOGOTA- COLOMBIA
</BODY>
</HTML>

Tablas

  • 1.
    COLEGIO NACIONAL NICOLAS ESGUERRA EDIFICAMOSFUTURO SANTIAGO SANCHEZ SEBASTIAN SALAMANCA PAGINAWEB V Tablas En este tema vamos a ver cómo trabajar con tablas. Podremos insertartablas, filas y columnas, y modificar sus propiedades. Tabla <table> Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.
  • 2.
    Para crear unatabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>. Por ejemplo, para crear una tabla con cincofilas escribiríamos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> Columnao 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. Habría que escribir: <table border="1"> <tr> <td>Sabado</td>
  • 3.
    <td>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>CursoFrontpage</td> <td>Curso Flash</td> </tr> </table> Formato de la tabla Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:
  • 4.
    Formato de lasceldas También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen más prioridad cuandoson establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC">
  • 5.
    <td>Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>CursoDreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>
  • 6.
    <HTML> <HEAD> <TITLE>PASION DEPORTE 905</TITLE> </HEAD> <I--PAGINAWEBELABORADA POR:SantiagoSanchezy SebastianSalamanca//--> <BODY BGCOLOR="#333333"> <hr> <MARQUEE bgcolor="WHITE" behavior="alternate"direction="right"><H1>BIENVENIDOSA NUESTRA WEB CORPORATIVA</marquee> <hr> <center> <imgsrc="imagenes/PASION.jpg"width="300"height="150"> <img src="imagenes/uniforme.png"width="300"height="150"> <img src="imagenes/MERCURIAL.png"width="300"height="150"></center> <hr> <font color="black"size="6"face="comicsansMS"><B>PASION DEPORTE</B> </font> <font color="white"size="3"face="comicsansMS"><B>ARTICULOS DEPORTIVOS </B></I></font> <BR> <P ALIGN="CENTER"> La empresaoriginalmente llamada"GebrüderDasslerSchuhfabrik"fue fundadaporAdolf "Adi" Dassler, en loscomienzosde ladécadade 1920 en Alemaniajuntoconlaayuda de su hermanoRudolf Dassler. Confeccionabanzapatillasypantuflassinmarcaadquirida,ytambiéncalzadoconclavospara deportistas. Adi era el artistaintrovertidoyRudi el encargadode relacionespúblicas. Amboslograroncolocarsus productosenel equipoalemánde atletismo.Peroel golpemaestro fue fichara Jesse Owens, el atletaque deslumbróenlosJuegosOlímpicosde Berlínen1936 </P> <font color="black"size="6"face="comicsans MS"><B>PASION DEPORTE</B> </font> <font color="white"size="3"face="comicsansMS"><B>ARTICULOS DEPORTIVOS </B></I></font> <blockquote> NUESTRA EMPRESA LLEVA 10 AÑOSBRINDANDOLOSMEJORES PRODUCTOSDEPORTIVOS <hr> <table width="50%"border="2"align="center"cellspacing="0"bordercolor="#000000"
  • 7.