SlideShare una empresa de Scribd logo
1 de 12
«HTML»
Andrea Salgado
Azucena Cervantes
INFORMATICA
28/mayo/2015.
¿QUÉ ES UNA TABLA EN CÓDIGO HTML?
 Las tablas más sencillas de HTML se definen con
tres etiquetas: <table> para crear la tabla, <tr> para
crear cada fila y <td> para crear cada columna.
¿QUÉ SIGNIFICA “TR”?
 La etiqueta <tr> se utiliza para definir una fila
dentro de una tabla.
¿QUÉ SIGNIFICA “TD”?
 La etiqueta <td> define una celda que contiene
datos dentro de una tabla.
¿CÓMO INSERTAS UN SIMPLE BORDE EN TU
TABLA?
 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.
<table border="1">
CÓDIGO PARA HACER UNA TABLA INVISIBLE
 <table id=«mi tabla»><tbody><tr><td>
¿QUÉ ES COLSPAND Y ROWSPAND?
 Colspan, indica el número de columnas que
ocupará la celda. Por defecto ocupa una sola
columna.
 Rowspan, indica el número de filas que ocupará la
celda. Por defecto ocupa una sola fila.
¿QUÉ ES CELL PADDING Y CELL SPACING?
 CELLSPACING controls the space between table
cells. Although there is no official default, browsers
usually use a default of 2.
 CELLPADDING sets the amount of space between
the contents of the cell and the cell wall.
¿CÓMO INSERTAS COLOR DE FONDO EN UNA
CELDA DE UNA TABLA?
 Si que lo que tienes que hacer es poner a cada
celda que quieres que cambie el color un gestor de
evento "onmouseover". Ponle también un gestor de
evento "onmouseout" si quieres que el cambio de
color sea solo mientras el ratón esta encima, sino
el cambio de color perdurara una vez que el ratón
se desplace fuera de la celda.
¿CÓMO INSERTAS UNA IMAGEN DE FONDO EN
UNA TABLA?
 <table width="630" border="2" align="center"
background="../images/barraFondo.jpg">
¿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>
APA
 Tabla de libros (2015) tabla
Recuperado: 28/05/2015
De:http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html
 Virtualnauta (2015) tr
Recuperado: 28/05/2015.
De:http://www.virtualnauta.com/html-etiqueta-tr
 Virtualnauta (2015) td
Recuperado: 28/05/2015.
De: http://www.virtualnauta.com/html-etiqueta-td
 Mclibre (2015) bordes
Recuperado: 28/05/2015
De:http://www.mclibre.org/consultar/htmlcss/xhtml/xhtml_tablas_atributos.ht
ml
 Usabilidad (2015) Colspand y rowspand
Recuperado: 28/mayo/2015
De:http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
 Htlmcodetutorial (2015) cell padding y cell spacing
Recuperado: 28/mayo/2015
de:http://www.htmlcodetutorial.com/tables/index_famsupp_29.html

Más contenido relacionado

La actualidad más candente

GUÍA Nº 11 BARRA DE DIBUJO
GUÍA Nº 11 BARRA DE DIBUJOGUÍA Nº 11 BARRA DE DIBUJO
GUÍA Nº 11 BARRA DE DIBUJOFABIS624
 
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.Jenny A
 
Cómo confeccionar tablas en Word 2010
Cómo confeccionar tablas en Word 2010Cómo confeccionar tablas en Word 2010
Cómo confeccionar tablas en Word 2010Paula Romero
 
Windows panel de control
Windows panel de controlWindows panel de control
Windows panel de controlbhylenia
 
como cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXEL
como cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXELcomo cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXEL
como cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXELavargasjair
 
Ejercicio efecto de texto personalizado
Ejercicio efecto de texto personalizadoEjercicio efecto de texto personalizado
Ejercicio efecto de texto personalizadoAura Duque
 
Material teorico de Power Point
Material teorico de Power PointMaterial teorico de Power Point
Material teorico de Power PointAura Duque
 
Manejo de tablas
Manejo de tablas Manejo de tablas
Manejo de tablas mililema
 
Microsoft execel 2010
Microsoft execel 2010Microsoft execel 2010
Microsoft execel 2010laurapico19
 

La actualidad más candente (15)

Tablas acces
Tablas accesTablas acces
Tablas acces
 
GUÍA Nº 11 BARRA DE DIBUJO
GUÍA Nº 11 BARRA DE DIBUJOGUÍA Nº 11 BARRA DE DIBUJO
GUÍA Nº 11 BARRA DE DIBUJO
 
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
 
