SlideShare una empresa de Scribd logo
1 de 14
EXC15_UNIDAD 3_HTML
Sofía García Maldonado
Colegio Bucerias
Preparatoria 1B
Azucena Cervantes
29/05/2015
Tabla en código HTML
Una tabla HTML puede ser considerada como un grupo de
filas donde cada una de ellas contiene un grupo de celdas
.Las tablas, como toda estructura en los documentos HTML,
son definidas usando elementos.
Una tabla en html viene marcada por las etiquetas <table>
</table>.
TR y TD en html
Td define las columnas y tr define las filas en
una tabla
Borde para una tabla
<table border=1 cellspacing=0
cellpadding=2 bordercolor="666633">
TABLA INVISIBLE
Para que salga invisible la tabla,solo
omites la palabra border en el código
<table border>
Colspan y Rowspan
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.
Rowspan
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas-
aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>
Colspan
 <table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
CELL PADDING
Especifica el espacio, en píxeles, entre la
pared celular y el contenido celular.
CELL SPACING
Especifica el espacio, en píxeles, entre
las células.
Fondo en una celda
Para ponerle color a una celda utilizamos el
atributo bgcolor=“
 <table border="1" cellpadding="0"
cellspacing="0" width="50%">
<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
Fondo de imagen
 Se utiliza el mismo atributo background,
aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">
Alinear el contenido de tu
tabla
 El lugar concreto donde aparezca este título
