12 de febrero de 2018

Tablas

Para crear una tabla sencilla tenemos que usar como mínimo tres etiquetas:
  • <table></table> para crear la tabla.
  • <tr></tr> para crear una fila. Va anidada dentro de <table>. Una tabla puede tener muchas filas
  • <td></td> para crear una celda, una casilla dentro de una fila. Una fila puede tener muchas celdas.

Si queremos, podemos usar <th> en vez de <td> para las celdas que pertenezcan a la cabecera.

ejemplo del código de una tabla de 3 filas con 4 celdas cada una

<table>
  <tr>
     <td>Primavera</td>
     <td>Verano</td>
     <td>Otoño</td>
     <td>Invierno</td>
  </tr>
  <tr>
     <td>Spring</td>
     <td>Summer</td>
     <td>Autumn</td>
     <td>Winter</td>
  </tr>
  <tr>
     <td>Frühling</td>
     <td>Sommer</td>
     <td>Herbst</td>
     <td>Winter</td>
  </tr>
<table>
Aquí podemos ver el resultado:
Primavera Verano Otoño Invierno
Spring Summer Autumn Winter
Frühling Sommer Herbst Winter


Podemos observar que no "dibuja" la tabla, para mejorar su aspecto debemos usar CSS.
Aquí tenemos la misma tabla con un poco de CSS para mejorar su aspecto:

Primavera Verano Otoño Invierno
Spring Summer Autumn Winter
Frühling Sommer Herbst Winter

Aquí vemos el CSS que tenemos que añadir a cada celda de la tabla:
<table>
  <tr>
     <td style="border: 1px solid green; width: 120px;">Primavera</td>




No hay comentarios:

Publicar un comentario