Tablas en HTML

¡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 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>

Celda	Celda
Celda	Celda

¿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.

Celda	Celda	Celda
Celda	Celda

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	Celda	Celda
Celda	Celda

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!