SlideShare una empresa de Scribd logo
Colegio nacional Nicolás Esguerra
Jorge enrique Ortiz Galindo
Juan pablo ortega villa
901
Pagina web V
TABLAS <tablas>
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar
tablas, filas y columnas, y modificar sus propiedades.
Fila<tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la
tabla. Estas etiquetas deberán insertarseentre las etiqetas <table> y
</table>. Ejemplo:
<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>.
Habría que escribir:
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>CursoHTML</td>
<td>CursoDreamweaver</td>
</tr>
<tr>
<td>CursoFrontpage</td>
<td>CursoFlash</td>
</tr>
</table>
Formatode tabla
Por ejemplo, para modificar la tabla de la página anterior para que quedase
como la siguiente:
Habría que escribir:
<table width="50%"border="2"align="center"cellspacing="0"
bordercolor="#000000" bgcolor="#FFCC99">
...
</table>
Formatode las celdas
También es posible modificar estos atributos de toda una fila,
especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.
Hay que tener en cuenta que los atributos tienen más prioridad cuando son
establecidos para una celda que cuando son establecidos para una fila
completa. Al mismo tiempo, tienen más prioridad los atributos establecidos
para una fila que los establecidos para toda la tabla.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%"border="2"align="center"cellspacing="0"
bordercolor="#000000"bgcolor="#FFCC99">
<tr align="center"bgcolor="#0099CC">
<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>CursoHTML</td>
<td>CursoDreamweaver</td>
</tr>
<tr>
<td>CursoFrontpage</td>
<td>CursoFlash</td>
</tr>
</table>
Obtendríamos la siguiente tabla:
Pagina web 5

Más contenido relacionado

La actualidad más candente (14)

Ddd
DddDdd
Ddd
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Tablas
TablasTablas
Tablas
 
Html trabajo 5 informatica 904
Html trabajo 5 informatica 904Html trabajo 5 informatica 904
Html trabajo 5 informatica 904
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Tablas
TablasTablas
Tablas
 
Indes.html
Indes.htmlIndes.html
Indes.html
 
Colegio nacional nicolas esguerra tablasTWET
Colegio  nacional nicolas esguerra tablasTWETColegio  nacional nicolas esguerra tablasTWET
Colegio nacional nicolas esguerra tablasTWET
 
Peres el yisus
Peres el yisusPeres el yisus
Peres el yisus
 
Portada
PortadaPortada
Portada
 
Tablas
TablasTablas
Tablas
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerra Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Taller5
Taller5Taller5
Taller5
 
OMIDAS
OMIDASOMIDAS
OMIDAS
 

Destacado (20)

Plantilla con-normas-icontec (1) (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1) (1)Plantilla con-normas-icontec (1) (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1) (1)
 
Robótica educativa
Robótica educativaRobótica educativa
Robótica educativa
 
Portada 901
Portada 901Portada 901
Portada 901
 
trabajo ahi TO wapo
trabajo ahi TO wapotrabajo ahi TO wapo
trabajo ahi TO wapo
 
corel draw
corel drawcorel draw
corel draw
 
Base de datos
Base de datosBase de datos
Base de datos
 
