SlideShare uma empresa Scribd logo
1 de 7
CLASE 5
TABLAS
Tabla<table>
Las tablasestán formadas por celdas, que son los recuadros
que se obtienen como resultado de la intersección entre
una fila y una columna.
imagen y texto
COLUM
NA
Texto dentro
de una celda
FILA CELDA
Fila <tr>
Es necesario insertar las etiquetas<tr> y </tr> por cada una
de las filasde la tabla. Estas etiquetasdeberán insertarse
entre las etiqetas <table> y </table>.
Columnao 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 equivalea especificar el número de
columnaspor fila.
Es necesario insertar las etiquetas<td> y </td> por cada una
de las celdasque compongan cada una de las filas de la
tabla. Por lo tanto, habrá que insertar esas etiquetasentre
las etiquetas<tr> y </tr>.
Formato de la tabla
Es posiblemodificarlos siguientes atributosde 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
Formato de las celdas
Es posiblemodificarlos siguientes atributosde una celda:
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
align
alineación horizontal del
contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign
alineación vertical del contenido
de la celda
baseline (línea de base)
bottom (inferior)
middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
<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>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
CODIGO
<html>
<head>
<title>sportingoods903</title>
</head>
<imgsrc="imagenes/LOGOEMPRESA.jpg"alt="EMPRESA LOGOborder="5"
width="500" height="250">
<!--paginaweblaelaboromarlontellezymarco suarezdel grado903//-->.
<bodybgcolor="#2EFEF7">
<hr>
<MARQUEE><H2>MI PRIMERA PAGINA WEB</MARQUEE></H2> <br>
<hr>
<blockquote>
nuetracompañiaofrece:<br>
productosde alta calidadcon todolorelacionadoenel deporte
</blockquote>
<fontcolor="#BLACK"size="4"face="ComicSansMS"><B>PELOTA</B></font>
<fontcolor="#BLACK"size="4"face=" Arial"><I><B>DE TENNIS</I></B></font>
<H3><P ALIGN="CENTER"> Pelotade tenis.Utilizadaparalarealizacióndel deporte tenis;las
mismasdebentenerun
diámetrode 6.35 centímetrosymenorde 6.67, de coloramarillo,siendoesteel únicocolorque
puede utilizarse
acompañadocon blancopara mejorarla visualizaciónde losjugadoresytambiénde los
espectadoresportelevisión.
</P><H3>
<imgsrc="imagenes/logotenis.jpg"alt="TENISLOGOborder="15"width="300" height="250">
<img src="imagenes/pelotade teniss.jpg"alt="TENISPELOTA border="5"width="300"
height="250">
<HR>GUAYOS NIKE<HR/>
<H3><P ALIGN="CENTER"> CR Mercurial VaporSuperflyII.Descripción:ofrecenel innovador
sistemade tracción
adaptativaNike Sense,enel que losdiseñadorescrearonun tacointeligente que puede
extenderse yretraerse hasta
3mm, segúnlascondicionesdel pisoylapresiónejercidaporel jugador.
</P><H3>
<img src="imagenes/LOGONIKE.jpg"alt="NIKELOGOborder="5"width="300" height="250">
<img src="imagenes/GUAYOSNIKE.jpg"alt="NIKEguayosborder="5"width="300"
height="250">
<table width="50%"border="2"align="center"cellspacing="0"bordercolor="#BLACK"
bgcolor="#GREEN">
<tr align="center"bgcolor="#BLACK">
<td>PRODUCTO</td>
<td bgcolor="#BLUE">PRECIO</td>
</tr>
<tr>
<td>PELOTA DE TENNIS</td>
<td>20.000</td>
</tr>
<tr>
<td>GUAYOS NIKE</td>
<td>260.000</td>
</tr>
</table>
<fontcolor="#993366" size="4"face="ComicSansMS,">addidas,nike colombia </font>
<hr align="center"width="50%"size="5"noshade>
<pre> copyright2015@
sportinggoods
calle 42 N° 78 - 43 bogotacolombia
sporting.goods@gmail.com
</pre>
</body>
</html

Mais conteúdo relacionado

Mais procurados (18)

Pagina web v
Pagina web vPagina web v
Pagina web v
 
ARCHIVO ADJUNTO
ARCHIVO ADJUNTOARCHIVO ADJUNTO
ARCHIVO ADJUNTO
 
Tablas
TablasTablas
Tablas
 
Trabajo hoy :3
Trabajo hoy :3Trabajo hoy :3
Trabajo hoy :3
 
Exel
ExelExel
Exel
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Tablas dinamicas-pdf
Tablas dinamicas-pdfTablas dinamicas-pdf
Tablas dinamicas-pdf
 
Diseño de formatos
Diseño de formatosDiseño de formatos
Diseño de formatos
 
TRABAJO 2
TRABAJO 2TRABAJO 2
TRABAJO 2
 
Web3
Web3Web3
Web3
 
S.p.m6
S.p.m6S.p.m6
S.p.m6
 
FORMATO DE CELDA EN EXCEL
FORMATO DE CELDA EN EXCELFORMATO DE CELDA EN EXCEL
FORMATO DE CELDA EN EXCEL
 
Excel
ExcelExcel
Excel
 
Tablas html
Tablas htmlTablas html
Tablas html
 
comidas
comidas comidas
comidas
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Peres el yisus
Peres el yisusPeres el yisus
Peres el yisus
 
Opciones de autorelleno
Opciones de autorellenoOpciones de autorelleno
Opciones de autorelleno
 

Semelhante a Clase 5 (20)

Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
tablas
tablastablas
tablas
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Html 5
Html 5Html 5
Html 5
 
TABLAS HTML
TABLAS HTMLTABLAS HTML
TABLAS HTML
 
Web 5
Web 5Web 5
Web 5
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 
Trabajo tablas
Trabajo tablasTrabajo tablas
Trabajo tablas
 
Wilson8
Wilson8Wilson8
Wilson8
 
Tu papa
Tu papaTu papa
Tu papa
 
Pagina v
Pagina vPagina v
Pagina v
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Tablas
Tablas Tablas
Tablas
 
Tablas html
Tablas htmlTablas html
Tablas html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Pendejobnolll
PendejobnolllPendejobnolll
Pendejobnolll
 

Mais de marlontellez14

Mais de marlontellez14 (20)

Clase 6 pagina web 2
Clase 6 pagina web 2Clase 6 pagina web 2
Clase 6 pagina web 2
 
Clase 5
Clase 5Clase 5
Clase 5
 
Pagina web 3
Pagina web 3Pagina web 3
Pagina web 3
 
Pagina web clase 2
Pagina web clase 2Pagina web clase 2
Pagina web clase 2
 
Clase 1 muestras
Clase 1 muestrasClase 1 muestras
Clase 1 muestras
 
trabajo base de datos 3 periodo definitivo
trabajo base de datos 3 periodo definitivo trabajo base de datos 3 periodo definitivo
trabajo base de datos 3 periodo definitivo
 
Muestras base de datos
Muestras base de datosMuestras base de datos
Muestras base de datos
 
trabajo informatica base de datos
trabajo informatica base de datos trabajo informatica base de datos
trabajo informatica base de datos
 
Trabajo informatica 2015 (1)
Trabajo informatica 2015 (1)Trabajo informatica 2015 (1)
Trabajo informatica 2015 (1)
 
Consultas en access
Consultas en accessConsultas en access
Consultas en access
 
Trabajo informatica 2015 (1)
Trabajo informatica 2015 (1)Trabajo informatica 2015 (1)
Trabajo informatica 2015 (1)
 
Base de datos marlon 3
Base de datos marlon 3Base de datos marlon 3
Base de datos marlon 3
 
Sporting goods
Sporting goodsSporting goods
Sporting goods
 
Base de datos marlon (1)
Base de datos marlon (1)Base de datos marlon (1)
Base de datos marlon (1)
 
Sporting goods
Sporting goodsSporting goods
Sporting goods
 
Base de datos marlon (1)
Base de datos marlon (1)Base de datos marlon (1)
Base de datos marlon (1)
 
Sporting goods
Sporting goodsSporting goods
Sporting goods
 
Sporting goods
Sporting goodsSporting goods
Sporting goods
 
Actividad 3 ntx
Actividad 3 ntxActividad 3 ntx
Actividad 3 ntx
 
