SlideShare uma empresa Scribd logo
1 de 4
Baixar para ler offline
TABLAS
          Una tabla está compuesta por columnas y filas que conforman un conjunto
   de celdas que permiten mostrar información de manera organizada. En una celda se
   puede incluir indistintamente texto, imágenes o cualquier otro elemento soportado
   por HTML.

          Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos
   principales son:

          WIDTH ="95%" Ancho de la tabla con respecto al tamaño de la página. En
   este caso la tabla ocupará el 95%; o WIDTH ="600", con lo que la tabla tendrá un
   ancho de 600 píxeles.

           BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla.

           CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas

          CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de
   su contenido.

           BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul.




          En la etiqueta <TABLE> se definen las características principales de la tabla,
   pero no se dice de cuántas filas y columnas estará compuesta ni cuál será su
   contenido. En realidad existen tres etiquetas adicionales, que colocadas




23 de 43                          http//:www.masterlinux.org              EFGM© 2000-2007
adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el número
   de filas y columnas, además de otras características:

           <TR> Se utiliza para definir una nueva fila.
           <TD> Permite agregar una celda o columna dentro de una fila
           <TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella
           será escrito en negrilla.

           Lo anterior significa que una tabla en HTML tendrá tantas filas como
   etiquetas <TR> contenga y una fila estará compuesta por un número de celdas
   igual al de etiquetas <TD> o <TH> que la misma tenga.


           Las siguientes líneas ilustran el uso de estas etiquetas para crear una tabla
   sencilla, compuesta por dos filas y dos columnas:

<TABLE BORDER=”1”>
      <TR>
            <TH>Primera Celda</TH>
            <TH>Segunda Celda</TH>
      </TR>
      <TR>
            <TD>Tercera Celda</TD>
            <TD>Cuarta Celda</TD>
      </TR>
</TABLE>


           El resultado obtenido será similar a:

              Primera Celda                                     Segunda Celda
              Tercera Celda                                     Cuarta Celda


           Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten
   controlar: el color del fondo de la celda (BGCOLOR=”color”), la alineación del
   texto o de la imagen dentro de la celda (ALIGN=”alineación”), y que funcionan de
   manera idéntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de
   los atributos importante de estas dos etiquetas, es el que permite indicar el número
   de columnas o de filas que ocupará una celda en particular. Suponga que se debe
   crear una tabla similar a la siguiente:


                                TÍTULO DE LA TABLA
               Celda 1                       Celda 2


          Observe que la tabla está compuesta por dos filas y dos columnas, y que la
   celda del título ocupa dos columnas. Cuando este es el caso, es decir que una celda
   está distribuida en dos o mas columnas o filas, se utiliza para su definición el




24 de 43                           http//:www.masterlinux.org                   EFGM© 2000-2007
atributo COLSPAN=”X” o ROWSPAN=”X” respectivamente. X obviamente
   corresponde al número de columnas o filas sobre las que se distribuirá la celda.

           Para crear la tabla que se muestra arriba, se debe escribir:


<TABLE BORDER=”1”>
      <TR>
            <TH COLSPAN=”2”>TÍTULO DE LA TABLA</TH>
      </TR>
      <TR>
            <TD>Celda 1</TD>
            <TD>Celda 2</TD>
      </TR>
</TABLE>



           Y si lo que se desea es crear una tabla como la siguiente:


                                                      Celda 1
                       TÍTULO DE LA TABLA
                                                      Celda 2


           Se debe escribir:


<TABLE BORDER=”1”>
      <TR>
            <TH ROWSPAN=”2”>TÍTULO DE LA TABLA</TH>
            <TD>Celda 1</TD>
      </TR>
      <TR>
            <TD>Celda 2</TD>
      </TR>
</TABLE>




EJERCICIO PROPUESTO


Cree una página que contenga una tabla con un pequeño inventario de productos,
similar a la que se muestra a continuación.




25 de 43                           http//:www.masterlinux.org             EFGM© 2000-2007
26 de 43   http//:www.masterlinux.org   EFGM© 2000-2007

Mais conteúdo relacionado

Mais procurados (18)

Guia 2 access
Guia 2 accessGuia 2 access
Guia 2 access
 
Codigos html
Codigos htmlCodigos html
Codigos html
 
Colocar un fondo en una pagina web
Colocar un fondo en una pagina webColocar un fondo en una pagina web
Colocar un fondo en una pagina web
 
Web3
Web3Web3
Web3
 
Tablas
TablasTablas
Tablas
 
Sql Sentencias
Sql Sentencias Sql Sentencias
Sql Sentencias
 
Tablas en HTML
Tablas en HTMLTablas en HTML
Tablas en HTML
 
Tablas
TablasTablas
Tablas
 
Tablas En Html
Tablas En HtmlTablas En Html
Tablas En Html
 
Tablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1bTablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1b
 
Ejemplo ddl dml
Ejemplo ddl dmlEjemplo ddl dml
Ejemplo ddl dml
 
Indes.html
Indes.htmlIndes.html
Indes.html
 
Colegio nicolas esguerra
Colegio nicolas esguerraColegio nicolas esguerra
Colegio nicolas esguerra
 
Colegio nicolas esguerraa
Colegio nicolas esguerraaColegio nicolas esguerraa
Colegio nicolas esguerraa
 
Leame
LeameLeame
Leame
 
Ppp jjj 1002
Ppp jjj 1002Ppp jjj 1002
Ppp jjj 1002
 
Curso basico con_html
Curso basico con_htmlCurso basico con_html
Curso basico con_html
 
Tablas en html
Tablas en htmlTablas en html
Tablas en html
 

Destaque (13)

08body
08body08body
08body
 
