Las 3 etiquetas que hay que tener en cuenta principalmente al crear tablas en HTML son las siguientes:
<tr> y </tr> ; <td> y </td> ; <th> y </th>
Empezaremos explicando la finalidad de cada una de ellas:
El par de etiquetas definidas por "<tr> y </tr>", A manera practica y fácil podríamos decir que son las encargadas de crear las filas en las tablas.En cambio tanto las etiquetas <td> y </td> , son las que originan las columnas al igual que las etiquetas <th> y </th>, con la única diferencia que estas ultimas hacen que el objeto que se encuentren dentro de esa celda se vea en forma de encabezado con un formato de texto en negrita.
Para mayor entendimiento mostraremos un par de ejmplos:
Ejemplo 1:
Código HTML:
Resultado:
| Objeto1.1 | Objeto1.2 | Objeto1.3 |
|---|---|---|
| Objeto2.1 | Objeto2.2 | Objeto2.3 |
| Objeto3.1 | Objeto3.2 | Objeto3.3 |
Al colocar las etiquetas <tr> y </tr> creamos 1 fila y como en este ejemplo, las usamos 3 veces, es la razón de que tengamos 3 filas en nuestra tabla, ahora si nos centremos en las celdas vemos una diferencias notoria, es el formato en negrita que aparece en 3 elementos. Eso se debe al uso de las etiquetas <th> y </th>, en cambio los elementos contenidos entre las etiquetas <td> y </td> se muestran de manera normal.
En otras palabras si miramos claramente el código veremos que el primer elemento de cada fila esta entre las etiquetas <th> y </th> esto origina su cambio de formato.
Ahora veremos otro ejemplo esta ves colocando las etiquetas <th> y </th>, al incio de cada columna.
Ejemplo 2:
Código HTML:
Resultado:
| Objeto1.1 | Objeto1.2 | Objeto1.3 |
|---|---|---|
| Objeto2.1 | Objeto2.2 | Objeto2.3 |
| Objeto3.1 | Objeto3.2 | Objeto3.3 |
OJO: es muy útil dominar esta tres etiquetas para crear las tablas, ya que esto nos permitirá, tener un mejor manejo y así podremos ejecutar cosas mas complejas al momento de usar tablas en HTML.
0 comentarios: