Exc15 unidad3 html_gabriela lozano
-
Upload
gabslozano -
Category
Business
-
view
78 -
download
1
Transcript of Exc15 unidad3 html_gabriela lozano
![Page 1: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/1.jpg)
HTML
A N A G A B R I E L A R A M O S L O Z A N O .
A Z U C E N A C E R V A N T E S P O N C E .
C O L E G I O B U C E R I A S
2 9 / 0 5 / 2 0 1 5
1 B
![Page 2: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/2.jpg)
¿QUÉ ES UNA TABLA EN CÓDIGO HTML?
Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial.
Htmlquick(2014)Tablas htmlRecuperado: 29/05/2015De:http://www.htmlquick.com/es/tutorials/tables.html
![Page 3: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/3.jpg)
¿QUÉ SIGNIFICA “TR”?
El contenido de las columnas que están dentro de la fila lo podemos alínear tanto horizontal como verticalmente.
Html.azunaweb(2014)Tr htmlRecuperado: 29/05/2015De:http://html.hazunaweb.com/109.php
![Page 4: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/4.jpg)
¿QUÉ SIGNIFICA “TD”?
Al igual que en las filas, en las celdas podemos definir el la alineación del contenido que está dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas columnas como indiquemos en él. Para agrupar celdas utilizaríamos el atributo "colspan" y para agrupar celdas el atributo "rowspan".
Html.azunaweb(2014)Td htmlRecuperado: 29/05/2015De:http://html.hazunaweb.com/109.php
![Page 5: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/5.jpg)
¿CÓMO INSERTAS UN SIMPLE BORDE EN TU TABLA?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.
mclibre(2014)borde en tabla htmlRecuperado: 29/05/2015De:http://www.mclibre.org/consultar/amaya/css/css_tablas_modos_bordes.html
![Page 6: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/6.jpg)
ESCRIBE EL CÓDIGO PARA COLOCAR UNA TABLA INVISIBLE
<table id="miTabla" ><tbody><tr><td>....
Forosdelweb(2014)tabla invisible Recuperado: 29/05/2015De:http://www.forosdelweb.com/f4/como-hacer-que-tabla-sea-invisible-247997/
![Page 7: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/7.jpg)
¿QUÉ ES “COLSPAND”?
Crea un archivo ejemplo.html con este código y visualízalo. Recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS:
aprendeaprogramar(2014)ColspandRecuperado: 29/05/2015De:http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-vertical-tr-td-th-caption-o-titulo-cu00719b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192
![Page 8: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/8.jpg)
¿QUÉ ES “ROWSPAND?
Crea un archivo ejemplo.html con este código y visualízalo (recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS):
aprendeaprogramar(2014)Rowspand Recuperado: 29/05/2015De:http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-vertical-tr-td-th-caption-o-titulo-cu00719b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192
![Page 9: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/9.jpg)
![Page 10: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/10.jpg)
QUÉ ES “CELL PADDING?
CELLPADDING es la cantidad de espacio entre el borde interior de la celda y el contenido de la celda.
Ccd.uab.es(2014)Cell padding Recuperado: 29/05/2015De:http://ccd.uab.es/~sergi/manuals/html/tables/lesson07.html
![Page 11: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/11.jpg)
¿QUÉ ES “CELL SPACING”?
Este atributo permite determinar o especificar la distancia entre las celdas y entre las celdas y el margen exterior de la tabla. El valor de este atributo se mide en pixeles y es válido para todas las celdas.
Ccd.uab.es(2014)Cell spacing Recuperado: 29/05/2015De:http://ccd.uab.es/~sergi/manuals/html/tables/lesson07.html
![Page 12: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/12.jpg)
¿CÓMO INSERTAS COLOR DE FONDO EN UNA CELDA DE UNA TABLA?Para definir que una celda b1 tenga el color de fondo por ejemplo
verde oscuro cuyo código es #OEBEBA tenemos que poner en la hoja de estilos estilo2.css lo siguiente:
Comocreartuweb(2014)color en tabla Recuperado: 29/05/2015De:http://www.comocreartuweb.com/ejemplo-con-tablas/definiendo-tablas/color-de-celdas.html
![Page 13: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/13.jpg)
¿CÓMO INSERTAS UNA IMAGEN DE FONDO EN UNA TABLA?<table width="" height="" border="" bordder color=""
background=“URL de imagen"> <Tr> <Td> TEXTO</td> </tr> </table>
yahoo(2014)imagen en tabla Recuperado: 29/05/2015De:https://mx.answers.yahoo.com/question/index?qid=20070726132643AAQjAhu
![Page 14: Exc15 unidad3 html_gabriela lozano](https://reader036.fdocuments.ec/reader036/viewer/2022062313/55c8ed3dbb61eb3a2b8b473c/html5/thumbnails/14.jpg)
¿CÓMO ALINEAS EL CONTENIDO DE TU TABLA?
Tutores.ord(2014)alinear contenido Recuperado: 29/05/2015De:http://www.tutores.org/codigo/1551/alinear-texto-dentro-de-celdas-y-tablas--valign/