<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

TABLAS > Simples

 

Con HTML se pueden crear tablas desde las primeras versiones de este lenguaje. Si observamos detenidamente una tabla podemos distinguir estos elementos:

*

El elemento HTML que crea las tablas es <table> (que es un elemento de bloque) incluido en éste colocamos todas las filas utilizando la etiqueta <tr> y, a su vez, dentro de cada fila colocamos tantas etiquetas <td> como columnas necesitemos.

Es decir, con este código HTML:

<table>
  <tr>
    <td>celda 11</td>
    <td>celda 12</td>
    <td>celda 13</td>
  </tr>
  <tr>
    <td>celda 21</td>
    <td>celda 22</td>
    <td>celda 23</td>
  </tr>
</table>

Creamos esta tabla simple, de 2 filas y 3 columnas:

*

Si a esto añadimos algo de CSS:

table {
margin: 50px auto; /* separar sup-inf y centrar tabla */
background: #f1f1f1; /* fondo */
padding: 10px; /* relleno */
border: 1px solid #0000ff; /* borde de tabla */
border-spacing: 4px; /* espacio entre celdas */
text-align: center; /* centrar texto */
}
td {
width: 100px; /* ancho de celda */
background: #f5f5f5; /* fondo de celda */
border: 1px solid #ff0000; /* borde de celda */
padding: 5px; /* relleno interior de celda */
}

Nota: habitualmente sólo se colocan reglas CSS en la etiqueta <table> y en la etiqueta <td>

 

En el navegador vemos:

 

*

 

 


- (cc) 2012, 3con14 -