jueves, 4 de julio de 2013

DISEÑO DE PAGINA WEB

ESTRUCTURA DE UNA TABLA
1) el siguiente nivel corresponde a las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>

<TABLE BORDER>
                <TR>
                            etiquetas de las distintas celdas de la primera fila
                </TR>
                <TR>
                           etiquetas de las distintas celdas de la segunda fila
                 </TR>
</TABLE>

2)
<TABLE BORDER>
                 <TR>
                           <TD>fila1-celda1</TD>
                           <TD>fila1-celda2</TD>
                 </TR>
                  <TR>
                            <TD>fila2-celda1</TD>
                            <TD>fila2-celda2</TD>
                   </TR>
</TABLE>
 
3) crea la siguiente tabla ..
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
                   <TR>
                                 <TD>fila1-celda1</TD>
                                 <TD>fila1-celda2</TD>
                                 <TD>fila1-celda3</TD>
                   </TR>
                    <TR>
                                  <TD>fila2-celda1</TD>
                                 <TD>fila2-celda2</TD>
                                 <TD>fila2-celda3</TD>
                     </TR>

 </TABLE>
</BODY>
</HTML>

4) ahora vamos a variar el espesor  de los bordes, hacemos poniendo un signo = y un numero en (<TABLE BORDER=5>). el listado ahora debe estar asi
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
 <TABLE BORDER>    
                    <CAPTION>titulo de la tabla </CAPTION>
                     <TR>
                                 <TD>fila1-celda1</TD>
                                 <TD>fila1-celda2</TD>
                                 <TD>fila1-celda3</TD>
                      </TR>
                      <TR>
                                    <TD>fila2-celda1</TD>
                                    <TD>fila2-celda2</TD>
                                    <TD>fila2-celda3</TD>
                      </TR>

 </TABLE>
</BODY>
</HTML>

5) para poner un texto ...., para poner una imagen ...., para poner un enlace
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TD>este texto esta dentro de una celda</A></TD>
                          para poner una imagen
<TD><IMG SRC="imagen1.jpg"></TD>
                          para poner un enlace
<TD><A HREF="primera.htm">ir a la primera pagina</a></td>
</TABLE>
</BODY>
</HTML>

6)  tabla con color de fondo. el encabezado nos quedara..
<TABLE BORDER=5 WIDTH=60%  HEIGHT=200 BGCOLOR="·00FF00">
celda que tenga un color de fondo:
<TD BGCOLOR="·0000FF">fila1-celda1</TD>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH=60%  HEIGHT=200 BGCOLOR="·00FF00">
                       <CAPTION>titulo de la tabla </CAPTION>
                        <TR>
                       <TH>columna1</TH>
                       <TH>columna2</TH>
                       <TH>columna3</TH>
                        </TR>
                        <TR>
                                      <TD  BGCOLOR="·0000FF">fila1-celda1</TD>
                                      <TD>fila2-celda1</TD>
                                      <TD>fila2-celda2</TD>
                                      <TD>fila2-celda3</TD>
                       </TR>
</TABLE>
</BODY>
</HTML>
                                     

No hay comentarios:

Publicar un comentario