Tablas.

TABLAS

Una tabla en HML es una forma de representar mucha información de manera esquematizada, ordenada y compacta. También  puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada usando  tres tags:

Tag HMTL table (principal contenedor).
Tag HMTL tr (Fila contenedora).
Tag HTML td (celda simple).

Ejemplos de Tablas

Ejemplo 1 (Creación de una Tabla Básica)

<table width="200" border="1">
  <tr>
    <td>Juan</td><td>Ana</td><td>Pedro</td>
  </tr>
  <tr>
    <td>23</td><td>19</td><td>21</td>
  </tr>
</table>

Ejemplo 2 (Creación de una Tabla Básica con línea expandida “Rowspan”)

<table border="1">
      <tr>
            <td>Lunes</td>
            <td rowspan=2>Miercoles</td>
            <td>Jueves</td>
      </tr>
      <tr>
            <td>Martes</td> <td>Viernes</td>
      </tr>
</table>

<table border="1">
      <TR>
            <TD ROWSPAN=2>Peru</TD>
            <TD>Colombia</TD> <TD>Brazil</TD> <TD>Ecuador</TD>
      </TR>
      <TR>
            <TD>Chile</TD> <TD>Bolivia</TD> <TD>Argentina</TD>
      </TR>
</table>

Ejemplo 3 (Creación de una Tabla Básica con columna expandida “Colspan”)

<TABLE border="1">
      <TR>
            <TD>Puma</TD>
            <TD COLSPAN=2>Nike</TD>
      </TR>
      <TR>
            <TD>Umbro</TD> <TD>Adidas</TD> <TD>Reebok</TD>
      </TR>
</TABLE>

Ejemplo 4 (Creación de una Tabla Básica con Cabeceras)

<TABLE border="1">
      <TR>
            <TH>Futbol</TH> <TH>Voley</TH> <TH>Tenis</TH>
      </TR>
      <TR>
            <TD>Ronaldo</TD> <TD>Chihuan</TD> <TD>Federer</TD>
      </TR>
      <TR>
            <TD>Vargas</TD> <TD>Mirtha</TD> <TD>Nadal</TD>
      </TR>
</TABLE>

Ejemplo 5 (Combinación de columna expandida y cabecera)

<TABLE BORDER>
      <TR>
            <TH COLSPAN=2>LAPTOPS</TH>
            <TH COLSPAN=2>MONITORES</TH>
      </TR>
      <TR>
            <TD>DELL</TD> <TD>TOSHIBA</TD> <TD>LG</TD>
            <TD>VIEWSONIC</TD>
      </TR>
      <TR> 
            <TD>COMPAC</TD> <TD>HP</TD>
            <TD>SONY</TD> <TD>SAMSUNG</TD>
      </TR>
</TABLE>

Ejemplo 6 (Combinación de cabeceras múltiples y columnas expandidas)

<TABLE BORDER>
             <TR>
                  <TH COLSPAN=2>HOMBRE</TH><TH COLSPAN=2>MUJERES</TH>
             </TR>
             <TR>
                  <TH>Nota 1</TH><TH>Nota 2 </TH>
                  <TH>Nota1</TH> <TH>Nota 2</TH>
             </TR>
             <TR>
                  <TD>17</TD> <TD>16</TD> <TD>16</TD> <TD>19</TD>
             </TR>
             <TR>
               <TD>18</TD> <TD>15</TD> <TD>20</TD> <TD>13</TD>
             </TR>
</TABLE>