Cómo confeccionar tablas en Word 2010
Cómo confeccionar tablas en Word 2010Cómo confeccionar tablas en Word 2010
Cómo confeccionar tablas en Word 2010
 
Unidad vi y vii
Unidad vi y viiUnidad vi y vii
Unidad vi y vii
 
Windows panel de control
Windows panel de controlWindows panel de control
Windows panel de control
 
Olivarko
OlivarkoOlivarko
Olivarko
 
como cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXEL
como cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXELcomo cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXEL
como cambiar el tamaño de una celda y hacer una tabla de multiplicar en ECXEL
 
Trabajo 5
Trabajo 5Trabajo 5
Trabajo 5
 
Unidad 9
Unidad 9Unidad 9
Unidad 9
 
Ejercicio efecto de texto personalizado
Ejercicio efecto de texto personalizadoEjercicio efecto de texto personalizado
Ejercicio efecto de texto personalizado
 
Material teorico de Power Point
Material teorico de Power PointMaterial teorico de Power Point
Material teorico de Power Point
 
Formato de celdas
Formato de celdasFormato de celdas
Formato de celdas
 
Manejo de tablas
Manejo de tablas Manejo de tablas
Manejo de tablas
 
Microsoft execel 2010
Microsoft execel 2010Microsoft execel 2010
Microsoft execel 2010
 

Destacado

Benh Vien Xuong Khop
Benh Vien Xuong KhopBenh Vien Xuong Khop
Benh Vien Xuong Khopmila630
 
Diapositivas reglamento yulieth liñan
Diapositivas reglamento yulieth liñanDiapositivas reglamento yulieth liñan
Diapositivas reglamento yulieth liñanyuzali
 
Chi Phi Thay Khop Goi
Chi Phi Thay Khop GoiChi Phi Thay Khop Goi
Chi Phi Thay Khop Goinorma396
 
Diapositivas electiva iv
Diapositivas electiva ivDiapositivas electiva iv
Diapositivas electiva ivaidalvarez
 
Watson joshua 3.4
Watson joshua 3.4Watson joshua 3.4
Watson joshua 3.4jwatson22
 
EL SER HUMANO Y SU ENTORNO
EL SER HUMANO Y SU ENTORNOEL SER HUMANO Y SU ENTORNO
EL SER HUMANO Y SU ENTORNOcamilaacostae
 
Modul11(kuliah) kemahiran komunikasi berkesan
Modul11(kuliah) kemahiran komunikasi berkesanModul11(kuliah) kemahiran komunikasi berkesan
Modul11(kuliah) kemahiran komunikasi berkesanqamachi qusal
 

Destacado (10)

Benh Vien Xuong Khop
Benh Vien Xuong KhopBenh Vien Xuong Khop
Benh Vien Xuong Khop
 
Diapositivas reglamento yulieth liñan
Diapositivas reglamento yulieth liñanDiapositivas reglamento yulieth liñan
Diapositivas reglamento yulieth liñan
 
Chi Phi Thay Khop Goi
Chi Phi Thay Khop GoiChi Phi Thay Khop Goi
Chi Phi Thay Khop Goi
 
In my last vacation
In my last vacationIn my last vacation
In my last vacation
 
Diapositivas electiva iv
Diapositivas electiva ivDiapositivas electiva iv
Diapositivas electiva iv
 
Encuassalvatierracee
EncuassalvatierraceeEncuassalvatierracee
Encuassalvatierracee
 
Watson joshua 3.4
Watson joshua 3.4Watson joshua 3.4
Watson joshua 3.4
 
Videos
VideosVideos
Videos
 
EL SER HUMANO Y SU ENTORNO
EL SER HUMANO Y SU ENTORNOEL SER HUMANO Y SU ENTORNO
EL SER HUMANO Y SU ENTORNO
 
Modul11(kuliah) kemahiran komunikasi berkesan
Modul11(kuliah) kemahiran komunikasi berkesanModul11(kuliah) kemahiran komunikasi berkesan
Modul11(kuliah) kemahiran komunikasi berkesan
 

Similar a Guía básica de tablas HTML

Inf2 p1 a_danna gd
Inf2 p1 a_danna gdInf2 p1 a_danna gd
Inf2 p1 a_danna gdDgg2799
 
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTMLmaryjo05
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerraMateo Remolina
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerraMateo Remolina
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerraMateo Torres
 
Inf2 exc15 p1a_adilene
Inf2 exc15 p1a_adileneInf2 exc15 p1a_adilene
Inf2 exc15 p1a_adileneadilene11
 
