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

¿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

¿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

¿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

 ¿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

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/

¿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

¿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

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

¿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

¿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

¿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

¿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/