01introduccion
01introduccion01introduccion
01introduccion
 
13imagenes
13imagenes13imagenes
13imagenes
 
09listas
09listas09listas
09listas
 
Unidad 2 componentes principales parte ii
Unidad 2   componentes principales parte iiUnidad 2   componentes principales parte ii
Unidad 2 componentes principales parte ii
 
09listas
09listas09listas
09listas
 
04texto
04texto04texto
04texto
 
Unidad 2 componentes principales
Unidad 2   componentes principalesUnidad 2   componentes principales
Unidad 2 componentes principales
 
Guia de trabajo no.2
Guia de trabajo no.2Guia de trabajo no.2
Guia de trabajo no.2
 
Practicas de-dreamweaver
Practicas de-dreamweaverPracticas de-dreamweaver
Practicas de-dreamweaver
 
Guia de trabajo no.1
Guia de trabajo no.1Guia de trabajo no.1
Guia de trabajo no.1
 
Manual de practicas de dreamweaver
Manual de practicas de dreamweaverManual de practicas de dreamweaver
Manual de practicas de dreamweaver
 
Dreamweaver - Fichas de Aprendizaje 2014
Dreamweaver - Fichas de Aprendizaje 2014Dreamweaver - Fichas de Aprendizaje 2014
Dreamweaver - Fichas de Aprendizaje 2014
 

Semelhante a 12tablas

Semelhante a 12tablas (20)

Tablas html.pptx
Tablas html.pptxTablas html.pptx
Tablas html.pptx
 
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
 
Portada
PortadaPortada
Portada
 
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
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Pagina web 5.
Pagina web 5.Pagina web 5.
Pagina web 5.
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Tablas
TablasTablas
Tablas
 
Guia 5 de html tablas
Guia 5 de html   tablasGuia 5 de html   tablas
Guia 5 de html tablas
 
Creación de tablas en HTML
Creación de tablas en HTMLCreación de tablas en HTML
Creación de tablas en HTML
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Trabajo 3
Trabajo 3Trabajo 3
Trabajo 3
 
Peres el yisus
Peres el yisusPeres el yisus
Peres el yisus
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Tablas
TablasTablas
Tablas
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 

Último

VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Festibity
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 

Último (14)

VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 

12tablas

  • 1. TABLAS Una tabla está compuesta por columnas y filas que conforman un conjunto de celdas que permiten mostrar información de manera organizada. En una celda se puede incluir indistintamente texto, imágenes o cualquier otro elemento soportado por HTML. Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos principales son: WIDTH ="95%" Ancho de la tabla con respecto al tamaño de la página. En este caso la tabla ocupará el 95%; o WIDTH ="600", con lo que la tabla tendrá un ancho de 600 píxeles. BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla. CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su contenido. BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul. En la etiqueta <TABLE> se definen las características principales de la tabla, pero no se dice de cuántas filas y columnas estará compuesta ni cuál será su contenido. En realidad existen tres etiquetas adicionales, que colocadas 23 de 43 http//:www.masterlinux.org EFGM© 2000-2007
  • 2. adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el número de filas y columnas, además de otras características: <TR> Se utiliza para definir una nueva fila. <TD> Permite agregar una celda o columna dentro de una fila <TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella será escrito en negrilla. Lo anterior significa que una tabla en HTML tendrá tantas filas como etiquetas <TR> contenga y una fila estará compuesta por un número de celdas igual al de etiquetas <TD> o <TH> que la misma tenga. Las siguientes líneas ilustran el uso de estas etiquetas para crear una tabla sencilla, compuesta por dos filas y dos columnas: <TABLE BORDER=”1”> <TR> <TH>Primera Celda</TH> <TH>Segunda Celda</TH> </TR> <TR> <TD>Tercera Celda</TD> <TD>Cuarta Celda</TD> </TR> </TABLE> El resultado obtenido será similar a: Primera Celda Segunda Celda Tercera Celda Cuarta Celda Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el color del fondo de la celda (BGCOLOR=”color”), la alineación del texto o de la imagen dentro de la celda (ALIGN=”alineación”), y que funcionan de manera idéntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de los atributos importante de estas dos etiquetas, es el que permite indicar el número de columnas o de filas que ocupará una celda en particular. Suponga que se debe crear una tabla similar a la siguiente: TÍTULO DE LA TABLA Celda 1 Celda 2 Observe que la tabla está compuesta por dos filas y dos columnas, y que la celda del título ocupa dos columnas. Cuando este es el caso, es decir que una celda está distribuida en dos o mas columnas o filas, se utiliza para su definición el 24 de 43 http//:www.masterlinux.org EFGM© 2000-2007
  • 3. atributo COLSPAN=”X” o ROWSPAN=”X” respectivamente. X obviamente corresponde al número de columnas o filas sobre las que se distribuirá la celda. Para crear la tabla que se muestra arriba, se debe escribir: <TABLE BORDER=”1”> <TR> <TH COLSPAN=”2”>TÍTULO DE LA TABLA</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> </TR> </TABLE> Y si lo que se desea es crear una tabla como la siguiente: Celda 1 TÍTULO DE LA TABLA Celda 2 Se debe escribir: <TABLE BORDER=”1”> <TR> <TH ROWSPAN=”2”>TÍTULO DE LA TABLA</TH> <TD>Celda 1</TD> </TR> <TR> <TD>Celda 2</TD> </TR> </TABLE> EJERCICIO PROPUESTO Cree una página que contenga una tabla con un pequeño inventario de productos, similar a la que se muestra a continuación. 25 de 43 http//:www.masterlinux.org EFGM© 2000-2007
  • 4. 26 de 43 http//:www.masterlinux.org EFGM© 2000-2007