HTML - Tablas y Alineaciones

[jose.panita]

Ahora les enzeño a estructurar sus documentos/post's a punta de html

lo primero y mas fasitdioso

¡Tablas!

primero que nada una tabla se conforma de lo siguiente



explico el diagrama

toda tabla empieza y termina con <table> y </table> respectivamente

dentro de eso, debemos establecer, un <thead> para el encabezado y un <tbody> para el cuerpo, si bien son opcionales (uno puede hacerlo directv con la otra forma que dire mas abajo), ayuda mucho a estilizarlo con css.

Dentro de ambas tags va un <tr> que indica un "row" o una fila y dentro de <tr> van las celdas que son <td>

poniendo todo en un arbol textual queda así

Código: Seleccionar todo

<table>
|-- <thead>
|-- -- <tr>
|-- -- -- <td>Contenido del Encabezado(header) de la tabla - Celda 1</td>
|-- -- -- <td>Contenido del Encabezado(header) de la tabla - Celda 2</td>
|-- -- </tr>
|-- </thead>
|-- <tbody>
|-- -- <tr>
|-- -- -- <td>Contenido del Cuerpo de la tabla - Celda 1</td>
|-- -- -- <td>Contenido del Cuerpo de la tabla - Celda 2</td>
|-- -- </tr>
|-- </tbody>
</table>

Este codigo nos dara una tabla como esta



ahora bien si lo hacemos sin el thead ni tbody osea a lo normal xD

Código: Seleccionar todo

<table>
|--  <tr>
|--  -- <td>Contenido de la tabla - Celda 1 Fila 1</td>
|--  -- <td>Contenido de la tabla - Celda 2 Fila 1</td>
|--  </tr>
|--  <tr>
|--  -- <td>Contenido de la tabla - Celda 1 Fila 2</td>
|--  -- <td>Contenido de la tabla - Celda 2 Fila 2</td>
|--  </tr>
</table>

obtenemos lo mismo! xD


pero por cosas mias siempre pongo lo dificil 1ero y luego lo facil xD

ahora las alineaciones!

algunas de las tags tienen la propiedad "align" que nos sirve para alinear el contenido, como <img>, <p> y <div>.

las alineaciones de <img> son:

Código: Seleccionar todo

<img src="[link]" align="[absbottom|absmiddle|baseline|bottom|left|middle|right|texttop|top]" />

las de [<p>|<div>]

Código: Seleccionar todo

<p align="[center|justify|right|left]"></p>

ahora para declarar propiedades a cualquier otro elemento que contenga texto (incluyendo los antes mensionados) se usa la propiedad "style" en la cual le asignamos propiedades CSS a dicho elemento, ej

Código: Seleccionar todo

<abbr style="text-align: [center|justify|right|left]">TEXTO</abbr>
<span style="text-align: [center|justify|right|left]">TEXTO</span>

y esto es to..y esto es to..y esto es to..y esto es todo amigos cualquiera duda (y se que la habra xD) comentenla

[Doctorkiller]

Gracias, ahora me pongo a practicar

[jose.panita]

ufff, pa eso nesesitaras muuucho, en caso de que tu blog sea en Wordpress, nesesitaras saber sobre Capas y CSS xD

[Evolt]

Yo prefiero los divs.. pero bueno, para gustos los colores