SlideShare una empresa de Scribd logo
1 de 8
Tablas en html
Prof. Eudes Quispe
Concepto
• 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.
ETIQUETA
• La etiqueta <table> encierra todas las filas y columnas de la tabla. Las
etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y
encierran todas las columnas. Por último, la etiqueta <td> (del inglés
"table data cell") define cada una de las columnas de las filas, aunque
realmente HTML no define columnas sino celdas de datos.
TD (<td>)
• abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en los
navegadores utilizados por personas discapacitadas)
• headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los
títulos de las columnas y filas). Se indica como una lista de valores del atributo "id" de
celdas
• scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda será su
cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que
están en la misma columna
• colspan = "numero" - Número de columnas que ocupa esta celda
• rowspan = "numero" - Número de filas que ocupa esta celda
TH (<th>)
• abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en
los navegadores utilizados por personas discapacitadas)
• headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta
celda (los títulos de las columnas y filas). Se indica como una lista de ID de celdas
• scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda
será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las
demás celdas que están en la misma columna
• colspan = "numero" - Número de columnas que ocupa esta celda
• rowspan = "numero" - Número de filas que ocupa esta celda
Es posible modificar los siguientes atributos de una tabla
Atributo Significado Posibles valores
width ancho de la tabla
un número, acompañado de % cuando se desee que sea en
porcentaje
height altura de la tabla
un número, acompañado de % cuando se desee que sea en
porcentaje
cellpadding
espacio entre el contenido de las celdas
y el borde
un número
cellspacing espacio entre celdas un número
border grosor del borde un número
align
alineación de la tabla dentro de la
página
left (izquierda)
right (derecha)
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
Caption (<caption> )
• Se emplea para definir la leyenda o título de una tabla
De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas
como la de la siguiente imagen:
Marque con aspa
SI NO
EJERCICIO
• Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen:

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Specificity and CSS Selectors
Specificity and CSS SelectorsSpecificity and CSS Selectors
Specificity and CSS Selectors
 
Html presentation
Html presentationHtml presentation
Html presentation
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
html-table
html-tablehtml-table
html-table
 
Regular expression in javascript
Regular expression in javascriptRegular expression in javascript
Regular expression in javascript
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Oracle basic queries
Oracle basic queriesOracle basic queries
Oracle basic queries
 
Css
CssCss
Css
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Manual de php con ejercicios
Manual de php con ejerciciosManual de php con ejercicios
Manual de php con ejercicios
 
Html ppt
Html pptHtml ppt
Html ppt
 
Presentación CSS
Presentación CSSPresentación CSS
Presentación CSS
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Introduction to sql
Introduction to sqlIntroduction to sql
Introduction to sql
 
html-css
html-csshtml-css
html-css
 

Similar a Tablas en html

Martin lopoez 905 12 (1)
Martin lopoez 905 12 (1)Martin lopoez 905 12 (1)
Martin lopoez 905 12 (1)
julianmartin22
 
DDL oracle - base de datos
DDL oracle - base de datosDDL oracle - base de datos
DDL oracle - base de datos
Luis Bando
 
Tablas en html
Tablas en htmlTablas en html
Tablas en html
cristedo
 

Similar a Tablas en html (20)

Tablas en html
Tablas en htmlTablas en html
Tablas en html
 
Uso de herramientas para la aplicaciones web.html
Uso de herramientas para la aplicaciones web.htmlUso de herramientas para la aplicaciones web.html
Uso de herramientas para la aplicaciones web.html
 
Tablas en HTML
Tablas en HTMLTablas en HTML
Tablas en HTML
 
Tablas en html
Tablas en htmlTablas en html
Tablas en html
 
Web3
Web3Web3
Web3
 
Tablas
TablasTablas
Tablas
 
006html Tablas
006html Tablas006html Tablas
006html Tablas
 
006: html tablas
006: html tablas006: html tablas
006: html tablas
 
Unidad #3
Unidad #3Unidad #3
Unidad #3
 
Unidad #3
Unidad #3Unidad #3
Unidad #3
 
Tablas y tipos de datos
Tablas y tipos de datosTablas y tipos de datos
Tablas y tipos de datos
 
Colegio nicolas esguerraa
Colegio nicolas esguerraaColegio nicolas esguerraa
Colegio nicolas esguerraa
 
Colegio nicolas esguerra
Colegio nicolas esguerraColegio nicolas esguerra
Colegio nicolas esguerra
 