{Rf3thvo{tuihvt5ijophn
{Rf3thvo{tuihvt5ijophn{Rf3thvo{tuihvt5ijophn
{Rf3thvo{tuihvt5ijophn
 
Presentación1
Presentación1Presentación1
Presentación1
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Trabajo
TrabajoTrabajo
Trabajo
 
Plantilla con-normas-icontec (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1)Plantilla con-normas-icontec (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1)
 
roobot educatibo
roobot educatiboroobot educatibo
roobot educatibo
 
Facturas
FacturasFacturas
Facturas
 
Plantilla con-normas-icontec (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1)Plantilla con-normas-icontec (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1)
 
Pagina web 3
Pagina web 3Pagina web 3
Pagina web 3
 
Pagina web 3
Pagina web 3Pagina web 3
Pagina web 3
 
Uygyti
UygytiUygyti
Uygyti
 
Caca f
Caca fCaca f
Caca f
 
Pagina web ii 33333334567
Pagina web ii 33333334567Pagina web ii 33333334567
Pagina web ii 33333334567
 
lego nxt
lego nxtlego nxt
lego nxt
 

Similar a Pagina web 5 (19)

Red
RedRed
Red
 
Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
4
44
4
 
Tablas
TablasTablas
Tablas
 
Trabajo 3
Trabajo 3Trabajo 3
Trabajo 3
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Trabajo5
Trabajo5Trabajo5
Trabajo5
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Tablas
Tablas Tablas
Tablas
 
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
 
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
 
Penenope
PenenopePenenope
Penenope
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 

Más de Juan Pablo Ortega Villa (13)

Plantilla con-normas-icontec (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1)Plantilla con-normas-icontec (1) (1) (1)
Plantilla con-normas-icontec (1) (1) (1)
 
MICROSOFT ACESS
MICROSOFT ACESSMICROSOFT ACESS
MICROSOFT ACESS
 
Kwefgwqelgrfhyrhyeurjuhruu
KwefgwqelgrfhyrhyeurjuhruuKwefgwqelgrfhyrhyeurjuhruu
Kwefgwqelgrfhyrhyeurjuhruu
 
Heruiñogvlkj bn1 kñlt smngtrjse
Heruiñogvlkj bn1 kñlt smngtrjseHeruiñogvlkj bn1 kñlt smngtrjse
Heruiñogvlkj bn1 kñlt smngtrjse
 
Robótica educativa
Robótica educativaRobótica educativa
Robótica educativa
 
{Rf3thvo{tuihvt5ijophn
{Rf3thvo{tuihvt5ijophn{Rf3thvo{tuihvt5ijophn
{Rf3thvo{tuihvt5ijophn
 
Solucionario del-algebra-baldor-ejercicios-resueltos
Solucionario del-algebra-baldor-ejercicios-resueltosSolucionario del-algebra-baldor-ejercicios-resueltos
Solucionario del-algebra-baldor-ejercicios-resueltos
 
Presentación1890
Presentación1890Presentación1890
Presentación1890
 
Trabajo jp lego nxt
Trabajo jp lego nxtTrabajo jp lego nxt
Trabajo jp lego nxt
 
Epu
EpuEpu
Epu
 
Secuencias scratch
Secuencias scratchSecuencias scratch
Secuencias scratch
 
Variables scratch 803
Variables scratch 803Variables scratch 803
Variables scratch 803
 
cuadro conceptual
cuadro conceptualcuadro conceptual
cuadro conceptual
 

Último

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...LIZBETHVALENCIA12
 
El-Nazismo REFORZAMIENTO (1).pdf123456789
El-Nazismo REFORZAMIENTO (1).pdf123456789El-Nazismo REFORZAMIENTO (1).pdf123456789
El-Nazismo REFORZAMIENTO (1).pdf123456789huasasquichealfonso7
 
Guía Didáctica-Matemática- tercer grado.pdf
Guía Didáctica-Matemática- tercer grado.pdfGuía Didáctica-Matemática- tercer grado.pdf
Guía Didáctica-Matemática- tercer grado.pdfYafreisyAcosta1
 
El Arte ultimo del siglo XX-Ana Guash.pdf
El Arte ultimo del siglo XX-Ana Guash.pdfEl Arte ultimo del siglo XX-Ana Guash.pdf
El Arte ultimo del siglo XX-Ana Guash.pdfjaiimepg35
 
Mapa de historia, arquitectura bizantina y paleocristiana.
Mapa de historia, arquitectura bizantina y paleocristiana.Mapa de historia, arquitectura bizantina y paleocristiana.
Mapa de historia, arquitectura bizantina y paleocristiana.Luis Martínez
 
Sociedad Contemporánea. Relaciones Industriales.
Sociedad Contemporánea. Relaciones Industriales.Sociedad Contemporánea. Relaciones Industriales.
Sociedad Contemporánea. Relaciones Industriales.andresferrer21110
 
La Arquitectura del Eclecticismo Afiche Didáctico
La Arquitectura del Eclecticismo Afiche DidácticoLa Arquitectura del Eclecticismo Afiche Didáctico
La Arquitectura del Eclecticismo Afiche DidácticoWahilL
 
BASICO ASHANINKA LOS SALUDOS-curso de id
BASICO ASHANINKA LOS SALUDOS-curso de idBASICO ASHANINKA LOS SALUDOS-curso de id
BASICO ASHANINKA LOS SALUDOS-curso de idMelanyMandarachiRive
 
ARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADES
ARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADESARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADES
ARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADESbluemoonlight771
 
ARQUITECTURA PALEOCRISTIANA Y BIZANTINAA
ARQUITECTURA PALEOCRISTIANA Y BIZANTINAAARQUITECTURA PALEOCRISTIANA Y BIZANTINAA
ARQUITECTURA PALEOCRISTIANA Y BIZANTINAAandrea Varela
 
Bitácora de historia: barroco y neoclásico
Bitácora de historia: barroco y neoclásicoBitácora de historia: barroco y neoclásico
Bitácora de historia: barroco y neoclásicoal050121044
 
CATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdf
CATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdfCATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdf
CATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdfjmmaringuevara
 
diagrama de flujo de hackeo de almeida edgar.pptx
diagrama de flujo de hackeo de almeida edgar.pptxdiagrama de flujo de hackeo de almeida edgar.pptx
diagrama de flujo de hackeo de almeida edgar.pptxgabriel guaicara
 
ESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRES
ESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRESESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRES
ESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRESelizabethaldaz60
 
E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...
E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...
E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...EusebioVidal1
 
Arquitectura Paleocristiana y bizantina.
Arquitectura Paleocristiana y bizantina.Arquitectura Paleocristiana y bizantina.
Arquitectura Paleocristiana y bizantina.CamilaIsabelaRodrigu
 

Último (17)

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...
 
El-Nazismo REFORZAMIENTO (1).pdf123456789
El-Nazismo REFORZAMIENTO (1).pdf123456789El-Nazismo REFORZAMIENTO (1).pdf123456789
El-Nazismo REFORZAMIENTO (1).pdf123456789
 
Guía Didáctica-Matemática- tercer grado.pdf
Guía Didáctica-Matemática- tercer grado.pdfGuía Didáctica-Matemática- tercer grado.pdf
Guía Didáctica-Matemática- tercer grado.pdf
 
El Arte ultimo del siglo XX-Ana Guash.pdf
El Arte ultimo del siglo XX-Ana Guash.pdfEl Arte ultimo del siglo XX-Ana Guash.pdf
El Arte ultimo del siglo XX-Ana Guash.pdf
 
Mapa de historia, arquitectura bizantina y paleocristiana.
Mapa de historia, arquitectura bizantina y paleocristiana.Mapa de historia, arquitectura bizantina y paleocristiana.
Mapa de historia, arquitectura bizantina y paleocristiana.
 
39. OLIMPIA, LOS JUEGOS OLÌMPICOS EN LA ANTIGUA GRECIA
39. OLIMPIA, LOS JUEGOS OLÌMPICOS EN LA ANTIGUA GRECIA39. OLIMPIA, LOS JUEGOS OLÌMPICOS EN LA ANTIGUA GRECIA
39. OLIMPIA, LOS JUEGOS OLÌMPICOS EN LA ANTIGUA GRECIA
 
Sociedad Contemporánea. Relaciones Industriales.
Sociedad Contemporánea. Relaciones Industriales.Sociedad Contemporánea. Relaciones Industriales.
Sociedad Contemporánea. Relaciones Industriales.
 
La Arquitectura del Eclecticismo Afiche Didáctico
La Arquitectura del Eclecticismo Afiche DidácticoLa Arquitectura del Eclecticismo Afiche Didáctico
La Arquitectura del Eclecticismo Afiche Didáctico
 
BASICO ASHANINKA LOS SALUDOS-curso de id
BASICO ASHANINKA LOS SALUDOS-curso de idBASICO ASHANINKA LOS SALUDOS-curso de id
BASICO ASHANINKA LOS SALUDOS-curso de id
 
ARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADES
ARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADESARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADES
ARTE RECONOCIDO A NIVEL MUNDIAL Y ALGUNAS DE SUS CURIOSIDADES
 
ARQUITECTURA PALEOCRISTIANA Y BIZANTINAA
ARQUITECTURA PALEOCRISTIANA Y BIZANTINAAARQUITECTURA PALEOCRISTIANA Y BIZANTINAA
ARQUITECTURA PALEOCRISTIANA Y BIZANTINAA
 
Bitácora de historia: barroco y neoclásico
Bitácora de historia: barroco y neoclásicoBitácora de historia: barroco y neoclásico
Bitácora de historia: barroco y neoclásico
 
CATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdf
CATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdfCATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdf
CATALOGO DEKA KHROMA MARIN GUEVARA galería AdB.pdf
 
diagrama de flujo de hackeo de almeida edgar.pptx
diagrama de flujo de hackeo de almeida edgar.pptxdiagrama de flujo de hackeo de almeida edgar.pptx
diagrama de flujo de hackeo de almeida edgar.pptx
 
ESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRES
ESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRESESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRES
ESTUDIOS SOCIALES LIBRO DE OCTAVO DESDE LA UNIDAD TRES
 
E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...
E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...
E.VIDAL captura la vibrante vida cotidiana y las tradiciones de la República ...
 
Arquitectura Paleocristiana y bizantina.
Arquitectura Paleocristiana y bizantina.Arquitectura Paleocristiana y bizantina.
Arquitectura Paleocristiana y bizantina.
 

Pagina web 5

  • 1. Colegio nacional Nicolás Esguerra Jorge enrique Ortiz Galindo Juan pablo ortega villa 901 Pagina web V TABLAS <tablas> En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades. Fila<tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarseentre las etiqetas <table> y </table>. Ejemplo:
  • 2. <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>. Habría que escribir: <table border="1"> <tr> <td>Sabado</td> <td>Domingo</td>
  • 4. Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente: Habría que escribir: <table width="50%"border="2"align="center"cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> ... </table> Formatode las celdas También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.
  • 5. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código: <table width="50%"border="2"align="center"cellspacing="0" bordercolor="#000000"bgcolor="#FFCC99"> <tr align="center"bgcolor="#0099CC"> <td>Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>CursoHTML</td> <td>CursoDreamweaver</td> </tr> <tr> <td>CursoFrontpage</td> <td>CursoFlash</td> </tr> </table> Obtendríamos la siguiente tabla: