Crear y Propiedades de Tablas
Crear y Propiedades de Tablas.Las tablas la podemos crear mediante el editor, atraves de esta opción
Tendremos que entrar para empezar a crear las tablas.
No salen las propiedades de la tablas de como la podemos crear.
Tendremos que elegir las Filas de cuanta queremos, luego sigen las Columnas, podemos agregar Encabezados, El borde es importante para hacer las tablas, ya que son las lineas que lo separarias de los textos. Tambien nos brinda la opción dealineación(centrado,isquierdo,derecho). La altura y anchura le tendremos que agregar numeros de Pixeles (px) osino con Porcentaje (%) donde se hacen mas grandes las tablas, si le agregamos 100, ocuparia la pantalla de la web. Algo importante que tenemos que tener encuenta son los Espacios de las celdas y delinterior, lo que haria una tabla muy opaca con su estructura. Si la tabla es una noticia, le podemos agregar un titulo y sintesis.
El ejemplo determinado seria este resultado.
| Contenido 1 | Contenido 2 |
| Contenido 01 | Contenido 02 |
| Contenido 001 | Contenido 002 |
<table width="200" cellspacing="1" cellpadding="1" border="1">
<tbody>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
</tr>
<tr>
<td>Contenido 01</td>
<td>Contenido 02</td>
</tr>
<tr>
<td>Contenido 001</td>
<td>Contenido 002</td>
</tr>
</tbody>
</table>
Ahora con este ejemplo por defecto de la tabla, con este código simple, podemos hacer muchas cosas, vamos a modificar y agregar nuevos códigos en la primera parte, seria este código.
<table width="200" cellspacing="1" cellpadding="1" border="1">
Apartir de este código lo podemos agregar mas, le podemos agregar una altura modificable, le agregaremos height="NUMERO DE PX"
<table width="200" height="200" cellspacing="1" cellpadding="1" border="1">
Ya contruimos un nuevo código modificable donde podemos modificar la altura y Anchura, donde tambien lo podemos hacer desde las Propiedades de Tabla.
Los numeros de Altura (height) y Anchura (width) + Numero en Pixeles (px)
Ahora como seria para poner en porcentaje (%), tendriamos que agregar despues del numero el simbolo % para que se pase en porcentaje,
<table width="100%" height="200" cellspacing="1" cellpadding="1" border="1">
Atención: Podria haber un problema con el deforme de la página si agregan un numero alto, es mejor que bajen el numero por un 100 o inferior.
Seguimos con cellspacing y cellpadding, viene siendo el relleno de la celda, el numero es "1" si le agregamos un numero mas elevado cambiaria la estructura de la celda por ejemplo de esta manera.
<table width="100" height="200" cellspacing="1" cellpadding="1" border="1">
| Contenido 1 | Contenido 2 |
| Contenido 01 | Contenido 02 |
| Contenido 001 | Contenido 002 |
Estas dos opciónes que se atraen entre si, hace que se rellene la celda del interio y del exterior.
Ahora pasemos al borde de lo que hace la tabla, es una opción fundamental de lo que puede llegar a hacer una tabla con o sin bordes, una tabla sin borde seria sin las lineas que la rodean a los textos o imagenes a los que le agregamos a esas tablas, el código es border="1" si remplazamos el 1 por el 0, desaparecerian las lineas.
| Contenido 1 | Contenido 2 |
| Contenido 01 | Contenido 02 |
| Contenido 001 | Contenido 002 |
Sin lineas seria no un cuadro, estos cambios de sin bordes, se usan mucho para una imagen donde se pueda escribir alado.
Ahora para cambiar el borde="0" a un numero mas elevado, por ejemplo a 10, seria un cuadro con un rellenado en sus bordes.
| Contenido 1 | Contenido 2 |
| Contenido 01 | Contenido 02 |
| Contenido 001 | Contenido 002 |
Ahora podemos Alinear las tablas agregando el código seguido del border antes de llegar a la >
<table width="200" height="200" cellspacing="1" cellpadding="1" border="1"align="center">
Le vamos a dar un centrado a la tabla, el resultado será exitoso.
| Contenido 1 | Contenido 2 |
| Contenido 01 | Contenido 02 |
| Contenido 001 | Contenido 002 |
Para no quedar centrado, podemos cambiarle la posiciones hacia la derecha agregandoright o hacia la izquierda agregando left.
Para terminar con el código, nos hace falta terminar de agregar la sintesis que se agrega, summary="Sintesis" antes de >
<table width="200" height="200" cellspacing="1" cellpadding="1" border="1" align="center" summary="sintesis">
Asi termina el código, pero falta armar el código con su respectivo titulo asi se completa la sintesis de una noticia de lo que quieras agregar en la tablas.
El titulo se comenzara al principio de la tabla, y para agregarlo necesitaremos usar las funciones <caption></caption>
<table width="200" height="200" cellspacing="1" cellpadding="1" border="1" align="center" summery="sintesis">
<caption>Titulo</caption>
Seguiremos con las partes ultima de hacer las tablas, donde viene el contenido dentro de la mismas. Los contenidos dentro de las tablas se acomodan entre filas y columnas.
<tbody>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 01</td>
<td>Contenido 02</td>
<td>Contenido 03</td>
</tr>
<tr>
<td>Contenido 001</td>
<td>Contenido 002</td>
<td>Contenido 003</td>
</tr>
</tbody>
Dentro de cada contenido, podemos agregar un código HTML o script entre otros mas, entre las etiquetas <td> </td>, estos contenidos no se acomodan ordenadamente segun el código, estas tablas se ordenan y cumple la misma función, donde tendran que visualizar los numero que es importante con el seguimiento de la filas y columnas, podemos agregar mas, siguiendo el orden (1,2,3,01,02,03,001,002,003....)
y para terminar, cerramos la tabla con..
</table>