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>


</tr> <tr>


</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>


</tr> <tr>


</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>



<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">


<tr><td>Capacidad</td><td>16 GB-32 GB-64 GB</td></tr>




<tr><td>Sistema Operativo</td><td>Android 5.0 Lollipop</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">









<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">


<tr><td>Capacidad</td><td>32 GB</td></tr>



<tr><td>Pantalla</td><td>5.5" Pulgadas-4K UHD</td></tr>




<tr><td>Touch ID</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">



<tr><td>Dimensiones</td><td>142.1 x 72.4 x 7.1-11.6 mm</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>Touch ID</td><td>No</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

[email protected]

</font></pre>

</body>

</html>

tablas

Education