1 TABLE TR TD
Anuncio
TABLE La etiqueta general, que engloba a las siguientes. TR En el siguiente nivel, dentro de TABLE, están las etiquetas para formar cada fila de la tabla. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. TD En el último nivel, dentro de TR, están las etiquetas de cada celda, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirlas tantas veces como celdas queremos que haya en esa fila. <HTML> <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> <TR> <TD>fila3 - celda1</TD><TD>fila3 - celda2</TD><TD>fila3 - celda3</TD> </TR> </TABLE> </BODY> </HTML> 1 BORDER = “ “> WIDTH = “ “> <TABLE HEIGHT = “ “> CELLPADING = “ “> CELLSPACING = “ “> <TR <TD <TH ALIGN = “ “> Establece el grueso de los bordes externos de la tabla Establece el ancho o longitud horizontal de la tabla Establece la altura o longitud vertical de la tabla Indica la distancia entre los bordes de cada celda y el texto que va dentro de ellas. Señala la anchura de los bordes de cada celda Especifica la alineación horizontal del texto de una fila ROWSPAN = “ “> Especifica la anchura de una celda en función de las celdas inferiores COLSPAN = “ “> Especifica la altura de una celda en función de la altura de las celdas adyacentes WIDTH = “ “> Determina la anchura de una celda individual HEIGHT = “ “> Determina la altura de una celda individual ALIGN = “ “> Especifica la alineación horizontal del texto dentro de la celda VALIGN = “ “> Especifica la alineación horizontal del texto dentro de la celda ROWSPAN = “ “> Especifica la anchura de una celda de encabezamiento en función de las celdas inferiores COLSPAN = “ “> Especifica la altura de una celda de encabezamiento en función de la altura de las celdas adyacentes ALIGN = “ “> Especifica la alineación horizontal del texto dentro de la celda de encabezamiento 2 <html> <body> <table border> <tr> <!-- INICIO DE LA 1era. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO 1, 2, 3 --> <td width = "30" height = "40">1</td><!-- 1ERA. CELDA DE LA 1ERA. FILA. EL TEXTO TOMA LAS ALINEACIONES POR DEFECTO QUE SON HACIA LA IZQUIERDA Y EN EL MEDIO--> <td width = "40" height = "50" align = "center" valign = "top">2</td><!-- 2DA. CELDA DE LA 1ERA. FILA. EL TEXTO ESTA CENTRADO Y ARRIBA--> <td width = "50" height = "60" align = "right" valign = "bottom">3</td><!-- 3RA. CELDA DE LA 1ERA. FILA. EL TEXTO ESTA ALINEADO HACIA LA DERECHA Y EN EL FONDO DE LA CELDA--> </tr> <!-- SE CIERRA LA 1ERA. FILA --> <tr> <!-- INICIO DE LA 2DA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO 4, 5, 6 --> <td width = "100 height = "50" align = "right" valign = "top">4 <!-- 1ERA. CELDA DE LA 2DA. FILA--> <td width = "50" height = "60" align = "center" valign = "bottom">5 <!-- 2DA. CELDA DE LA 2DA. FILA--> <td width = "60" height = "70" >6 <!-- 3RA. CELDA DE LA 2DA. FILA--> </tr> <!-- SE CIERRA LA 2DA. FILA --> <tr> <!-- INICIO DE LA 3RA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO 7, 8, 9 --> <td width = "50" height = "125" align = "center" valign = "middle">7 <!-- 1ERA. CELDA DE LA 3RA. FILA--> <td width = "70" height = "80" align = "left" valign = "top">8 <!-- 2DA. CELDA DE LA 3RA. FILA--> <td width = "80" height = "90" align = "right" valign = "bottom"> 9 <!-- 3RA. CELDA DE LA 3RA. FILA--> </tr> <!-- SE CIERRA LA 3RA. FILA --> <!-- EL ATRIBUTO ALIGN CORRESPONDE A LA ALINEACIÓN HORIZONTAL, MIENTRAS QUE VALIGN A LA VERTICAL. LOS VALORES POR DEFECTO DE CADA UNO DE ESTOS ATRIBUTOS SON LEFT PARA ALIGN Y MIDDLE PARA VALIGN.--> </body> </html> 3 <html> <body> <table border> <tr align = "right" > <!-- INICIO DE LA 1ERA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO 1, 2, 3 QUE ESTARA ALINEADO A LA DERECHA YA QUE EL VALOR DEL ATRIBUTO ALIGN ES RIGHT --> <td width = "30" height = "40">1 <!-- 1ERA. CELDA DE LA 1ERA. FILA--> <td width = "30" height = "40">2 <!-- 2DA. CELDA DE LA 1ERA. FILA--> <td width = "30" height = "40">3 <!-- 3RA. CELDA DE LA 1ERA. FILA--> </tr> <!-- SE CIERRA LA 1ERA. FILA --> <tr align = "center"> <!-- INICIO DE LA 2DA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO 4, 5, 6 QUE ESTARA CENTRADO YA QUE EL VALOR DEL ATRIBUTO ALIGN ES CENTER --> <td width = "30" height = "40">4 <!-- 1ERA. CELDA DE LA 2DA. FILA--> <td width = "30" height = "40">5 <!-- 2DA. CELDA DE LA 2DA. FILA--> <td width = "30" height = "40">6 <!-- 3RA. CELDA DE LA 2DA. FILA--> </tr> <!-- SE CIERRA LA 2DA. FILA --> <tr> <!-- INICIO DE LA 3RA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO 7, 8, 9 Y NO POSEE LA ETIQUETA DE ALINEACION --> <td width = "30" height = "40">7 <!-- 1ERA. CELDA DE LA 3RA. FILA--> <td width = "30" height = "40">8 <!-- 2DA. CELDA DE LA 3RA. FILA--> <td width = "30" height = "40">9 <!-- 3RA. CELDA DE LA 3RA. FILA--> </tr> <!-- SE CIERRA LA 3RA. FILA --> <!-- OBSERVE QUE LA 3RA. FILA NO TIENE EL ATRIBUTO ALIGN POR LO QUE TOMA LA ALINEACION PREDETERMINADA, LA CUAL ES HACIA LA IZQUIERDA --> </body> </html> <html> <body> <table border> <tr> <!-- INICIO DE LA 1ERA. FILA QUE SE RELLENA CON 3 CELDAS CON EL TEXTO 1, 2, 3 --> <td width = "30" height = "40" >1</td><!-- 1ERA. CELDA DE LA 1ERA. FILA.--> 4 <td width = "40" height = "50" >2</td><!-- 2DA. CELDA DE LA 1ERA. FILA.--> <td width = "50" height = "60" >3</td><!-- 3RA. CELDA DE LA 1ERA. FILA.--> </tr> <!-- SE CIERRA LA 1ERA. FILA --> <tr> <!-- INICIO DE LA 2DA. FILA QUE SE RELLENA CON 3 CELDAS CON EL TEXTO 4, 5, 6 --> <td width = "100 height = "50" >4 <!-- 1ERA. CELDA DE LA 2DA. FILA--> <td width = "50" height = "60" >5 <!-- 2DA. CELDA DE LA 2DA. FILA--> <td width = "60" height = "70" >6 <!-- 3RA. CELDA DE LA 2DA. FILA--> </tr> <!-- SE CIERRA LA 2DA. FILA --> <tr> <!-- INICIO DE LA 3RA. FILA QUE SE RELLENA CON 3 CELDAS CON EL TEXTO 7, 8, 9 --> <td width = "50" height = "125" >7 <!-- 1ERA. CELDA DE LA 3RA. FILA--> <td width = "70" height = "80" >8 <!-- 2DA. CELDA DE LA 3RA. FILA--> <td width = "80" height = "90"> 9 <!-- 3RA. CELDA DE LA 3RA. FILA--> </tr> <!-- SE CIERRA LA 3RA. FILA --> <!-- OBSERVE QUE LAS CELDAS VARIAN EN TAMAÑO VERTICAL Y HORIZONTAL. SIN EMBARGO, EN EL CONJUNTO DE LA TABLA, LA ANCHURA Y ALTURA DE CADA CELDA SE AJUSTARA A LA CELDA QUE MAYOR ANCHURA Y ALTURA TIENE--> </body> </html> <html> <body> <table border width= "45%" height="45%"><!-- CON EL ATRIBUTO WIDTH EL ANCHO DE LA TABLA SERA DE UN 45% DE LA VENTANA Y CON EL ATRIBUTO HEIGHT LA ALTURA DE LA TABLA SERA DE UN 45% --> <tr> <!-- INICIO DE LA 1ERA FILA QUE SE RELLENA CON 3 CELDAS CON EL TEXTO 1, 2, 3 --> <td>1 <!-- 1ERA CELDA DE LA 1ERA FILA--> <td>2 <!-- 2DA. CELDA DE LA 1ERA FILA--> <td>3 <!-- 3RA. CELDA DE LA 1ERA FILA--> </tr> <!-- SE CIERRA LA 1ERA FILA --> <tr> <!—INICIO DE LA 2DA. FILA QUE SE RELLENA CON TRES CELDAS CON EL TEXTO 4, 5, 6 --> 5 <td>4 <!-- 1ERA CELDA DE LA 2DA. FILA--> <td>5 <!-- 2DA. CELDA DE LA 2DA. FILA--> <td>6 <!-- 3RA. CELDA DE LA 2DA. FILA--> </tr> <!-- SE CIERRA LA 2DA. FILA --> </body> </html> <html> <body> <table border cellpadding="25" CELLSPACING ="40"><!-- CON EL ATRIBUTO CELLPADDING SE AUMENTA O DISMIUYE EL ESPACIO ENTRE ELTEXTO DE TODAS LAS FILAS Y LOS BORDES DE CADA UNA. CON EL ATRIBUTO CELLSPACING SE AUMENTA O DISMINUYE EL GROSOR DE LOS BORDES DE TODAS LAS CELDAS QUE COMPONEN LA TABLA --> <tr> <!-- INICIO DE LA 1ERA. FILA QUE SE RELLENA CON 3 CELDAS CON EL TEXTO 1, 2, 3 --> <td>1 <!-- 1ERA. CELDA DE LA 1ERA. FILA--> <td>2 <!-- 2DA. CELDA DE LA 1ERA. FILA--> <td>3 <!-- 3RA. CELDA DE LA 1ERA. FILA--> </tr> <!-- SE CIERRA LA 1ERA. FILA --> <tr> <!-- INICIO DE LA 2DA. FILA QUE SE RELLENA CON 3 CELDAS CON EL TEXTO 4, 5, 6 --> <td>4 <!-- 1ERA. CELDA DE LA 2DA. FILA--> <td>5 <!-- 2DA. CELDA DE LA 2DA. FILA--> <td>6 <!-- 3RA. CELDA DE LA 2DA. FILA--> </tr> <!-- SE CIERRA LA 2DA. FILA --> </body> </html> 6 <html> <body> <table border width = "120" height = "120"> <tr> <!-- SE INICIA LA 1ERA. FILA QUE CONTIENE EL TEXTO ITEMS Y QUE OCUPA UN ANCHO EQUIVALENTE A LAS 3 COLUMNAS QUE CONFORMAN LA TABLA --> <td COLSPAN = "3">ITEMS</td><!-- 1ERA. Y UNICA CELDA DE LA 1ERA. FILA. AQUI SE UTILIZA EL ATRIBUTO COLSPAN PARA DEFINIR QUE EL ANCHO DE ESTA CELDA SERA DE 3 COLUMNAS--> </tr> <tr><!-- SE INICIA LA 2DA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM1, ITEM2, ITEM3 --> <td>ITEM1</td><!-- 1ERA. CELDA DE LA 2DA. FILA--> <td>ITEM2</td><!-- 2DA. CELDA DE LA 2DA. FILA--> <td>ITEM3</td><!-- 3RA. CELDA DE LA 2DA. FILA--> </tr> <tr><!-- SE INICIA LA 3RA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM4, ITEM5, ITEM6 --> <td>ITEM4</td><!-- 1ERA. CELDA DE LA 3RA. FILA--> <td>ITEM5</td><!-- 2DA. CELDA DE LA 3RA. FILA--> <td>ITEM6</td><!-- 3RA. CELDA DE LA 3RA. FILA--> <tr><!-- SE INICIA LA 4ta. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM7, ITEM8, ITEM9 --> <td>ITEM7</td><!-- 1ERA. CELDA DE LA CUARTA FILA--> <td>ITEM8</td><!-- 2DA. CELDA DE LA CUARTA FILA--> <td>ITEM9</td><!-- 3RA. CELDA DE LA CUARTA FILA--> </table> </body> </html> 7 <html> <body> <table border width = "120" height = "120"> <tr> <!-- SE INICIA LA 1ERA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM1, ITEM2, ITEM3 --> <td>ITEM1</td><!-- 1ERA. CELDA DE LA 1ERA. FILA--> <td>ITEM2</td><!-- 2DA. CELDA DE LA 1ERA. FILA --> <td>ITEM3</td><!-- 3ERA. CELDA DE LA 1ERA. FILA--> <td rowspan = "2">ITEMS</td> <!-- PUEDE VERSE COMO LA CUARTA CELDA DE LA 1ERA. O 2DA. FILA. EL ATRIBUTO ROWSPAN INDICA QUE LA CELDA QUE LO POSEE TENDRA UN TAMAÑO EQUIVALENTE A VARIAS FILAS DE LA TABLA, EN ESTE CASO POSEE DOS FILAS--> </tr> <td>ITEM4</td><!-- 1ERA. CELDA DE LA 2DA. FILA--> <td>ITEM5</td><!-- 2DA. CELDA DE LA 2DA. FILA--> <td>ITEM6</td><!-- 3ERA. CELDA DE LA 2DA. FILA--> </tr> </table> </body> </html> 8 <html> <body> <table border width = "120" height = "120"> <tr> <!-- SE INICIA LA 1ERA. FILA QUE CONTIENE EL TEXTO ITEM SUPERIOR Y QUE OCUPA UN ANCHO EQUIVALENTE A LAS 3 COLUMNAS QUE CONFORMAN LA TABLA --> <td COLSPAN = "3">ITEM SUPERIOR</td><!-- 1ERA. Y UNICA CELDA DE LA 1ERA. FILA. SE USA EL ATRIBUTO COLSPAN PARA DEFINIR QUE EL ANCHO SERA DE 3 COLUMNAS--> </tr> <tr><!-- SE INICIA LA 2DA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM1, ITEM2, ITEM3 --> <td>ITEM1</td><!-- 1ERA. CELDA DE LA 2DA. FILA--> <td>ITEM2</td><!-- 2DA. CELDA DE LA 2DA. FILA--> <td>ITEM3</td><!-- 3ERA. CELDA DE LA 2DA. FILA--> </tr> <tr><!-- SE INICIA LA 3ERA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM4, ITEM5, ITEM6 --> <td>ITEM4</td><!-- 1ERA. CELDA DE LA 3ERA. FILA--> <td>ITEM5</td><!-- 2DA. CELDA DE LA 3ERA. FILA--> <td>ITEM6</td><!-- 3ERA. CELDA DE LA 3ERA. FILA--> <tr><!-- SE INICIA LA 4TA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM7, ITEM8, ITEM9 --> <td>ITEM7</td><!-- 1ERA. CELDA DE LA 4TA. FILA--> <td>ITEM8</td><!-- 2DA. CELDA DE LA 4TA. FILA--> <td>ITEM9</td><!-- 3ERA. CELDA DE LA 4TA. FILA--> <tr> <!-- SE INICIA LA 5TA. FILA QUE CONTIENE EL TEXTO ITEM INFERIOR Y QUE OCUPA UN ANCHO EQUIVALENTE A LAS 3 COLUMNAS QUE CONFORMAN LA TABLA --> <td COLSPAN = "3">ITEM INFERIOR</td><!-- 1ERA. Y UNICA CELDA DE LA 5TA. FILA. SE UTILIZA EL ATRIBUTO COLSPAN PARA DEFINIR QUE EL ANCHO DE CELDA SERA DE 3 COLUMNAS--> </tr> </table> </body> </html> 9 <html> <body> <table border width = "120" height = "120"> <tr> <!-- SE INICIA LA 1ERA. FILA QUE SE RELLENA CON 3 CELDAS QUE CONTIENEN EL TEXTO ITEM1, ITEM2, ITEM3 --> <td rowspan = "2">ITEM IZQ</td> <!-- PUEDE VERSE COMO LA 1ERA. CELDA DE LA 1ERA. O 2DA. FILA. EL ATRIBUTO ROWSPAN INDICA QUE LA CELDA QUE LO POSEE TENDRA UN TAMAÑO EQUIVALENTE A VARIAS FILAS DE LA TABLA, EN ESTE CASO POSEE DOS FILAS--> <td>ITEM1</td><!-- 2DA. CELDA DE LA 1ERA. FILA--> <td>ITEM2</td><!-- 3ERA. CELDA DE LA 1ERA. FILA --> <td>ITEM3</td><!-- 4TA. CELDA DE LA 1ERA. FILA--> <td rowspan = "2">ITEM DER</td> <!-- PUEDE VERSE COMO LA 4TA. CELDA DE LA 1ERA. O 2DA. FILA. EL ATRIBUTO ROWSPAN INDICA QUE LA CELDA QUE LO POSEE TENDRA UN TAMAÑO EQUIVALENTE A VARIAS FILAS DE LA TABLA, EN ESTE CASO POSEE DOS FILAS--> </tr> <td>ITEM4</td><!-- 1ERA. CELDA DE LA 2DA. FILA--> <td>ITEM5</td><!-- 2DA. CELDA DE LA 2DA. FILA--> <td>ITEM6</td><!-- 3ERA. CELDA DE LA 2DA. FILA--> </tr> </table> </body> </html> 10