Martin lopoez 905 12 (1)
Martin lopoez 905 12 (1)Martin lopoez 905 12 (1)
Martin lopoez 905 12 (1)
 
Etiquetas para tablas y sus propiedades
Etiquetas para tablas y sus propiedadesEtiquetas para tablas y sus propiedades
Etiquetas para tablas y sus propiedades
 
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
 
Taba y tipos de datos
Taba y tipos de datosTaba y tipos de datos
Taba y tipos de datos
 
DDL oracle - base de datos
DDL oracle - base de datosDDL oracle - base de datos
DDL oracle - base de datos
 
EXPOSICIÓN TABKAS
EXPOSICIÓN TABKASEXPOSICIÓN TABKAS
EXPOSICIÓN TABKAS
 
Tablas en html
Tablas en htmlTablas en html
Tablas en html
 

Más de Elim Aqp (20)

Copias de seguridad
Copias de seguridadCopias de seguridad
Copias de seguridad
 
Qué es jsp
Qué es jspQué es jsp
Qué es jsp
 
Formato de texto y caracteres especiales
Formato de texto y caracteres especialesFormato de texto y caracteres especiales
Formato de texto y caracteres especiales
 
Componentes físicos de HARWARE parte 1
Componentes físicos de HARWARE parte 1Componentes físicos de HARWARE parte 1
Componentes físicos de HARWARE parte 1
 
Diagrama unifilar
Diagrama unifilarDiagrama unifilar
Diagrama unifilar
 
Estacion de trabajo
Estacion de trabajoEstacion de trabajo
Estacion de trabajo
 
Extensiones de ficheros
Extensiones de ficherosExtensiones de ficheros
Extensiones de ficheros
 
Imágenes html
Imágenes htmlImágenes html
Imágenes html
 
Seguridad en redes tcp
Seguridad en redes tcpSeguridad en redes tcp
Seguridad en redes tcp
 
Grafico estadístico
Grafico estadísticoGrafico estadístico
Grafico estadístico
 
Grafico estadístico
Grafico estadísticoGrafico estadístico
Grafico estadístico
 
Sistema electrico
Sistema electricoSistema electrico
Sistema electrico
 
Marquesinas (marquees)
Marquesinas (marquees)Marquesinas (marquees)
Marquesinas (marquees)
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 
Configuracion de un servidor de archivos
Configuracion de un servidor de archivosConfiguracion de un servidor de archivos
Configuracion de un servidor de archivos
 
Switch case en python
Switch case en pythonSwitch case en python
Switch case en python
 
Direccionamiento ip
Direccionamiento ipDireccionamiento ip
Direccionamiento ip
 
Ms dos basico
Ms dos basicoMs dos basico
Ms dos basico
 
Topologia de redes basico
Topologia de redes basicoTopologia de redes basico
Topologia de redes basico
 
Bucles en python
Bucles en pythonBucles en python
Bucles en python
 

Último

Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
EliaHernndez7
 
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
amelia poma
 

Último (20)

Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
Actividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxActividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docx
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Desarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresDesarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por Valores
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
activ4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfactiv4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdf
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
PLAN LECTOR 2024 integrado nivel inicial-miercoles 10.pptx
PLAN LECTOR 2024  integrado nivel inicial-miercoles 10.pptxPLAN LECTOR 2024  integrado nivel inicial-miercoles 10.pptx
PLAN LECTOR 2024 integrado nivel inicial-miercoles 10.pptx
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdf
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdf
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 

Tablas en html

  • 1. Tablas en html Prof. Eudes Quispe
  • 2. Concepto • 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. ETIQUETA • La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta <td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.
  • 3. TD (<td>) • abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas) • headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de valores del atributo "id" de celdas • scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna • colspan = "numero" - Número de columnas que ocupa esta celda • rowspan = "numero" - Número de filas que ocupa esta celda
  • 4. TH (<th>) • abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas) • headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de ID de celdas • scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna • colspan = "numero" - Número de columnas que ocupa esta celda • rowspan = "numero" - Número de filas que ocupa esta celda
  • 5. Es posible modificar los siguientes atributos de una tabla Atributo Significado Posibles valores width ancho de la tabla un número, acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número, acompañado de % cuando se desee que sea en porcentaje cellpadding espacio entre el contenido de las celdas y el borde un número cellspacing espacio entre celdas un número border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal
  • 6. Caption (<caption> ) • Se emplea para definir la leyenda o título de una tabla
  • 7. De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas como la de la siguiente imagen: Marque con aspa SI NO
  • 8. EJERCICIO • Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen: