SlideShare una empresa de Scribd logo
1 de 9
TABLAS DE DATOS EN HTML

Las tablas están formadas por celdas, que son los recuadros que se obtienen
como resultado de la intersección entre una fila y una columna.
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre
dichas etiquetas habrá que especificar las filas y columnas que formarán la
tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la
tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas, es
necesario también especificar el número de columnas.
Una celda es el resultado de la intersección entre una fila y una
columna, por lo que podremos especificar el número de celdas por
fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las
celdas que compongan cada una de las filas de la tabla. Por lo
tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y
</tr>.
Entre las etiquetas <td> y </td> se podrá especificar el contenido
de cada una de las celdas
Ejemplo :
Diseñar en HTML la siguiente tabla :
MATERIA

CURSO

INGLES

SEGUNDO

FISICA

TERCERO

<table border="1">
<tr>
<td>MATERIA</td>
<td>CURSO</td>
</tr>
<tr>
<td>INGLES</td>
<td>SEGUNDO</td>
</tr>
<tr>
<td>FISICA<td>
<td>TERCERO</td>
</tr>
</table>
ATRIBUTOS DE UNA TABLA
Atributo

Significado

width

ancho de la tabla

height

altura de la tabla

cellpadding

espacio entre el contenido de las
celdas y el borde

un número

espacio entre celdas

un número

grosor del borde

un número

alineación de la tabla dentro de
la página

left (izquierda)
right (derecha)
center (centro)

color de fondo

número hexadecimal

imagen de fondo

número hexadecimal

color del borde

número hexadecimal

cellspacing
border
align
bgcolor
background
bordercolor

Posibles valores
un número, acompañado de % cuando se desee
que sea en porcentaje
un número, acompañado de % cuando se desee
que sea en porcentaje
Por ejemplo, para modificar la tabla anterior para que quedase como la siguiente:

MATERIA

CURSO

INGLES

SEGUNDO

FISICA

TERCERO

Habría que escribir:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
...
……
</table>

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la
ventana , que el borde (border) tiene un grosor de dos píxeles (es más ancho que las
separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al
centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que
el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).
Encabezado de columna <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas,
pero podemos poner en su lugar las etiquetas<th> y </th>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la
etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca
centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las
columnas.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="1" align="center">
<tr>
<th>MATERIA</td>
<th>CURSO </td>
</tr>
<tr>
<td>INGLES</td>
<td>SEGUNDO</td>
</tr>
<tr>
<td>FISICA<td>
<td>TERCERO</td>
</tr>
</table>
LA TABLA QUEDARÍA :

MATERIA

CURSO

INGLES

SEGUNDO

FISICA

TERCERO
<table width="50%" border="2" align="center" cellspacing="0"
bordercolor="#000000" bgcolor="#FFCC99">

<tr align="center" bgcolor="#0099CC">
PRACTICA GENERAR LA SIGUIENTE TABLA EN HTL .
INSERTE LA TABLA EN UNA PAGINA WEB CUALQUIERA

PROVINCIA

CAPITAL

CIUDAD

PICHINCHA

QUITO

PANECILLO

GUAYAS

GUAYAQUIL

DAULE

TUNGURAHUA

AMBATO

CEVALLOS

Más contenido relacionado

La actualidad más candente (14)

Htmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafrancoHtmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafranco
 
Tablas de HTML
Tablas de HTMLTablas de HTML
Tablas de HTML
 
Tablas html
Tablas htmlTablas html
Tablas html
 
Taller5
Taller5Taller5
Taller5
 
Factores de HTML_Andrea Sofia
Factores de HTML_Andrea SofiaFactores de HTML_Andrea Sofia
Factores de HTML_Andrea Sofia
 
Html trabajo 5 informatica 904
Html trabajo 5 informatica 904Html trabajo 5 informatica 904
Html trabajo 5 informatica 904
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Trabajo 3
Trabajo 3Trabajo 3
Trabajo 3
 
