Download - Tablas
COLEGIO NACIONAL NICOLAS ESGUERRA.EDIFICAMOS FUTURO.
TABLAS.
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades.
TABLA <table>.
Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección de 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 formaran 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>.
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 la
etiquetas entre las etiquetas <tr> y </tr>.
Habría que escribir:
<table border="1"> <tr>
<td>Sabado</td> <td>Domingo</td>
</tr> <tr>
<td>Curso HTML</td> <td>Curso Dreamweaver</td>
</tr> <tr>
<td>Curso Frontpage</td> <td>Curso Flash</td>
</tr></table>.
FORMATO DE LA TABLA.
Es posible modificar los siguientes atributos de una 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>
FORMATO DE LAS CELDAS.
Es posible modificar los siguientes atributos de una celda:
También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.
<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>
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 cada una de las etiquetas <th> y </th>.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="1" align="center"> <tr>
<th>Sabado</td> <th>Domingo</td>
</tr> <tr>
<td>Curso HTML</td> <td>Curso Dreamweaver</td>
</tr> <tr>
<td>Curso Frontpage</td> <td>Curso Flash</td>
</tr></table>
Obtendríamos la siguiente tabla:
TITULO DE LA TABLA <caption>.
No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="1" align="center"> <caption align="right" valign="top">Titulo de la tabla<tr>
<tr> <th>Sabado</td>
... </tr>
</table>
Obtendríamos la siguiente tabla con título:
COMBINAR LAS CELDAS.
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.
A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por
las que se extenderá la celda.
Habría que escribir el siguiente código:
<table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">DIFERENCIAS</th> <th colspan="2">PERRO</th> <th rowspan="2">HOMBRE</th> </tr> <tr align="center" valign="middle"> <th>PEQUEÑO</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td> </tr></table>
CODIGO.
<html>
<head>
<title>mobile store.</title>
</head>
<!-- PAGINA WEB la elaboró Santiago Caicedo 903 //-->
<body bgcolor="white">
<hr>
<marquee bgcolor="orange" behavior="slide" direction="left"><b><font color="black" face="segoe print"><h1 aling="center">MOBILE STORE.</h1></font></b></marquee>
<font color="black" size="3" face="segoe print">telefonos para todos los gustos.</font>
<br><br><br><br>
<font color="orange" size="6" face="segoe print">APPLE.
<br>
<img src="imagenes/apple.gif" width="200" height="250">
<br>
<font color="black" size="4" face="arial">De la reconocida marca Norteamericana de "la manzanita", Apple, les presentamos el Iphone 6.
<br><br><br>
<img src="imagenes/apple.jpg" width="280" height="280">
<img src="imagenes/iphone.jpg" width="300" height="280">
<table width="60%" border="3" bordercolor="orange" aling="center" cellpadding="5">
<tr><td>Capacidad</td><td>16 GB-64 GB</td></tr>
<tr><td>Dimensiones</td><td>138.1 x 67.0 x 6.9 mm</td></tr>
<tr><td>Peso</td><td>129 Gramos</td></tr>
<tr><td>Pantalla</td><td>4.7" Pulgadas</td></tr>
<tr><td>Sistema Operativo</td><td>IOS 9</td></tr>
<tr><td>Camara Principal</td><td>8 Megapixeles</td></tr>
<tr><td>Camara Frontal</td><td>1.2 megapixeles</td></tr>
<tr><td>Touch ID</td><td>si</td></tr>
<tr><td>Resistente al Agua</td><td>no</td></tr>
<tr><td>Colores</td><td>Gris espacial-Plata-Dorado</td></tr>
</table>
<br><br><br><br>
<font color="orange" size="6" face="segoe print">HUAWEI.
<br>
<img src="imagenes/huawei.gif" width="400" height="210">
<br>
<font color="black" size="4" face="arial">De la multinacional China, Huawei, les ofrecemos su mas reciente telefono movil; el Huawei P8.
<br><br><br>
<img src="imagenes/huawei.jpg" width="280" height="280">
<img src="imagenes/p8.jpg" width="400" height="280">
<table width="60%" border="3" bordercolor="orange" aling="center" cellpadding="5">
<tr><td>Capacidad</td><td>16 GB-32 GB-64 GB</td></tr>
<tr><td>Dimensiones</td><td>144.9 x 72.1 x 6.4 mm</td></tr>
<tr><td>Peso</td><td>144 Gramos</td></tr>
<tr><td>Pantalla</td><td>5.2" Pulgadas</td></tr>
<tr><td>Sistema Operativo</td><td>Android 5.0 Lollipop</td></tr>
<tr><td>Camara Principal</td><td>13 Megapixeles</td></tr>
<tr><td>Camara Frontal</td><td>8 megapixeles</td></tr>
<tr><td>Touch ID</td><td>No</td></tr>
<tr><td>Resistente al Agua</td><td>No</td></tr>
<tr><td>Colores</td><td>Gris titanio-Champaña-Dorado-Negro</td></tr>
</table>
<br><br><br><br>
<font color="orange" size="6" face="segoe print">SAMSUNG.
<br>
<img src="imagenes/samsung.gif" width="200" height="250">
<br>
<font color="black" size="4" face="arial">De la super industria Coreana, Samsung, les ofrecemos su ultimo avance en tecnologia, es el Galaxi S6 EDGE.
<br><br><br>
<img src="imagenes/samsung.jpg" width="280" height="280">
<img src="imagenes/s6.jpg" width="300" height="280">
<table width="60%" border="3" bordercolor="orange" aling="center" cellpadding="5">
<tr><td>Capacidad</td><td>32 GB-64 GB</td></tr>
<tr><td>Dimensiones</td><td>142.1 x 70.1 x 7.0 mm</td></tr>
<tr><td>Peso</td><td>132 Gramos</td></tr>
<tr><td>Pantalla</td><td>5.1" Pulgadas</td></tr>
<tr><td>Sistema Operativo</td><td>Android 5.0 Lollipop</td></tr>
<tr><td>Camara Principal</td><td>16 Megapixeles</td></tr>
<tr><td>Camara Frontal</td><td>5 megapixeles</td></tr>
<tr><td>Touch ID</td><td>Si</td></tr>
<tr><td>Resistente al Agua</td><td>Si</td></tr>
<tr><td>Colores</td><td>Dorado-Negro-Blanco-Azul topacio-Verde esmeralda</td></tr>
</table>
<br><br><br><br>
<font color="orange" size="6" face="segoe print">SONY.
<br>
<img src="imagenes/xperia.jpg" width="200" height="250">
<br>
<font color="black" size="4" face="arial">De la multinacional Japonesa, Sony Corporation, traemos a ustedes el Xperia Z5.
<br><br><br>
<img src="imagenes/sony.jpg" width=280" height="280">
<img src="imagenes/z5.png" width="440" height="280">
<table width="60%" border="3" bordercolor="orange" aling="center" cellpadding="5">
<tr><td>Capacidad</td><td>32 GB</td></tr>
<tr><td>Dimensiones</td><td>154.4 x 76.0 x 7.8 mm</td></tr>
<tr><td>Peso</td><td>181 Gramos</td></tr>
<tr><td>Pantalla</td><td>5.5" Pulgadas-4K UHD</td></tr>
<tr><td>Sistema Operativo</td><td>Android 5.1 Lollipop</td></tr>
<tr><td>Camara Principal</td><td>23 Megapixeles</td></tr>
<tr><td>Camara Frontal</td><td>5 megapixeles</td></tr>
<tr><td>Touch ID</td><td>Si</td></tr>
<tr><td>Resistente al Agua</td><td>Si</td></tr>
<tr><td>Colores</td><td>Cromo-Negro-Oro</td></tr>
</table>
<br><br><br><br>
<font color="orange" size="6" face="segoe print">MOTOROLA.
<br>
<img src="imagenes/motorola.gif" width="200" height="350">
<br>
<font color="black" size="4" face="arial">De la empresa norteamericana, Motorola INC. les ofrecemos su mas reciente movil, el motorola moto G 3ra generaciòn.
<br><br><br>
<img src="imagenes/motorola.jpg" width=200" height="180">
<img src="imagenes/motog.jpg" width="320" height="320">
<table width="60%" border="3" bordercolor="orange" aling="center" cellpadding="5">
<tr><td>Capacidad</td><td>8 GB-16 GB</td></tr>
<tr><td>Dimensiones</td><td>142.1 x 72.4 x 7.1-11.6 mm</td></tr>
<tr><td>Peso</td><td>155 Gramos</td></tr>
<tr><td>Pantalla</td><td>5" Pulgadas</td></tr>
<tr><td>Sistema Operativo</td><td>Android 5.1.1 Lollipop</td></tr>
<tr><td>Camara Principal</td><td>13 Megapixeles</td></tr>
<tr><td>Camara Frontal</td><td>5 megapixeles</td></tr>
<tr><td>Touch ID</td><td>No</td></tr>
<tr><td>Resistente al Agua</td><td>Si</td></tr>
<tr><td>Colores</td><td>Blanco-Negro-carcasas intercambiabes y combinables</td></tr>
</table>
<br><br><br><br>
<hr aling="center" width="75%" size="3" color="black" noshade>
<pre><font color="black" size="2" face="arial">
Copyright 2015
Colegio Nacional Nicolas Esguerra
Tranversal 6B NO. 89 - 36 Bogotá Colombia
</font></pre>
</body>
</html>