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>

COLUMNAO 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="#00000
0"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="#00000
0"bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
</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>
<td>Curso HTML</td>
</tr>
<tr>
</tr>
</table>
Obtendríamos la siguiente tabla:
TITULO DE LATABLA <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>
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<th>PEQUEÑO</th>
<th>GRANDE</th>
</tr>
<td>Duración crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
<td>Tiempo de gestación</td>
<td colspan="2">58 a 63 días</td>
<td>9 meses</td>
</tr>
<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
santimina21@gmail.com
</font></pre>
</body>
</html>

Tablas

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Tablas

Más de santimina21

Último

Tablas