tablas con formato

Podemos dar un sencillo formato a nuestra tabla:

Texto en blanco sobre fondo negro con borde blanco

<table border="1" bordercolor="white" bgcolor="black"><td><font color="white">Texto en blanco sobre fondo negro con borde blanco</font></td></tr></table><br /><br />



O complicarnos mucho mas la vida:

Podemos poner en nuestra tabla:

• un borde de grosor 3 y color fucsia
• un fondo de color negro


• que ocupe una altura del 10% del ancho de la ventana del navegador


• establecer 4 espacios entre una celda y otra

En nuestras celdas:

• cambiar el color de la letra para que la prima celda sea blanca y la segunda azul


• indicar la alineación horizontal y vertical, la primera alinear a la izquierda y arriba y la segunda a la derecha y abajo

<table bordercolor="fuchsia" bgcolor="black" border="3" width="350" height="100" cellspacing="4" cellspadding="8"><td align="left" valign="top"><span><font color="white"><b>1ªcolumna</b></font></span></td><td align="right" valign="bottom"><span><font color="aqua"><b>2ªcolumna</b></span></font></td></table>

1ªcolumna

2ªcolumna

OJO!!! pq si pasamos a la pestaña de 'Redactar' blogger nos puede traducir nuestra tabla a CSS y ya no se mostrará de igual modo. Ej:

bg border="3" cellspadding="8" style="color:black;"

Solución: ctrl+z antes de publicar para que volvamos a la pestaña de Edición de HTML sin hacernos la transformacion a CSS!!!!
<table border height="100" cellspacing="4" width="350" bg border="3" cellspadding="8" style="color:black;"><tbody><tr><td valign="top" align="left"><span style="font-size:+2;"><span style="color:white;"><b>1ªcolumna</b></span></span></td><td valign="bottom" align="right"><span style="font-size:+2;"><span style="color:aqua;"><b>2ªcolumna</b></span></span></td></tr></tbody></table>

1ªcolumna

2ªcolumna

Pero si la tabla es enorme puede ser tedioso tratar con tantos atributos.
SOLUCIÓN: CSS

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>