SlideShare una empresa de Scribd logo
1 de 5
CÓDIGOS DE TABLAS
EN HTML
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este
concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha
sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir
información que, de otro modo, no sería comprendida tan fácilmente
ETIQUETA DESCRIPCIÓN
<th>
Etiqueta contenedora que tendrá en su interior toda la tabla.<table>
Table Header. Cada una de las celdas de cabecera de la tabla.
<tr>
<td>
Table Row. Etiqueta contenedora de cada fila de la tabla.
Table Data. Cada una de las celdas de la tabla.
CÓDIGO DE TABLAS CON
IMÁGENES EN HTML
<table>
Si bien una de las cosas que podemos es crear tablas HTML con imágenes. Es decir, que
el contenido de las celdas de la tabla sean imágenes.
La creación básica de una tabla se realiza mediante los elementos table para reflejar la
tabla en sí, tr que representaría las filas y tdque serían las propias celdas.
<thead>
<tr>
<th>Texto<
/th>
</thead>
<th>Image
n</th>
</tr>
<tr>
<td></td>
<tr>
<td></td>
<tr>
</table>
CÓDIGO DE TABLA CON
BORDE EN HTML
hay varias opiniones disponibles. Tu borde puede ser una única línea sólida, una línea de
puntos o una línea discontinua. Aquí están los valores disponibles:
Para obtener un borde azul, una línea discontinua de 3 píxeles de grueso introduciré:
none: sin borde (por defecto);
solid: una sola línea sólida;
dotted: una línea de puntos;
dashed: una línea discontinua;
double: con doble borde;
groove: una línea estriada;
ridge: una línea con crestas;
inset: inset global efecto 3D;
outset: outset global efecto 3D
border-top: borde
superior;
border-bottom: borde
inferior;
border-left: borde
izquierdo;
border-right: borde
derecho;
CÓDIGO DE TABLAS CON
LINK O ENLACES EN HTML
Lo que caracteriza a la web como medio de comunicación es la navegación Por medio de
hipervínculos (links o enlaces). Esta conexión entre archivos permite al usuario elegir el
sentido de la navegación.
En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo principal
es href="" donde se escribe la ubicación del archivo de destino que puede estar en la
misma carpeta que el archivo que lo está llamando, en otra carpeta del mismo sitio o en
otro sitio web.
RUTAS DE ENLACES:
Se llama ruta al valor que se escribe dentro del
atributo href="" y se pueden clasificar en dos tipos:
Rutas Absolutas: Rutas Relativas:
Las rutas absolutas son las que definen la ubicación
completa de un archivo en la web y empiezan
desde http://nombredelsitio.com.ar/archivo.html (el
archivo de destino puede ser de cualquier extensión). Por
ejemplo si queremos vincular nuestro sitio con Facebook,
usaríamos una ruta absoluta y el código sería:
Las rutas relativas en cambio, definen la ubicación del
archivo de destino en relación a la ubicación del archivo
que lo está llamando. Ejemplo: si el
archivo index.html vincula con quien-soy.html y están
en la misma carpeta, el código sería asi:
<ahref="https://www.facebook.com/pagina">Estam
os en Facebook</a>. <a href="quien-soy.html">Quién soy</a>.
Tipos de enlaces
Existen diferentes tipos de enlaces que detallo a continuación:
Enlaces internos entre archivos .html Son los enlaces principales de un sitio.
Si en el archivo index.html, queremos agregar un vínculo a contacto.
html el código sería así:<a href="contacto.html">Contáctenos</a>.
Enlaces Externos
Enlaces internos: anclas
Enlaces para ampliar una
imagen
Enlaces para descargar
archivos
Enlaces a una dirección de
correo
Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con
otro, tenemos que indicar la ruta absoluta del sitio escribiendo la url completa que
conviene copiarla del navegador.
Las anclas son enlaces hacia un punto determinado dentro de un html. Se usa en varios
casos, en una página de preguntas frecuentes donde las respuestas están desarrolladas
debajo de las preguntas.
Es común armar una galería de fotos con imágenes miniaturas que vinculan a imágenes
ampliadas. Si combinamos este recurso con código javascript, logramos galerías de fotos
muy atractivas.
En realidad, dentro del atributo href="" podemos colocar la ruta hacia cualquier tipo de
archivo. Si el navegador reconoce la extensión, lo abre.
Se puede vincular una dirección de correo para que abra en el programa de correo
predeterminado.

