Tablas en HTML

 En esta entrada voy a enseñar cómo se crean las tablas en HTML (se puede utilizar en blogger en la vista en HTML) y a darlas un aspecto más agradable a la vista.

Creación

Para crear una tabla, se utiliza la etiqueta <table>

<table>
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

La etiqueta <tr> significa nueva fila de la tabla.

Las etiquetas <th> y <td> significan nueva columna, con la diferencia de que th es el título de esa columna y td se utiliza para los elementos pertenecientes a esa columna.

See the Pen Tablas en HTML by Eva (@evapikachu) on CodePen.



Hay que prestar especial atención a que ponemos en cada tr el mismo número de elementos (ya sea de th o de td), ya que no se define en ningún momento el número de columnas y podría estropearnos la estética como tabla.

See the Pen Tablas en HTML - filas con distinto número de columnas by Eva (@evapikachu) on CodePen.


Formato

Si os fijáis bien en los dos ejemplos anteriores, por defecto las tablas el navegador las pinta sin los bordes a los que estamos acostumbrados a ver en todas partes.

Esto puede ser útil si queremos organizar los diferentes apartados en un formulario, por ejemplo. Pero no si queremos que el usuario que visualiza la página sepa que esto es una tabla.

Para esto, hay que añadir CSS a nuestra página, ya sea con las etiquetas <style> o bien en una hoja de estilos a parte.

<style>
    table, th, td{
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

De esta forma estamos indicando que el navegador pinte el borde a la tabla, a las filas con el título de columna y al resto de las filas.

Con el collapse estamos indicando que queremos las líneas más finas. En el ejemplo os dejo comentada la parte del collapse para que veáis la diferencia, pero os invito a que lo comentéis y descomentéis para ver la diferencia. 
*Los comentarios en CSS se hacen poniendo // delante del código que queremos omitir al navegador sin borrarlo).

See the Pen Tablas en HTML + CSS by Eva (@evapikachu) on CodePen.


Con CSS se pueden dar estilos mejores a una tabla que no sea sólo las líneas. Por aquí os dejo algunos ejemplos.

See the Pen Tablas en HTML + CSS - Estilo 1 by Eva (@evapikachu) on CodePen.

See the Pen Tablas en HTML + CSS - Estilo 2 by Eva (@evapikachu) on CodePen.

See the Pen Tablas en HTML + CSS - Estilo 3 by Eva (@evapikachu) on CodePen.

See the Pen Tablas en HTML + CSS - Estilo 3 + Título en negro by Eva (@evapikachu) on CodePen.

Comentarios

Publicar un comentario

Entradas populares de este blog

Minterms y Maxterms

Imagen
Minterm:  Producto lógico de todas las variables negadas o sin negar (producto canónico). Maxterm : Suma lógica de todas las variables negadas o sin negar (suma canónica). Tabla: a b c   Minterms   Maxterms 0 0 0   m 0 =a c ·b c ·c c   M 0 =a+b+c 0 0 1   m 1 =a c ·b c ·c   M 1 =a+b+c c 0 1 0   m 2 =a c ·b·c c   M 2 =a+b c +c 0 1 1   m 3 =a c ·b·c   M 3 =a+b c +c c 1 0 0   m 4 =a·b c ·c c   M 4 =a c +b+c 1 0 1   m 5 =a·b c ·c   M 5 =a c +b+c c 1 1 0   m 6 =a·b·c c   M 6 =a c +b c +c 1 1 1   m 7 =a·b·c   M 7 =a c +b c +c c Para pasar de miniterms a Maxterms hay que negar 2 veces la función. Los minterms se utilizan para los mapas de Karnaugh. Mapas de Karnaugh   Los mapas de Karnaugh sirven para simplificar funciones booleanas. Por ejemplo: vamos a simplificar: f(a,b,c,d)=a c b c c c d c +a c bc c d c +a c b c c c d+a c bc c d+abc c d c +abcd c Vamos a crear nuestra tabla de verdad con los datos que
Leer más

Sumador y restador con puertas lógicas

Imagen
Los circuitos están realizados con logic.ly  por si queréis probarlos, es una demo online que se puede abrir en el navegador de Internet de cualquier sistema operativo. Sumador Empecemos con el half-adder y despúes con el Full-adder. (La diferencia entre ellos es que en uno ya puedes sumar llevando) Half-adder Tabla de verdad S es resultado de la suma binaria, y C es el carry (la que te llevas) Circuito Full-adder Tabla de verdad Cin es la que te llevas, en el circuito hay que encencer Cin de forma manual para así poder verlo con más calma. Circuito Restadores Al igual que con la suma existe el half-subtractor y el full-subtractor. Half-Subtractor Tabla Circuito Full-subtractor Tabla Circuito Tanto al sumador como al restador los podemos hacer tan grandes como nosotros consideremos competente, estos ejemplos están realizados con la suma/resta de un bit, pero se puede hacer con los bits que nosotros queramos, tan solo tendríamos qu
Leer más

Teorema de expansión de Shannon

Álgebra de Boole x y z f(x,y,z) 0 0 0 f(0,0,0) 0 0 1 f(0,0,1) 0 1 0 f(0,1,0) 0 1 1 f(0,1,1) 1 0 0 f(1,0,0) 1 0 1 f(1,0,1) 1 1 0 f(1,1,0) 1 1 1 f(1,1,1) Teorema de expansión de Shannon f(x 1 ,x 2 ,...,x n ) x i € {0,1} f: {0,1} n ->{0,1}                                               _ f(x 1 ,x 2 ,...,x n ) = x 1 ·f(1,x 2 ,...x n )+ x 1 · f(0,x 1 ,...,x n ) Por ejemplo, el teorema de expansión de Shannon aplicado a f(x,y,z) sería: f(x,y,z)=xf(1,y,z)+x*f(0,y,z)=xyf(1,1,z) + xy*f(1,0,z) + x*yf(0,1,z) + x*y*f(0,0,z)= =xyzf(1,1,1) + xyz*f(1,1,0) + xy*zf(1,0,1) + xy*z*f(1,0,0) + x*yzf(0,1,1) + x*yz*f(0,1,0) + x*y*zf(0,0,1) + x*y*z*f(0,0,0)
Leer más