SlideShare una empresa de Scribd logo
HTML
Valeria Arvizu
Prof. Azucena Cervantes
28 de mayo del 2015
Informatica II
¿Qué es una tabla en código HTML?
 La altura y anchura global de una tabla se indica dentro del atributo
<TABLE>, que señala la apertura y cierre de una tabla. Las
dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y
pueden expresarse en píxel o en tantos por ciento respecto a la
página:
<TABLE WIDTH=500>
</TABLE>
http://www.htmlpoint.com/guida/html_11.htm
¿Qué significa “tr”?
 La etiqueta <tr> se utiliza para definir una fila
dentro de una tabla.
Este elemento puede contener una o más etiquetas
<th> o <td>.
Define las filas de la tabla que se definen
con <tr> y </tr> (table row). Un par de etiquetas
para cada una de las filas.
http://roble.pntic.mec.es/apuente/html/paginas/diez.htm
¿Qué significa “td”?
 Dentro de cada fila se definen las celdas que forman
esa fila con las etiquetas <td> y </td> (table data).
La etiqueta <td> define una celda que contiene
datos dentro de una tabla.
El texto de esta celda se representa en tamaño
regular y alineado a la izquierda.
http://www.virtualnauta.com/html-etiqueta-td
¿Cómo insertas un simple borde en tu
tabla?
 Para que se visualicen los bordes de una tabla,
debemos agregar el atributo border junto con el
valor expresado en pixels, de lo contrario no se
verán los bordes que dividen las celdas de la tabla.
http://www.virtualnauta.com/html-tablas
Escribe el código para colocar una tabla
invisible
 <table id=«mi tabla»><tbody><tr><td>
¿Qué es “Colspand”?
¿Qué es “rowspand?
 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.
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
¿Qué es “cell padding? ¿Qué es “cell
spacing”?
 Cellspacing:controla el espacio entre celdas de la
tabla. Aunque no hay un defecto oficial , los
navegadores suelen utilizar un valor predeterminado
de 2 .
 Cellpadding: establece la cantidad de espacio entre
el contenido de la celda y la pared de la celda
¿Cómo insertas color de fondo en una celda
de una tabla?
 Para cambiar del color de fondo, basta con escribir
la directiva BGCOLOR dentro del elemento que de
la tabla que se desee cambiar.
 Para cambiar el color a la tabla
 <TABLE BGCOLOR="codigo de color">
 Para cambiar el color a la fila
 <TR BGCOLOR="codigo de color">
 Para cambiar el color a la celda
 <TD BGCOLOR="codigo de color">
 Para cambiar el color del borde
 <TABLE BORDERCOLOR="codigo de color">
http://www.mailxmail.com/curso-html/color-fondo-tablas
¿Cómo insertas una imagen de fondo en
una tabla?
 <table width="" height="" border="" bordder color=""
background="url de la imagen que quieras de fondo
en tu tabla">
https://mx.answers.yahoo.com/question/index?qid=20070726132643AAQjAhu
¿Cómo alineas el contenido de tu tabla?
(derecha, izquierda, centrado)
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="40" valign="top">texto alineado arriba </td>
</tr>
<tr>
<td height="40" valign="middle">texto alineado al centro </td>
</tr>
<tr>
<td height="40" valign="bottom">texto alineado abajo </td>
</tr>
<tr>
<td height="40" valign="baseline">texto alineado en la llinea de
base </td>
</tr>
</table>

Más contenido relacionado

DOCX
Olivarko
PPTX
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
PDF
Trabajo 5
PDF
Tabla imagen hipervinculo
PDF
12tablas
PPTX
CODIGOS HTML
PPTX
Codigos html
DOCX
Olivarko
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Trabajo 5
Tabla imagen hipervinculo
12tablas
CODIGOS HTML
Codigos html

La actualidad más candente (17)

PPTX
DOCX
Pendejobnolll
DOCX
Colegio nacional nicoles esguerra
PPTX
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
PPTX
tablas
DOC
DOCX
HTML
PPTX
Tablas en html
DOCX
Carpeta y blog
PPTX
Inf2 exc15 p1a_adilene
DOCX
Colocar un fondo en una pagina web
PPTX
Creación de tablas en HTML
ODT
Ppp jjj 1002
PPTX
Que es una consulta
DOCX
Unidad 6
PPTX
DBER N° 2 blog blogger blogspot
PPTX
Etquetas de html
Pendejobnolll
Colegio nacional nicoles esguerra
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
tablas
HTML
Tablas en html
Carpeta y blog
Inf2 exc15 p1a_adilene
Colocar un fondo en una pagina web
Creación de tablas en HTML
Ppp jjj 1002
Que es una consulta
Unidad 6
DBER N° 2 blog blogger blogspot
Etquetas de html
Publicidad

Destacado (20)

DOC
De verdad
PDF
Case multitherm
PDF
Evaluacioes de trabajos
PPTX
Daysi y cordova garay
PPTX
web 2.0 CABALLERO/GAETAN/GIL/RIVAROLA
PPTX
ACREDITACIÓN INSTITUCIONAL MULTI-CAMPOS SLIDESHARE
PPTX
Presentación aracelli canhete espinola
PPTX
PPTX
Trabajo de tics
PPTX
Administracion.
PPTX
Presentación josé florentín
PPT
Ohsas 18001 expo
PPTX
Unidad educativa"Republica del Ecuador"
PDF
Programa electoral municipal 2015 almoradí
PDF
Syllabus informatica-ii 2015-may-11
DOCX
Guia 3 501012
PPTX
Diapo de tic
PDF
Estará a economia angolana a caminhar para uma austeridade ou não?
PPTX
Unidad educativa República del Ecuador
PPT
Trabajo diapositivas terminado
De verdad
Case multitherm
Evaluacioes de trabajos
Daysi y cordova garay
web 2.0 CABALLERO/GAETAN/GIL/RIVAROLA
ACREDITACIÓN INSTITUCIONAL MULTI-CAMPOS SLIDESHARE
Presentación aracelli canhete espinola
Trabajo de tics
Administracion.
Presentación josé florentín
Ohsas 18001 expo
Unidad educativa"Republica del Ecuador"
Programa electoral municipal 2015 almoradí
Syllabus informatica-ii 2015-may-11
Guia 3 501012
Diapo de tic
Estará a economia angolana a caminhar para uma austeridade ou não?
Unidad educativa República del Ecuador
Trabajo diapositivas terminado
Publicidad

Similar a HTML (20)

PPTX
Informatica exc15
PPTX
Tablas de HTML
PPTX
Htmlexc15 unidad 3 html_mayrafranco
PPTX
Inf2 exc15 p1_a_unidad 3_html_victor manuel radilla benitez
PPTX
Inf2 p1 a_danna gd
PPTX
Inf1 p1 a_ex5_josue ramon rodriguez gil
PPTX
Inf1 p1 a_ex5_josue ramon rodriguez gil
PPTX
Inf1 p1 a_ex5_josue ramon rodriguez gil
PPTX
Inf1 p1 a_ex5_josue ramon rodriguez gil
PPTX
Herramientas de html (Tablas)
PPTX
Info p1 b_exce15_andrea salgado
PPTX
Tablas html
PDF
Factores de HTML_Andrea Sofia
PPTX
Tablas en html _informatica_mitzi_1b
PPTX
Inf2 p1b exc15_celin_valenzuela
PPTX
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
PPTX
Exc15 unidad3 html_gabriela lozano
PDF
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
 
PPTX
Tablas en html
PPTX
Tablas en html
Informatica exc15
Tablas de HTML
Htmlexc15 unidad 3 html_mayrafranco
Inf2 exc15 p1_a_unidad 3_html_victor manuel radilla benitez
Inf2 p1 a_danna gd
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
Herramientas de html (Tablas)
Info p1 b_exce15_andrea salgado
Tablas html
Factores de HTML_Andrea Sofia
Tablas en html _informatica_mitzi_1b
Inf2 p1b exc15_celin_valenzuela
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Exc15 unidad3 html_gabriela lozano
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
 
Tablas en html
Tablas en html

Último (20)

PDF
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf
PPTX
Presentación de la Cetoacidosis diabetica.pptx
PDF
Atencion prenatal. Ginecologia y obsetricia
PDF
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
PDF
2.0 Introduccion a processing, y como obtenerlo
PDF
Tomo 1 de biologia gratis ultra plusenmas
PDF
CIRSOC-201-2024_Proyecto de Reglamento Argentino de Estructuras de Hormigón
PDF
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
PDF
DI, TEA, TDAH.pdf guía se secuencias didacticas
DOCX
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
PDF
biología es un libro sobre casi todo el tema de biología
PDF
TOMO II - LITERATURA.pd plusenmas ultras
PDF
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
PDF
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
PDF
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
PDF
Fundamentos_Educacion_a_Distancia_ABC.pdf
PDF
Unidad de Aprendizaje 5 de Educacion para el Trabajo EPT Ccesa007.pdf
PDF
Salvese Quien Pueda - Andres Oppenheimer Ccesa007.pdf
PDF
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
DOCX
V UNIDAD - PRIMER GRADO. del mes de agosto
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf
Presentación de la Cetoacidosis diabetica.pptx
Atencion prenatal. Ginecologia y obsetricia
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
2.0 Introduccion a processing, y como obtenerlo
Tomo 1 de biologia gratis ultra plusenmas
CIRSOC-201-2024_Proyecto de Reglamento Argentino de Estructuras de Hormigón
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
DI, TEA, TDAH.pdf guía se secuencias didacticas
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
biología es un libro sobre casi todo el tema de biología
TOMO II - LITERATURA.pd plusenmas ultras
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
Fundamentos_Educacion_a_Distancia_ABC.pdf
Unidad de Aprendizaje 5 de Educacion para el Trabajo EPT Ccesa007.pdf
Salvese Quien Pueda - Andres Oppenheimer Ccesa007.pdf
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
V UNIDAD - PRIMER GRADO. del mes de agosto

HTML

  • 1. HTML Valeria Arvizu Prof. Azucena Cervantes 28 de mayo del 2015 Informatica II
  • 2. ¿Qué es una tabla en código HTML?  La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página: <TABLE WIDTH=500> </TABLE> http://www.htmlpoint.com/guida/html_11.htm
  • 3. ¿Qué significa “tr”?  La etiqueta <tr> se utiliza para definir una fila dentro de una tabla. Este elemento puede contener una o más etiquetas <th> o <td>. Define las filas de la tabla que se definen con <tr> y </tr> (table row). Un par de etiquetas para cada una de las filas. http://roble.pntic.mec.es/apuente/html/paginas/diez.htm
  • 4. ¿Qué significa “td”?  Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y </td> (table data). La etiqueta <td> define una celda que contiene datos dentro de una tabla. El texto de esta celda se representa en tamaño regular y alineado a la izquierda. http://www.virtualnauta.com/html-etiqueta-td
  • 5. ¿Cómo insertas un simple borde en tu tabla?  Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla. http://www.virtualnauta.com/html-tablas
  • 6. Escribe el código para colocar una tabla invisible  <table id=«mi tabla»><tbody><tr><td>
  • 7. ¿Qué es “Colspand”? ¿Qué es “rowspand?  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. http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
  • 8. ¿Qué es “cell padding? ¿Qué es “cell spacing”?  Cellspacing:controla el espacio entre celdas de la tabla. Aunque no hay un defecto oficial , los navegadores suelen utilizar un valor predeterminado de 2 .  Cellpadding: establece la cantidad de espacio entre el contenido de la celda y la pared de la celda
  • 9. ¿Cómo insertas color de fondo en una celda de una tabla?  Para cambiar del color de fondo, basta con escribir la directiva BGCOLOR dentro del elemento que de la tabla que se desee cambiar.  Para cambiar el color a la tabla  <TABLE BGCOLOR="codigo de color">  Para cambiar el color a la fila  <TR BGCOLOR="codigo de color">  Para cambiar el color a la celda  <TD BGCOLOR="codigo de color">  Para cambiar el color del borde  <TABLE BORDERCOLOR="codigo de color"> http://www.mailxmail.com/curso-html/color-fondo-tablas
  • 10. ¿Cómo insertas una imagen de fondo en una tabla?  <table width="" height="" border="" bordder color="" background="url de la imagen que quieras de fondo en tu tabla"> https://mx.answers.yahoo.com/question/index?qid=20070726132643AAQjAhu
  • 11. ¿Cómo alineas el contenido de tu tabla? (derecha, izquierda, centrado) <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td height="40" valign="top">texto alineado arriba </td> </tr> <tr> <td height="40" valign="middle">texto alineado al centro </td> </tr> <tr> <td height="40" valign="bottom">texto alineado abajo </td> </tr> <tr> <td height="40" valign="baseline">texto alineado en la llinea de base </td> </tr> </table>