Más contenido relacionado

La actualidad más candente

Andree duque
Andree duqueAndree duque
Andree duque
karamirex
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
marcos0209
 
4 Guia Xhtm Lv2.1
4   Guia Xhtm Lv2.14   Guia Xhtm Lv2.1
4 Guia Xhtm Lv2.1
Ergoclicks
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
EderMontes
 

La actualidad más candente (20)

Html
HtmlHtml
Html
 
Bloque 4 farrera Programar Websites!
Bloque 4 farrera Programar Websites!Bloque 4 farrera Programar Websites!
Bloque 4 farrera Programar Websites!
 
Diapositivas HTML
Diapositivas HTMLDiapositivas HTML
Diapositivas HTML
 
Andree duque
Andree duqueAndree duque
Andree duque
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTML
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Introducción a CSS
Introducción a CSSIntroducción a CSS
Introducción a CSS
 
4 Guia Xhtm Lv2.1
4   Guia Xhtm Lv2.14   Guia Xhtm Lv2.1
4 Guia Xhtm Lv2.1
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
4 Html
4 Html4 Html
4 Html
 
Crear paginas web
Crear paginas webCrear paginas web
Crear paginas web
 
Primera Clase de xhtml
Primera Clase de xhtmlPrimera Clase de xhtml
Primera Clase de xhtml
 
8 Xml
8 Xml8 Xml
8 Xml
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Html
HtmlHtml
Html
 
1 crear pag formatos
1 crear pag formatos1 crear pag formatos
1 crear pag formatos
 
Que es la web
Que es la webQue es la web
Que es la web
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 

Similar a Mariuxi perez monserrate (20)

Anthony rodriguez codigos de tablas en html
Anthony rodriguez codigos de tablas en htmlAnthony rodriguez codigos de tablas en html
Anthony rodriguez codigos de tablas en html
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
danny
dannydanny
danny
 
Produccion de material educ. diapositivas html
Produccion de material educ. diapositivas htmlProduccion de material educ. diapositivas html
Produccion de material educ. diapositivas html
 
Html
HtmlHtml
Html
 
Investigacion de html y xml
Investigacion de html y xmlInvestigacion de html y xml
Investigacion de html y xml
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Edición de documentos
Edición de documentosEdición de documentos
Edición de documentos
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Emily
EmilyEmily
Emily
 
Slideshare
SlideshareSlideshare
Slideshare
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
HTML HyperText Markup Language
HTML HyperText Markup LanguageHTML HyperText Markup Language
HTML HyperText Markup Language
 
Eduardo espinoza cod-de-tablas-html
Eduardo espinoza cod-de-tablas-htmlEduardo espinoza cod-de-tablas-html
Eduardo espinoza cod-de-tablas-html
 

Último

GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
EdisonCondesoDelgado1
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 

Último (20)

Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdfCATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHEDIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
 
Triptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jajaTriptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jaja
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
DIAGNÓSTICO AMBIENTAL Y URBANO. POTOCOS.
DIAGNÓSTICO AMBIENTAL Y URBANO. POTOCOS.DIAGNÓSTICO AMBIENTAL Y URBANO. POTOCOS.
DIAGNÓSTICO AMBIENTAL Y URBANO. POTOCOS.
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Manual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfManual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 

