Pokemon World
Club de espadas
Blue Leaf
Los posteadores más activos de la semana

Conectarse

Recuperar mi contraseña


Últimos temas
» Ficha-Pokémon World.
Miér Sep 07, 2016 6:11 pm por -medelliN-

» Saludos a todos c:
Lun Jun 13, 2016 10:31 am por Nami

» La Pluma y la Ficción [Cambio de botón-Elite]
Vie Mayo 20, 2016 12:51 pm por KenshinCroft

» ¿A qué videojuego te has aficionado?
Mar Mayo 17, 2016 9:20 am por Nami

» Renovación del foro - Kyara Land
Mar Mayo 17, 2016 9:17 am por Nami

» League of Legends
Mar Mayo 17, 2016 9:14 am por Nami

» ¿Qué consola tienes?
Mar Mayo 17, 2016 9:11 am por Nami

» ¿Grupo de música favorito?
Mar Mayo 17, 2016 9:09 am por Nami

» ¿Tocan algún instrumento?
Mar Mayo 17, 2016 9:07 am por Nami

Afiliados Elite

Directorios




Tablas en HTML

Ver el tema anterior Ver el tema siguiente Ir abajo

Tablas en HTML

Mensaje por Rahzel Everlasting el Vie Dic 18, 2015 8:21 pm

¡Hola a todos! ¿Cómo están? Espero que muy bien <3 vengo de nuevo a hacer un aporte a esta zona para que puedan agregar cosas a sus tablillas. En esta ocasión, aprenderemos a hacer columnas y filas. Lo que se vería de resultado final de esta manera:
              
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6

Por supuesto, ustedes podrán hacerlo a gusto y piachere luego de terminar de leer y poner en practica todo.

Empezamos con los atributos básicos para la tabla:

es un atributo que nos funcionará al igual que el div style. Simplemente, pueden comenzarlo con un table o agregar atributos dentro. El que yo mostré de ejemplo arriba, no tiene ningún agregado, más, siempre se puede usar como un:

Código:
<table style=atributos que quieran agregar"></table>

Código:
<table> <tr>   <td>Celda 1</td>
   <td>Celda 2</td>
   <td>Celda 3</td>
 </tr>
 <tr>
   <td>Celda 4</td>
   <td>Celda 5</td>
   <td>Celda 6</td>
 </tr>
</table>

Recuerden que siempre deben abrirlo y cerrarlo o la tabla no se creará.

Para hacer las ccolumnas contamos con es la cantidad de filas que tenemos.

Vamos a hacerlo más gráfico para que se entienda. Siempre tendremos un tr porque siempre hay una fila al menos, entonces, para hacer nuestro código, empezamos con

Código:
<table></table>

Ahora, vamos a agregar filas para continuar con la tabla ¿verdad? El código nos iría quedando de la siguiente manera:

que indicara la cantidad de columnas que tendremos mientras que

Si se fijan bien, en el código de arriba agregamos dos filas. Yo haré una tablita sencilla con dos filas y dos columnas, lo que nos quedaría de la siguiente manera, pues, dentro del tr, agregamos el td:

Código:
<table><tr><td>Celda</td><td>Celda</td></tr><tr><td>Celda</td><td>Celda</td></tr></table>
CeldaCelda
CeldaCelda

¿No es tan difícil, no? Si queremos agregar más columnas, sólo es cuestión de agregar más td en medio y ya.

CeldaCeldaCelda
CeldaCelda

Y si, vamos terminando. Si quieren, se puede agregar atributos dentro de la celda. Pueden hacerlo desde el table que explique antes o simplemente, si quieren hacerlo más 'surtido' o más especifico, pueden hacerlo directamente, con el div de celda en celda. Lo que se vería de la siguiente manera:

Celda
CeldaCelda
CeldaCelda
Código:
<table><tr><td><div style="background:#89acfc;">Celda</div></td><td>Celda</td><td>Celda</td></tr><tr><td>Celda</td><td>Celda</td></tr></table>

Y ya que tenemos el div, se trabaja de la misma manera que hemos visto en otros tutoriales —que invito a que repasen— pues, se les puede agregar imágenes, bordes, colores, fonts, etc. Queda a imaginación de cada uno de ustedes.

Creo que eso ha sido todo por ahora. Por supuesto, si tienen alguna duda o se les complica en algo la explicación, no duden en preguntar.

Bye!



Mi pokemon <3:


Club <3:

Regalos <3:



Gracias Alice <3

Gracias Ainek <3

avatar
Rahzel Everlasting
Lider
Lider

Femenino Mensajes : 618
Tickets 85
Tickets : 874
Localización Por aquí, no, un poco más aquí. te estoy diciendo aquí. Sí, justo ahí.

Ver perfil de usuario http://sonandounodetussuenos.blogspot.com.ar/

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.