Actividad 2 sensores y aplicacion
Actividad 2 sensores y aplicacionActividad 2 sensores y aplicacion
Actividad 2 sensores y aplicacion
 

Último

FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
lupitavic
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
JonathanCovena1
 

Último (20)

PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonables
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
 
plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdf
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
Imperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperioImperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperio
 

Clase 5

  • 1. CLASE 5 TABLAS Tabla<table> Las tablasestán formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. imagen y texto COLUM NA Texto dentro de una celda FILA CELDA
  • 2. Fila <tr> Es necesario insertar las etiquetas<tr> y </tr> por cada una de las filasde la tabla. Estas etiquetasdeberán insertarse entre las etiqetas <table> y </table>. Columnao 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 equivalea especificar el número de columnaspor fila. Es necesario insertar las etiquetas<td> y </td> por cada una de las celdasque compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetasentre las etiquetas<tr> y </tr>. Formato de la tabla Es posiblemodificarlos siguientes atributosde una tabla: Atributo Significado Posibles valores
  • 3. 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 Formato de las celdas Es posiblemodificarlos siguientes atributosde una celda: 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 align alineación horizontal del contenido de la celda left (izquierda) right (derecha) center (centro) valign alineación vertical del contenido de la celda baseline (línea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal
  • 4. <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>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> CODIGO <html> <head> <title>sportingoods903</title> </head> <imgsrc="imagenes/LOGOEMPRESA.jpg"alt="EMPRESA LOGOborder="5" width="500" height="250"> <!--paginaweblaelaboromarlontellezymarco suarezdel grado903//-->. <bodybgcolor="#2EFEF7"> <hr>
  • 5. <MARQUEE><H2>MI PRIMERA PAGINA WEB</MARQUEE></H2> <br> <hr> <blockquote> nuetracompañiaofrece:<br> productosde alta calidadcon todolorelacionadoenel deporte </blockquote> <fontcolor="#BLACK"size="4"face="ComicSansMS"><B>PELOTA</B></font> <fontcolor="#BLACK"size="4"face=" Arial"><I><B>DE TENNIS</I></B></font> <H3><P ALIGN="CENTER"> Pelotade tenis.Utilizadaparalarealizacióndel deporte tenis;las mismasdebentenerun diámetrode 6.35 centímetrosymenorde 6.67, de coloramarillo,siendoesteel únicocolorque puede utilizarse acompañadocon blancopara mejorarla visualizaciónde losjugadoresytambiénde los espectadoresportelevisión. </P><H3> <imgsrc="imagenes/logotenis.jpg"alt="TENISLOGOborder="15"width="300" height="250"> <img src="imagenes/pelotade teniss.jpg"alt="TENISPELOTA border="5"width="300" height="250"> <HR>GUAYOS NIKE<HR/> <H3><P ALIGN="CENTER"> CR Mercurial VaporSuperflyII.Descripción:ofrecenel innovador sistemade tracción adaptativaNike Sense,enel que losdiseñadorescrearonun tacointeligente que puede extenderse yretraerse hasta 3mm, segúnlascondicionesdel pisoylapresiónejercidaporel jugador.
  • 6. </P><H3> <img src="imagenes/LOGONIKE.jpg"alt="NIKELOGOborder="5"width="300" height="250"> <img src="imagenes/GUAYOSNIKE.jpg"alt="NIKEguayosborder="5"width="300" height="250"> <table width="50%"border="2"align="center"cellspacing="0"bordercolor="#BLACK" bgcolor="#GREEN"> <tr align="center"bgcolor="#BLACK"> <td>PRODUCTO</td> <td bgcolor="#BLUE">PRECIO</td> </tr> <tr> <td>PELOTA DE TENNIS</td> <td>20.000</td> </tr> <tr> <td>GUAYOS NIKE</td> <td>260.000</td> </tr> </table> <fontcolor="#993366" size="4"face="ComicSansMS,">addidas,nike colombia </font> <hr align="center"width="50%"size="5"noshade> <pre> copyright2015@ sportinggoods
  • 7. calle 42 N° 78 - 43 bogotacolombia sporting.goods@gmail.com </pre> </body> </html