tablas html empleando CSS

REDEFINIR ETIQUETAS

1. Añadir nuevos estilos a nuestra plantilla, dando formato a etiquetas existentes: table, td

   
   table {
     border: 1px solid black; 
     width: 350px;
   }
   td {
     border: 1px solid black; 
     padding: 5px;
   }
   

   
   table {<br /> border: 1px solid black; <br /> width: 350px;<br />}<br />td {<br /> border: 1px solid black; <br /> padding: 5px;<br />}
   
   


2. Comprobar que nuestra tabla sin estilo ahora si que dispone de él

Ojo!!! se aplicará a todas las tablas que ya han sido creadas.

Ej: problemas si redefinimos (li) y disponemos de tablas ordenadas y no ordenadas

NUEVAS ETIQUETAS

1. Añadir nuevos estilos a nuestra plantilla , creando nuestras propias etiquetas

   
   td.LeftAlignHdr {
     font-weight: bold;
     text-align: left;
     background-color: #CCCCCC;
   }
   td.CenterAlignHdr {
     font-weight: bold;
     text-align: center;
     background-color: #CCCCCC;
   }
   td.LeftAlign {
     font-weight: normal;
     text-align: left;
   }
   td.CenterAlign {
     font-weight: normal;
     text-align: center;
   }
   

   
   <br />td.LeftAlignHdr {<br /> font-weight: bold;<br /> text-align: left;<br /> background-color: #CCCCCC;<br />}<br />td.CenterAlignHdr {<br /> font-weight: bold;<br /> text-align: center;<br /> background-color: #CCCCCC;<br />}<br />td.LeftAlign {<br /> font-weight: normal;<br /> text-align: left;<br />}<br />td.CenterAlign {<br /> font-weight: normal;<br /> text-align: center;<br />}
   


2. Crear una tabla con esos nuevos estilos CSS resulta más sencillo y menos tedioso que crear la tabla con estilos HTML:
   <TABLE>
  <tr>
    <td class="LeftAlignHdr">
      CONCEPTO</td>
    <td class="CenterAlignHdr">
      2006</td>
    <td class="CenterAlignHdr">
      2007</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      luz</td>
    <td class="CenterAlign">
      200</td>
    <td class="CenterAlign">
      300</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      agua</td>
    <td class="CenterAlign">
      100</td>
    <td class="CenterAlign">
      200</td>
  </tr>
  <tr>
    <tr>
      <td class="LeftAlign">
        internet</td>
      <td class="CenterAlign">
        500</td>
      <td class="CenterAlign">
        600</td>
    </tr>
    <tr>
      <td class="LeftAlign">
        gas</td>
      <td class="CenterAlign">
        900</td>
      <td class="CenterAlign">
        950</td>
    </tr>
    <td class="LeftAlign">
      basuras</td>
    <td class="CenterAlign">
      80</td>
    <td class="CenterAlign">
      90</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      IBI</td>
    <td class="CenterAlign">
      500</td>
    <td class="CenterAlign">
      600</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      comunidad</td>
    <td class="CenterAlign">
      300</td>
    <td class="CenterAlign">
      400</td>
  </tr>
</TABLE>
   
   

   CONCEPTO	2006	2007
   luz	200	300
   agua	100	200
   internet	500	600
   gas	900	950
   basuras	80	90
   IBI	500	600
   comunidad	300	400

   
   
   <TABLE> <tr> <td class="LeftAlignHdr">CONCEPTO</td> <td class="CenterAlignHdr">2006</td> <td class="CenterAlignHdr">2007</td> </tr> <tr> <td class="LeftAlign">luz</td> <td class="CenterAlign">200</td> <td class="CenterAlign">300</td> </tr> <tr> <td class="LeftAlign">agua</td> <td class="CenterAlign">100</td> <td class="CenterAlign">200</td> </tr> <tr> <tr> <td class="LeftAlign">internet</td> <td class="CenterAlign">500</td> <td class="CenterAlign">600</td> </tr> <tr> <td class="LeftAlign">gas</td> <td class="CenterAlign">900</td> <td class="CenterAlign">950</td> </tr> <td class="LeftAlign">basuras</td> <td class="CenterAlign">80</td> <td class="CenterAlign">90</td> </tr> <tr> <td class="LeftAlign">IBI</td> <td class="CenterAlign">500</td> <td class="CenterAlign">600</td> </tr> <tr> <td class="LeftAlign">comunidad</td> <td class="CenterAlign">300</td> <td class="CenterAlign">400</td> </tr> </TABLE>