Inf2 p1b exc15_celin_valenzuela

HTML

Colegio BuceriasCelina ValenzuelaIng. Azucena CervantesEtiquetas html1’’B’’ 26/05/15

¿Qué es una tabla en código 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 (y no al revés). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda).

Tablas Para insertar una tabla en una página de internet

debes incluir el código que aparece a continuación. Este puede ser modificado para obtener diferentes resultados y estilos de tablas.

Código:<table border=1><td>Aqui va el contenido de la tabla, texto, imágenes, etc.</td></table>

El número uno se refiere al tamaño del borde de la tabla. Si aumentas el número el borde será mas grueso y si escribes 0 la tabla no mostrará borde alguno.

TD El atributo <TABLE> genera la tabla, mientras que

<TD> sirve para definir los campos presentes dentro de esta tabla.He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:

TR Como podemos observar,

hemos introducido una nueva marca <TR>, que es una especie de "salto" de fila dentro de la tabla. He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:

Borde simple Las tablas tienen dos modos de presentación

de los bordes que se selecciona con la propiedad border-collapse: separado (separate) y colapsado (collapse). En el modo separado existe un hueco entre los bordes de cada celda, mientras que en el modo colapsado los bordes se superponen. Si no se establece el modo de presentación, los navegadores aplican el modo separado.

Bordes y tabla invisible

El atributo border establece el grosor del borde de la tabla. El valor se interpreta en píxeles y no admite unidades. Si el valor es 0 o el atributo no está presente, los navegadores no dibujan ni el borde exterior de la tabla ni los bordes interiores de las celdas, haciendo el borde invisible.

Colspan y Rowspan Es la forma de fusionar celdas en una tabla.Rowspan, indica el número de filas que

ocupará la celda. Por defecto ocupa una sola fila.

Colspan, indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

De esta forma si ponemos <td colsan=2>, quiere decir que la celda actual se extiende en el ancho de dos celdas.

Algo parecido ocurre si ponemos <td rowspan=3>, la celda ocupará el alto de 3 celdas normales.

Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla

Habría que escribir el siguiente código:<table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">DIFERENCIAS</th> <th colspan="2">PERRO</th> <th rowspan="2">HOMBRE</th> </tr> <tr align="center" valign="middle"> <th>PEQUEÑO</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td> </tr></table>

Cellpading y cellspacing Los atributos cellpading y cellspacing nos

ayudaran a dar a nuestra tabla un aspecto más estético.

En la siguiente imagen podemos ver gráficamente el significado de estos atributos.

<table cellspacing="10" cellpadding="10" border="3">

Ejemplo:

Color de fondo Para ponerle color a una celda utilizamos el

atributo bgcolor=" aquí ponemos el nombre o número del color«

EJEMPLOVamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño "1" y de largo el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo bgcolor="red" y a otra fondo azul

Imagen de fondo

Para lograr un fondo de imagen que se repite, es decir que se hace extendible a un espacio como un papel tapiz, que sirva para luego colocar texto encima, deberás utilizar el atributo background dentro de la etiqueta de table y colocar ahí la imagen que desees

Alinear contenido Para alinear el contenido se utiliza el atributo align. En la primera celda el texto está alineado a la

izquierda. No hay que hacer nada, es la alineación que se establece por defecto. (Podría escribirse, de todas formas: <td align="left">).

En la segunda celda el texto está alineado en el centro: <td align="center">.

En la tercera celda el texto está alineado a la derecha: <td align="right">.

APA Dale click ( ) Tablas Recuperado el 27 de mayo de 2015De:http://daleclick.blogspot.mx/2005/02/tablas.html HTML point (2006) Tablas, TD, TR, BordesRecuperado el 27 de mayo de 2015De:http://www.htmlpoint.com/guida/html_11.htm Mc Libre (2015) BordesRecuperado el 27 de mayo de 2015De:http://www.mclibre.org/consultar/amaya/css/css_tablas_modos_bordes.html Mc Libre (2015) BordesRecuperado el 27 de mayo de 2015De:http://www.mclibre.org/consultar/htmlcss/xhtml/xhtml_tablas_atributos.html#atributo1

Aula clic ( ) clospan y rowspanRecuperado el 27 de mayo de 2015http://www.aulaclic.es/html/t_6_4.htm Desarrollo Web ( ) Cellpading y cellspacingRecuperado el 27 de mayo de 2015De: http://www.desarrolloweb.com/articulos/629.php Aula Fácil (2009) Color de fondoRecuperado el 27 de mayo de 2015De:http://www.aulafacil.com/cursos/l19275/informatica/crear-paginas-web/html/color-de-las-tablas Manuel Fajardo ( ) Imagen de fondoRecuperado el 27 de mayo de 2015De:http://uvsfajardo.sld.cu/diseno-de-tablas-en-html Ángel R. Puente ( ) AlineaciónRecuperado el 27 de mayo de 2015De:http://roble.pntic.mec.es/apuente/html/paginas/doce.htm

Inf2 p1b exc15_celin_valenzuela

Education

Transcript of Inf2 p1b exc15_celin_valenzuela