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>
   

cambiar los boliches de las listas

1. ¿Qué es un blog?


2. Decidir temática:


• Criterios para decidir el objetivo de tu blog


• Buscar blogs por temas. Rankings


• Centralizar la consulta de tus blogs favoritos




3. Crear tu blog: acceso, parametrización, publicación..

<br /> <ol><br /> <li>¿Qué es un blog?</li><br /> <li>Decidir temática:</li><br /> <ul><li class="Sq">Criterios para decidir el objetivo de tu blog</li><br /> <li class="Sq">Buscar blogs por temas. Rankings</li><br /> <li class="Sq">Centralizar la consulta de tus blogs favoritos</li><br /> </ul><br /> <li>Crear tu blog: acceso, parametrización, publicación..</li><br /> </ol><br />

listas anidadas

1. ¿Qué es un blog?


2. Decidir temática:
   
   • Criterios para decidir el objetivo de tu blog
   
   
   • Buscar blogs por temas. Rankings
   
   
   • Centralizar la consulta de tus blogs favoritos
   
   
3. Crear tu blog: acceso, parametrización, publicación..

HTML CON SALTOS DE LINEA -> pbs:

<ol>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/qu-es-un-blog.html">¿Qué es un blog?</a></li>
<li> Decidir temática:
<ul>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/criterios-para-decidir-el-objetivo-de.html">Criterios para decidir el objetivo de tu blog</a></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/buscar-blogs-por-temas.html">Buscar blogs por temas</a>.
<a href="http://cur1nf.blogspot.com/2007/09/rankings.html">Rankings</a></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/centralizar-la-consulta-de-tus-blogs.html">Centralizar la consulta de tus blogs favoritos</a></li>
</ul></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/crear-tu-blog.html">Crear tu blog</a>
:
<a href="http://cur1nf.blogspot.com/2007/09/acceso.html">acceso</a>, parametrización,
<a href="http://cur1nf.blogspot.com/2007/09/publicacion.html">publicación</a>..</li>
</ol>




HTML SIN SALTOS DE LINEA -> se puede copiar y pegar en la pestaña 'Edición de HTML' de alguno de vuestros posts:


<ol> <li> <a href="http://cur1nf.blogspot.com/2007/09/qu-es-un-blog.html">¿Qué es un blog?</a></li> <li> Decidir temática: <ul> <li> <a href="http://cur1nf.blogspot.com/2007/09/criterios-para-decidir-el-objetivo-de.html">Criterios para decidir el objetivo de tu blog</a></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/buscar-blogs-por-temas.html">Buscar blogs por temas</a>. <a href="http://cur1nf.blogspot.com/2007/09/rankings.html">Rankings</a></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/centralizar-la-consulta-de-tus-blogs.html">Centralizar la consulta de tus blogs favoritos</a></li> </ul></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/crear-tu-blog.html">Crear tu blog</a> : <a href="http://cur1nf.blogspot.com/2007/09/acceso.html">acceso</a>, parametrización, <a href="http://cur1nf.blogspot.com/2007/09/publicacion.html">publicación</a>..</li> </ol>

Así es como se muestran las listas creadas con esos fragmentos de código HTML

aplicar estilos CSS

la clase crazytext en acción.

Esto es un cuadro con borde y relleno

Éste es un color horrible.