TRABAJO 2
TRABAJO 2TRABAJO 2
TRABAJO 2
 
Unidad V
Unidad V Unidad V
Unidad V
 
Tu papa
Tu papaTu papa
Tu papa
 
Portada
PortadaPortada
Portada
 
Tablas
TablasTablas
Tablas
 

Destacado

CELTA COURSE TRAINING ATTENDED
CELTA COURSE TRAINING ATTENDEDCELTA COURSE TRAINING ATTENDED
CELTA COURSE TRAINING ATTENDED
Derek Bryant, MPA
 
1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH
1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH
1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH
Tina T. Tsai, ACSW
 
Manual intr tec_edu (1)
Manual intr tec_edu (1)Manual intr tec_edu (1)
Manual intr tec_edu (1)
GAC99
 
Ejemplo de publicidad BTL en las canciones
Ejemplo de publicidad BTL en las cancionesEjemplo de publicidad BTL en las canciones
Ejemplo de publicidad BTL en las canciones
Omar Mendiola
 
Csm politicas adm-v02-faixas_sem_marca_de_corte
Csm politicas adm-v02-faixas_sem_marca_de_corteCsm politicas adm-v02-faixas_sem_marca_de_corte
Csm politicas adm-v02-faixas_sem_marca_de_corte
Jamesson James Mendonça
 
International Women’s Day Slideshow
International Women’s Day SlideshowInternational Women’s Day Slideshow
International Women’s Day Slideshow
Daniel R. Wood
 

Destacado (20)

Andrew FA-SHG33
Andrew FA-SHG33Andrew FA-SHG33
Andrew FA-SHG33
 
CELTA COURSE TRAINING ATTENDED
CELTA COURSE TRAINING ATTENDEDCELTA COURSE TRAINING ATTENDED
CELTA COURSE TRAINING ATTENDED
 
Conferência_06_08_2016
Conferência_06_08_2016Conferência_06_08_2016
Conferência_06_08_2016
 
Presentation1
Presentation1Presentation1
Presentation1
 
1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH
1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH
1st Ebola Survivor to Deliver a Full -Term Baby in US - AJPH
 
Präsentation
PräsentationPräsentation
Präsentation
 
Арсеньевский городской округ
Арсеньевский городской округАрсеньевский городской округ
Арсеньевский городской округ
 
S(-)ound
S(-)oundS(-)ound
S(-)ound
 
Aneesh c.v
Aneesh c.vAneesh c.v
Aneesh c.v
 
Manual intr tec_edu (1)
Manual intr tec_edu (1)Manual intr tec_edu (1)
Manual intr tec_edu (1)
 
Ejemplo de publicidad BTL en las canciones
Ejemplo de publicidad BTL en las cancionesEjemplo de publicidad BTL en las canciones
Ejemplo de publicidad BTL en las canciones
 
Hardware y sofware
Hardware y sofwareHardware y sofware
Hardware y sofware
 
Caso López: Encuesta de Opinión Pública en Argentina
Caso López: Encuesta de Opinión Pública en ArgentinaCaso López: Encuesta de Opinión Pública en Argentina
Caso López: Encuesta de Opinión Pública en Argentina
 
Csm politicas adm-v02-faixas_sem_marca_de_corte
Csm politicas adm-v02-faixas_sem_marca_de_corteCsm politicas adm-v02-faixas_sem_marca_de_corte
Csm politicas adm-v02-faixas_sem_marca_de_corte
 
Syahadat dalam bahasa arab asy
Syahadat dalam bahasa arab asySyahadat dalam bahasa arab asy
Syahadat dalam bahasa arab asy
 
Goldmedia Interaktions-Index - Januar 2013
Goldmedia Interaktions-Index - Januar 2013Goldmedia Interaktions-Index - Januar 2013
Goldmedia Interaktions-Index - Januar 2013
 
Certificate_2
Certificate_2Certificate_2
Certificate_2
 