Mariuxi perez monserrate

  • 1. CÓDIGOS DE TABLAS EN HTML Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente ETIQUETA DESCRIPCIÓN <th> Etiqueta contenedora que tendrá en su interior toda la tabla.<table> Table Header. Cada una de las celdas de cabecera de la tabla. <tr> <td> Table Row. Etiqueta contenedora de cada fila de la tabla. Table Data. Cada una de las celdas de la tabla.
  • 2. CÓDIGO DE TABLAS CON IMÁGENES EN HTML <table> Si bien una de las cosas que podemos es crear tablas HTML con imágenes. Es decir, que el contenido de las celdas de la tabla sean imágenes. La creación básica de una tabla se realiza mediante los elementos table para reflejar la tabla en sí, tr que representaría las filas y tdque serían las propias celdas. <thead> <tr> <th>Texto< /th> </thead> <th>Image n</th> </tr> <tr> <td></td> <tr> <td></td> <tr> </table>
  • 3. CÓDIGO DE TABLA CON BORDE EN HTML hay varias opiniones disponibles. Tu borde puede ser una única línea sólida, una línea de puntos o una línea discontinua. Aquí están los valores disponibles: Para obtener un borde azul, una línea discontinua de 3 píxeles de grueso introduciré: none: sin borde (por defecto); solid: una sola línea sólida; dotted: una línea de puntos; dashed: una línea discontinua; double: con doble borde; groove: una línea estriada; ridge: una línea con crestas; inset: inset global efecto 3D; outset: outset global efecto 3D border-top: borde superior; border-bottom: borde inferior; border-left: borde izquierdo; border-right: borde derecho;
  • 4. CÓDIGO DE TABLAS CON LINK O ENLACES EN HTML Lo que caracteriza a la web como medio de comunicación es la navegación Por medio de hipervínculos (links o enlaces). Esta conexión entre archivos permite al usuario elegir el sentido de la navegación. En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo principal es href="" donde se escribe la ubicación del archivo de destino que puede estar en la misma carpeta que el archivo que lo está llamando, en otra carpeta del mismo sitio o en otro sitio web. RUTAS DE ENLACES: Se llama ruta al valor que se escribe dentro del atributo href="" y se pueden clasificar en dos tipos: Rutas Absolutas: Rutas Relativas: Las rutas absolutas son las que definen la ubicación completa de un archivo en la web y empiezan desde http://nombredelsitio.com.ar/archivo.html (el archivo de destino puede ser de cualquier extensión). Por ejemplo si queremos vincular nuestro sitio con Facebook, usaríamos una ruta absoluta y el código sería: Las rutas relativas en cambio, definen la ubicación del archivo de destino en relación a la ubicación del archivo que lo está llamando. Ejemplo: si el archivo index.html vincula con quien-soy.html y están en la misma carpeta, el código sería asi: <ahref="https://www.facebook.com/pagina">Estam os en Facebook</a>. <a href="quien-soy.html">Quién soy</a>.
  • 5. Tipos de enlaces Existen diferentes tipos de enlaces que detallo a continuación: Enlaces internos entre archivos .html Son los enlaces principales de un sitio. Si en el archivo index.html, queremos agregar un vínculo a contacto. html el código sería así:<a href="contacto.html">Contáctenos</a>. Enlaces Externos Enlaces internos: anclas Enlaces para ampliar una imagen Enlaces para descargar archivos Enlaces a una dirección de correo Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con otro, tenemos que indicar la ruta absoluta del sitio escribiendo la url completa que conviene copiarla del navegador. Las anclas son enlaces hacia un punto determinado dentro de un html. Se usa en varios casos, en una página de preguntas frecuentes donde las respuestas están desarrolladas debajo de las preguntas. Es común armar una galería de fotos con imágenes miniaturas que vinculan a imágenes ampliadas. Si combinamos este recurso con código javascript, logramos galerías de fotos muy atractivas. En realidad, dentro del atributo href="" podemos colocar la ruta hacia cualquier tipo de archivo. Si el navegador reconoce la extensión, lo abre. Se puede vincular una dirección de correo para que abra en el programa de correo predeterminado.