Mostrando entradas con la etiqueta tablas. Mostrar todas las entradas
Mostrando entradas con la etiqueta tablas. Mostrar todas las entradas

miércoles, 24 de octubre de 2007

tablas con formato

Podemos dar un sencillo formato a nuestra tabla:
Texto en blanco sobre fondo negro con borde blanco





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



1ªcolumna2ª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!!!!


1ªcolumna2ª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;
    }




  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;
    }



  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



jueves, 11 de octubre de 2007

tablas

tablas html sin formato

tablas html con formato

tablas html empleando CSS

añadir tablas a las plantillas

ejemplo de tabla creada desde plantilla de entrada

Tiempo estimado:10 minutos
Nivel:medio


Hemos creado una tabla añadiendo codigo html a la plantilla de los posts

tablas html sin formato

OJO!!! Ninguna de las tablas que creemos se visualizarán como tales en la vista previa. Debemos fiarnos del aspecto de la pestaña de redactar

nota: el html no tiene ningun salto de linea, son para visualizar mejor el html:

Tabla de 3 columnas:
<table>
<tr>
<td>1ª Columna</td>
<td>2ª Columna</td>
<td>3ª Columna</td>
</tr>
</table>

1ª Columna2ª Columna3ª Columna




OJO!!! si no añadimos propiedades, nadie diría que es una tabla...
SOLUCIÓN: añadir borde
<table border="1">
<tr>
<td>1ª Columna</td>
<td>2ª Columna</td>
<td>3ª Columna</td>
</tr>
</table>

1ª Columna2ª Columna3ª Columna




Podemos tener casillas bajo nuestras columnas:
<table border="1">
<tr>
<td>1ª Columna</td>
<td>2ª Columna</td>
<td>3ª Columna</td>
</tr>
<tr>
<td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
<td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
<td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
</tr>
</table>

1ª Columna2ª Columna3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª filaCasilla bajo 2ª Columna = 2ª Columna de la 2ª filaCasilla bajo 3ª Columna = 3ª Columna de la 2ª fila



Podemos resaltar los encabezados de columnas:
<table border="1">
<tr>
<th>1ª Columna</th>
<th>2ª Columna</th>
<th>3ª Columna</th>
</tr>
<tr>
<td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
<td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
<td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
</tr>
</table>

1ª Columna2ª Columna3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª filaCasilla bajo 2ª Columna = 2ª Columna de la 2ª filaCasilla bajo 3ª Columna = 3ª Columna de la 2ª fila



Podemos poner un título que se ajuste al ancho de nuestra tabla:

<table border="1">
<caption>Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog</caption>
<tr>
<th>1ª Columna</th>
<th>2ª Columna</th>
<th>3ª Columna</th>
</tr>
<tr>
<td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
<td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
<td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
</tr>
</table>

Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog
1ª Columna2ª Columna3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª filaCasilla bajo 2ª Columna = 2ª Columna de la 2ª filaCasilla bajo 3ª Columna = 3ª Columna de la 2ª fila






Ej: podemos crear una tabla para añadirla a la plantilla de entrada!!!!!

Tiempo estimado:minutos
Nivel:avanzado medio bajo




OJO con tener la tentación de poner cada etiqueta en una linea!!!!!
Pues nos encontraremos con muchas lineas en blanco antes de mostrar la misma:
<table border="1">
<tr>
<td>Tiempo estimado:</td>
<td>minutos</td>
</tr>
<tr>
<td>Nivel:</td>
<td>avanzado medio bajo</td>
</tr>
</table>









Tiempo estimado:minutos
Nivel:avanzado medio bajo



SOLUCIÓN: usar editores HTML para complicarnos un poco menos la vida.
Ej: pspad

Suscribete

>>>>>>>>>>>>>>>>>>>>>> Creative Commons License