Top Banner
HTML Colegio Bucerias Celina Valenzuela Ing. Azucena Cervantes Etiquetas html 1’’B’’ 26/05/15
20

Inf2 p1b exc15_celin_valenzuela

Aug 14, 2015

Download

Education

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Inf2 p1b exc15_celin_valenzuela

HTML

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

Page 2: Inf2 p1b exc15_celin_valenzuela

¿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).

Page 3: Inf2 p1b exc15_celin_valenzuela

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.

Page 4: Inf2 p1b exc15_celin_valenzuela

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: 

Page 5: Inf2 p1b exc15_celin_valenzuela

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: 

Page 6: Inf2 p1b exc15_celin_valenzuela

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.

Page 7: Inf2 p1b exc15_celin_valenzuela
Page 8: Inf2 p1b exc15_celin_valenzuela

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.

Page 9: Inf2 p1b exc15_celin_valenzuela
Page 10: Inf2 p1b exc15_celin_valenzuela

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.

Page 11: Inf2 p1b exc15_celin_valenzuela

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

Page 12: Inf2 p1b exc15_celin_valenzuela

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&Ntilde;O</th>    <th>GRANDE</th>  </tr>  <tr align="center" valign="middle">     <td>Duraci&oacute;n crecimiento</td>    <td>10 meses</td>    <td>18 a 24 meses</td>    <td>16 a&ntilde;os</td>  </tr>  <tr align="center" valign="middle">     <td>Tiempo de gestaci&oacute;n</td>    <td colspan="2">58 a 63 d&iacute;as</td>    <td>9 meses</td>  </tr>  <tr align="center" valign="middle">     <td>Duraci&oacute;n de vida del pelo/cabello</td>    <td colspan="2">1 a&ntilde;o</td>    <td>2 a 7 a&ntilde;os</td>  </tr></table>

Page 13: Inf2 p1b exc15_celin_valenzuela

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:

Page 14: Inf2 p1b exc15_celin_valenzuela

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

Page 15: Inf2 p1b exc15_celin_valenzuela
Page 16: Inf2 p1b exc15_celin_valenzuela

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

Page 17: Inf2 p1b exc15_celin_valenzuela
Page 18: Inf2 p1b exc15_celin_valenzuela

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">.

Page 19: Inf2 p1b exc15_celin_valenzuela

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

Page 20: Inf2 p1b exc15_celin_valenzuela

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