Html : Ejemplos de Tablas básicas en html

NC > Computación > HTML

Unos ejemplo simples para usar una tabla en html.

Ejemplo :

<table>
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1)	E(1,2)	E(1,3)
E(2,1)	E(2,2)	E(2,3)
E(3,1)	E(3,2)	E(3,3)
E(4,1)	E(4,2)	E(4,3)

Ejemplo :

<table border='2px'>
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1)	E(1,2)	E(1,3)
E(2,1)	E(2,2)	E(2,3)
E(3,1)	E(3,2)	E(3,3)
E(4,1)	E(4,2)	E(4,3)

Ejemplo :

<table style="width:100%">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1)	E(1,2)	E(1,3)
E(2,1)	E(2,2)	E(2,3)
E(3,1)	E(3,2)	E(3,3)
E(4,1)	E(4,2)	E(4,3)

Ejemplo :

<table border="2px" style="border-collapse: collapse;">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1)	E(1,2)	E(1,3)
E(2,1)	E(2,2)	E(2,3)
E(3,1)	E(3,2)	E(3,3)
E(4,1)	E(4,2)	E(4,3)

Ejemplo :

<table border="2px" style="border-collapse: collapse; width: 100%;">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1)	E(1,2)	E(1,3)
E(2,1)	E(2,2)	E(2,3)
E(3,1)	E(3,2)	E(3,3)
E(4,1)	E(4,2)	E(4,3)

Ejemplo:

<table border=1 style="border-collapse: collapse; width: 100%;">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1)	E(1,2)	E(1,3)
E(2,1)	E(2,2)	E(2,3)
E(3,1)	E(3,2)	E(3,3)
E(4,1)	E(4,2)	E(4,3)

Ejemplo: Centrar elementos de la tabla

<table border=1 style="border-collapse: collapse; width: 100%;text-align:center">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1)	E(1,2)	E(1,3)
E(2,1)	E(2,2)	E(2,3)
E(3,1)	E(3,2)	E(3,3)
E(4,1)	E(4,2)	E(4,3)

Links:

1.   http://www.w3schools.com/html/html_tables.asp
2. http://www.w3schools.com/css/css_table.asp 
3. http://www.mclibre.org/consultar/htmlcss/css/css_tablas_modos_bordes.html
4. http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html
5. http://librosweb.es/libro/css/capitulo_10.html

0.15