¡Ebichu dice!
Foros Hermanos
Crear foro
Crear foro
Crear foro
Crear foro
Staff
Soah
Web Master
Sharon V. Stokke
Administradora
Sakura
Administradora
Lukman
Moderador global
Afiliados élite
Boku no Hero ROL
Crear foro
Devil Within +18
Última limpieza: 11/11/2017

Tablas en HTML

Ver el tema anterior Ver el tema siguiente Ir abajo

Tablas en HTML

Mensaje por Soah el Sáb Ene 16, 2016 3:23 am

¡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


es el atributo general para tabla
es para cada una de las filas que queramos agregar.
Y le podemos agregar todos los atributos que queramos. Vamos a ir con algo sencillito:

es para cada una de las celdas
       
Celda 1
Celda 2
Celda 3
Celda 4
Celda 5
Celda 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!


   

Espacio publicitario (?):


Fin del espacio publicitario (?):



   

Gracias Aiko, te quedó preciosa <3

   

Gracias Anie <3


Gracias Nana <3






Unicornios
avatar
Mensajes : 4227
Ingreso : 28/04/2014
Edad : 26
field_19

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.