Factores de HTML_Andrea Sofia
Factores de HTML_Andrea SofiaFactores de HTML_Andrea Sofia
Factores de HTML_Andrea SofiaAndrea_Sofia
 
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_fridaleyvafridaleyvateran
 
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_fridaleyvafridaleyvateran
 
Pagina web 5.
Pagina web 5.Pagina web 5.
Pagina web 5.juanesvs
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerraMonsalve Sergio
 

Similar a Guía básica de tablas HTML (20)

Tablas de HTML
Tablas de HTMLTablas de HTML
Tablas de HTML
 
Inf2 p1 a_danna gd
Inf2 p1 a_danna gdInf2 p1 a_danna gd
Inf2 p1 a_danna gd
 
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
 
Tablas html
Tablas htmlTablas html
Tablas html
 
HTML
HTMLHTML
HTML
 
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
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Inf2 exc15 p1a_adilene
Inf2 exc15 p1a_adileneInf2 exc15 p1a_adilene
Inf2 exc15 p1a_adilene
 
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
 
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
 
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
 
Trabajo tablas
Trabajo tablasTrabajo tablas
Trabajo tablas
 
Html tablas
Html tablasHtml tablas
Html tablas
 
Tablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1bTablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1b
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Pagina web 5.
Pagina web 5.Pagina web 5.
Pagina web 5.
 
12tablas
12tablas12tablas
12tablas
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 

Último

Unidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucionesUnidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucioneschorantina325
 
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjPPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjNachisRamos
 
Las redes sociales en el mercado digital
Las redes sociales en el mercado digitalLas redes sociales en el mercado digital
Las redes sociales en el mercado digitalNayaniJulietaRamosRa
 
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señorkkte210207
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdfedwinmelgarschlink2
 
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfTIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfLUZMARIAAYALALOPEZ
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdflauradbernals
 

Último (7)

Unidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucionesUnidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disoluciones
 
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjPPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
 
Las redes sociales en el mercado digital
Las redes sociales en el mercado digitalLas redes sociales en el mercado digital
Las redes sociales en el mercado digital
 
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
 
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfTIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
 

Guía básica de tablas HTML

  • 2. ¿QUÉ ES UNA TABLA EN CÓDIGO HTML?  Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.
  • 3. ¿QUÉ SIGNIFICA “TR”?  La etiqueta <tr> se utiliza para definir una fila dentro de una tabla.
  • 4. ¿QUÉ SIGNIFICA “TD”?  La etiqueta <td> define una celda que contiene datos dentro de una tabla.
  • 5. ¿CÓMO INSERTAS UN SIMPLE BORDE EN TU TABLA?  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. <table border="1">
  • 6. CÓDIGO PARA HACER UNA TABLA INVISIBLE  <table id=«mi tabla»><tbody><tr><td>
  • 7. ¿QUÉ ES COLSPAND Y ROWSPAND?  Colspan, indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.  Rowspan, indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
  • 8. ¿QUÉ ES CELL PADDING Y CELL SPACING?  CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2.  CELLPADDING sets the amount of space between the contents of the cell and the cell wall.
  • 9. ¿CÓMO INSERTAS COLOR DE FONDO EN UNA CELDA DE UNA TABLA?  Si que lo que tienes que hacer es poner a cada celda que quieres que cambie el color un gestor de evento "onmouseover". Ponle también un gestor de evento "onmouseout" si quieres que el cambio de color sea solo mientras el ratón esta encima, sino el cambio de color perdurara una vez que el ratón se desplace fuera de la celda.
  • 10. ¿CÓMO INSERTAS UNA IMAGEN DE FONDO EN UNA TABLA?  <table width="630" border="2" align="center" background="../images/barraFondo.jpg">
  • 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>
  • 12. APA  Tabla de libros (2015) tabla Recuperado: 28/05/2015 De:http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html  Virtualnauta (2015) tr Recuperado: 28/05/2015. De:http://www.virtualnauta.com/html-etiqueta-tr  Virtualnauta (2015) td Recuperado: 28/05/2015. De: http://www.virtualnauta.com/html-etiqueta-td  Mclibre (2015) bordes Recuperado: 28/05/2015 De:http://www.mclibre.org/consultar/htmlcss/xhtml/xhtml_tablas_atributos.ht ml  Usabilidad (2015) Colspand y rowspand Recuperado: 28/mayo/2015 De:http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp  Htlmcodetutorial (2015) cell padding y cell spacing Recuperado: 28/mayo/2015 de:http://www.htmlcodetutorial.com/tables/index_famsupp_29.html