Scribd
Cargar
186 vistas4 páginas

Guía de Tablas HTML y Celdas Avanzadas

Una tabla HTML está compuesta de filas y celdas. Se define con las etiquetas <table>, <tr>, y <td>. Existen celdas normales (<td>) y de encabezado (<th>) para resaltar información. Se pueden unificar celdas vertical u horizontalmente usando los atributos "rowspan" y "colspan". El ancho, borde, espaciado y relleno de celdas se controla con los atributos "width", "border", "cellspacing" y "cellpadding".

Cargado por

Jesus Chilque Luna
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
186 vistas4 páginas

Guía de Tablas HTML y Celdas Avanzadas

Una tabla HTML está compuesta de filas y celdas. Se define con las etiquetas <table>, <tr>, y <td>. Existen celdas normales (<td>) y de encabezado (<th>) para resaltar información. Se pueden unificar celdas vertical u horizontalmente usando los atributos "rowspan" y "colspan". El ancho, borde, espaciado y relleno de celdas se controla con los atributos "width", "border", "cellspacing" y "cellpadding".

Cargado por

Jesus Chilque Luna
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

TABLAS EN HTML

Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, as como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:

TIPOS DE CELDAS
Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene informacin de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comnmente encontrado en el encabezado de una tabla. En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:

UNIFICANDO CELDAS (COMBINAR CELDAS)


Para algunas tablas puedes necesitar unificar dos o ms celdas en una sola que tomar el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).

Espaciado
Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de las mismas. 1. width= Acompaa a <table> y especifica el ancho de la tabla, tanto en nmero de pixeles como en porcentaje respecto al ancho de la pantalla. Tambin puede acompaar a las tags <th> o <td> para especificar el ancho de las columnas. 2. Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicar el ancho del borde en pixeles. Border="0" indicara la ausencia de borde. 3. Cellspacing= Suele acompaar a la tag <table>. Indica el nmero de pixeles que separan cada celda. El valor predeterminado suele ser 2. 4. Cellpadding= Tambin acompaa a la tag <table>. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1. Ejemplo:
<HTML> <HEAD> <TITLE>Ejemplo 11</TITLE> </HEAD> <BODY> <H1>Tablas avanzadas</H1> <TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2"> <TR> <TD COLSPAN="2" ALIGN="right">Dato 1</TD> <TD>Un texto cualquiera</TD> <TD ROWSPAN="2">Dato 3</TD> </TR>

<TR> <TD>Dato 4</TD> <TD>Dato 4</TD> <TD ALIGN="center">Dato 5</TD> </TR> </TABLE> </BODY> </HTML>

También podría gustarte