HTML - Tablas y Alineaciones
Publicado: Jue Ago 12, 2010 8:25 pm
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í
Este codigo nos dara una tabla como esta
ahora bien si lo hacemos sin el thead ni tbody osea a lo normal xD
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:
las de [<p>|<div>]
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
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
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>
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>
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]" />Código: Seleccionar todo
<p align="[center|justify|right|left]"></p>Código: Seleccionar todo
<abbr style="text-align: [center|justify|right|left]">TEXTO</abbr>
<span style="text-align: [center|justify|right|left]">TEXTO</span>