CV L.M. Coetzee
CV L.M. CoetzeeCV L.M. Coetzee
CV L.M. Coetzee
 
International Women’s Day Slideshow
International Women’s Day SlideshowInternational Women’s Day Slideshow
International Women’s Day Slideshow
 
Latex1
Latex1Latex1
Latex1
 

Similar a tablas (20)

TABLAS HTML
TABLAS HTMLTABLAS HTML
TABLAS HTML
 
Clase 5
Clase 5Clase 5
Clase 5
 
Clase 5
Clase 5Clase 5
Clase 5
 
Martin lopoez 905 12
Martin lopoez 905 12Martin lopoez 905 12
Martin lopoez 905 12
 
Martin lopoez 905 12 (1)
Martin lopoez 905 12 (1)Martin lopoez 905 12 (1)
Martin lopoez 905 12 (1)
 
Web 5
Web 5Web 5
Web 5
 
Web3
Web3Web3
Web3
 
Olivarko
OlivarkoOlivarko
Olivarko
 
Trabajo 5
Trabajo 5Trabajo 5
Trabajo 5
 
Bbn
BbnBbn
Bbn
 
Peres el yisus
Peres el yisusPeres el yisus
Peres el yisus
 
Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
4
44
4
 
Pagina web 5.
Pagina web 5.Pagina web 5.
Pagina web 5.
 
Riveras
RiverasRiveras
Riveras
 
Tablas
TablasTablas
Tablas
 
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
 
Tablas html
Tablas htmlTablas html
Tablas html
 

Último

PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
EduardoJosVargasCama1
 
🦄💫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)

PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
 
PP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomasPP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomas
 
Posición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptxPosición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptx
 
Power Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptxPower Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptx
 
Sesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdfSesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdf
 
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
 
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
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.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
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Código Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de VenezuelaCódigo Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de Venezuela
 
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdf
 
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfFICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Novena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan EudesNovena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan Eudes
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 

tablas

  • 1. TABLAS DE DATOS EN HTML Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiríamos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>
  • 2. Columna o celda <td> Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas
  • 3. Ejemplo : Diseñar en HTML la siguiente tabla : MATERIA CURSO INGLES SEGUNDO FISICA TERCERO <table border="1"> <tr> <td>MATERIA</td> <td>CURSO</td> </tr> <tr> <td>INGLES</td> <td>SEGUNDO</td> </tr> <tr> <td>FISICA<td> <td>TERCERO</td> </tr> </table>
  • 4. ATRIBUTOS DE UNA TABLA Atributo Significado width ancho de la tabla height altura de la tabla cellpadding espacio entre el contenido de las celdas y el borde un número espacio entre celdas un número grosor del borde un número alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) color de fondo número hexadecimal imagen de fondo número hexadecimal color del borde número hexadecimal cellspacing border align bgcolor background bordercolor Posibles valores un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje
  • 5. Por ejemplo, para modificar la tabla anterior para que quedase como la siguiente: MATERIA CURSO INGLES SEGUNDO FISICA TERCERO Habría que escribir: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> ... …… </table> Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana , que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).
  • 6. Encabezado de columna <th> Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas<th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas. Por ejemplo, si escribiéramos el siguiente código: <table width="50%" border="1" align="center"> <tr> <th>MATERIA</td> <th>CURSO </td> </tr> <tr> <td>INGLES</td> <td>SEGUNDO</td> </tr> <tr> <td>FISICA<td> <td>TERCERO</td> </tr> </table>
  • 7. LA TABLA QUEDARÍA : MATERIA CURSO INGLES SEGUNDO FISICA TERCERO
  • 8. <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC">
  • 9. PRACTICA GENERAR LA SIGUIENTE TABLA EN HTL . INSERTE LA TABLA EN UNA PAGINA WEB CUALQUIERA PROVINCIA CAPITAL CIUDAD PICHINCHA QUITO PANECILLO GUAYAS GUAYAQUIL DAULE TUNGURAHUA AMBATO CEVALLOS