lo indicamos con el atributo ALIGN. Si
indicamos TOP (que es la opción por defecto),
este aparecerá sobre la tabla, si
usamos BOTTON, debería aparecer al pié de
esta, con la opción LEFT hacemos que se vea
a la izquierda de la tabla, y con RIGHT se
smostrará a la derecha.
APA
 HTML quick(2015) Tabla en html
 29/05/2015
 http://www.htmlquick.com/es/tutorials/tables.html
 W3school(2015)Tr y Td
 29/05/2015
 http://www.w3schools.com/html/html_tables.asp
 Ciber tareas(2015)Tabla invisible
 29/05/2015
 http://cibertareas.info/codigo-para-insertar-una-tabla-en-html-herramientas-informaticas-2.html
 W3schools(2015)Rowspan y Colspan
 29/05/2015
 http://www.w3schools.com/tags/att_td_colspan.asp
 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan
 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
 http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
 W3schools(2015)Cellpadding & Cellspacing
 http://www.w3schools.com/tags/att_table_cellspacing.asp http://www.w3schools.com/tags/att_table_cellpadding.asp
 Desarrollo web(2015Fondos
 29/05/2015
 http://www.desarrolloweb.com/articulos/1384.php
 http://www.aulafacil.com/cursos/l19275/informatica/crear-paginas-web/html/color-de-las-tablas
 Curso de HTML(2015)
 29/05/2015
 http://www.psicobyte.com/html/curso/html8.html

Más contenido relacionado

La actualidad más candente (16)

Trabajo tablas
Trabajo tablasTrabajo tablas
Trabajo tablas
 
Carpeta y blog
Carpeta y blogCarpeta y blog
Carpeta y blog
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Inf2 exc15 p1_a_unidad 3_html_victor manuel radilla benitez
Inf2 exc15 p1_a_unidad 3_html_victor manuel radilla benitezInf2 exc15 p1_a_unidad 3_html_victor manuel radilla benitez
Inf2 exc15 p1_a_unidad 3_html_victor manuel radilla benitez
 
Trabajo 5
Trabajo 5Trabajo 5
Trabajo 5
 
Colegio nacional nicolas esguerra tablasTWET
Colegio  nacional nicolas esguerra tablasTWETColegio  nacional nicolas esguerra tablasTWET
Colegio nacional nicolas esguerra tablasTWET
 
Trabajo 5
Trabajo 5Trabajo 5
Trabajo 5
 
Indes.html
Indes.htmlIndes.html
Indes.html
 
Portada
PortadaPortada
Portada
 
Tablas
TablasTablas
Tablas
 
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
 
Olivarko
OlivarkoOlivarko
Olivarko
 
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
 
Tablas
TablasTablas
Tablas
 
Manejo de tablas
Manejo de tablas Manejo de tablas
Manejo de tablas
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 

Similar a Codigos html

sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdfsites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
fgu
 
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
Josue Rodriguez
 
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
Josue Rodriguez
 
Inf2 exc15 p1a_adilene
Inf2 exc15 p1a_adileneInf2 exc15 p1a_adilene
Inf2 exc15 p1a_adilene
adilene11
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Mateo Torres
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Mateo Remolina
 
Guia 5 de html tablas
Guia 5 de html   tablasGuia 5 de html   tablas
Guia 5 de html tablas
lisvancelis
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Pipe Gomex
 

Similar a Codigos html (20)

sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdfsites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
 
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyvaInf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
 
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 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 gilInf1 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 gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
 
Pagina WEB (V)
Pagina WEB (V)Pagina WEB (V)
Pagina WEB (V)
 
Tablas
TablasTablas
Tablas
 
Inf2 exc15 p1a_adilene
Inf2 exc15 p1a_adileneInf2 exc15 p1a_adilene
Inf2 exc15 p1a_adilene
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Factores de HTML_Andrea Sofia
Factores de HTML_Andrea SofiaFactores de HTML_Andrea Sofia
Factores de HTML_Andrea Sofia
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Guia 5 de html tablas
Guia 5 de html   tablasGuia 5 de html   tablas
Guia 5 de html tablas
 
Tablas
TablasTablas
Tablas
 
Tablas en html
Tablas en htmlTablas en html
Tablas en html
 
internet
internetinternet
internet
 
Penenope
PenenopePenenope
Penenope
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Informatica exc15
Informatica exc15Informatica exc15
Informatica exc15
 

Último

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Último (10)

Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 

Codigos html

  • 1. EXC15_UNIDAD 3_HTML Sofía García Maldonado Colegio Bucerias Preparatoria 1B Azucena Cervantes 29/05/2015
  • 2. Tabla en código HTML Una tabla HTML puede ser considerada como un grupo de filas donde cada una de ellas contiene un grupo de celdas .Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Una tabla en html viene marcada por las etiquetas <table> </table>.
  • 3. TR y TD en html Td define las columnas y tr define las filas en una tabla
  • 4. Borde para una tabla <table border=1 cellspacing=0 cellpadding=2 bordercolor="666633">
  • 5. TABLA INVISIBLE Para que salga invisible la tabla,solo omites la palabra border en el código <table border>
  • 6. Colspan y Rowspan 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.
  • 7. Rowspan <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de tablas- aprenderaprogramar.com</title> </head> <body> <table border="2px"> <!-- Lo cambiaremos por CSS --> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> </body> </html>
  • 9. CELL PADDING Especifica el espacio, en píxeles, entre la pared celular y el contenido celular.
  • 10. CELL SPACING Especifica el espacio, en píxeles, entre las células.
  • 11. Fondo en una celda Para ponerle color a una celda utilizamos el atributo bgcolor=“  <table border="1" cellpadding="0" cellspacing="0" width="50%"> <tr> <td width="50%" bgcolor="red"></td> <td width="50%" bgcolor="blue"></td>
  • 12. Fondo de imagen  Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas. <table background="fondo.gif"> <td background="fondo.gif">
  • 13. Alinear el contenido de tu tabla  El lugar concreto donde aparezca este título lo indicamos con el atributo ALIGN. Si indicamos TOP (que es la opción por defecto), este aparecerá sobre la tabla, si usamos BOTTON, debería aparecer al pié de esta, con la opción LEFT hacemos que se vea a la izquierda de la tabla, y con RIGHT se smostrará a la derecha.
  • 14. APA  HTML quick(2015) Tabla en html  29/05/2015  http://www.htmlquick.com/es/tutorials/tables.html  W3school(2015)Tr y Td  29/05/2015  http://www.w3schools.com/html/html_tables.asp  Ciber tareas(2015)Tabla invisible  29/05/2015  http://cibertareas.info/codigo-para-insertar-una-tabla-en-html-herramientas-informaticas-2.html  W3schools(2015)Rowspan y Colspan  29/05/2015  http://www.w3schools.com/tags/att_td_colspan.asp  http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan  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  http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp  W3schools(2015)Cellpadding & Cellspacing  http://www.w3schools.com/tags/att_table_cellspacing.asp http://www.w3schools.com/tags/att_table_cellpadding.asp  Desarrollo web(2015Fondos  29/05/2015  http://www.desarrolloweb.com/articulos/1384.php  http://www.aulafacil.com/cursos/l19275/informatica/crear-paginas-web/html/color-de-las-tablas  Curso de HTML(2015)  29/05/2015  http://www.psicobyte.com/html/curso/html8.html