lunes, 24 de septiembre de 2018

Atributos Colspan y Rowspan de Tablas en Html5

Como continuación a la anterior entrada sobre los atributos Colspan y Rowspan, los cuales los cuales nos permiten unir celdas horizontalmente o verticalmente respectivamente.

Como mejor se ven las cosas son con un ejemplo de cada una.

 HORIZONTALMENTE

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontalmente</title>

<style>
   
    table{
       
        border: medium #ED1316;
        /*estilo de los bordes*/
        border-style:double;
        /*color de fondo*/
        background: #A7CAF4;
        /*ocupa el 50 por ciento de la web*/
        width: 50%;
        /*nos lo centra*/
        margin: auto;
       
    }
   
    td{
       
        border-style:solid;
        border:dotted #45B508;
        text-align: center;
        padding: 5px;
    }
</style>
   
</head>

<body>
   
    <table>
  <caption>TABLA PRINCIPAL</caption>
  <tbody>
    <tr>
      <td colspan="2">Celdas Horizontalmente</td>
      <td>Celda 1</td>
    </tr>
    <tr>
      <td>Celda 2</td>
    </tr>
  </tbody>
</table>
   
</body>
</html>

VERTICALMENTE




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Verticalmente</title>

<style>
   
    table{
       
        border: medium #ED1316;
        /*estilo de los bordes*/
        border-style:double;
        /*color de fondo*/
        background: #A7CAF4;
        /*ocupa el 50 por ciento de la web*/
        width: 50%;
        /*nos lo centra*/
        margin: auto;
       
    }
   
    td{
       
        border-style:solid;
        border:dotted #45B508;
        text-align: center;
        padding: 5px;
    }
</style>
   
</head>

<body>
   
    <table>
  <caption>TABLA PRINCIPAL</caption>
  <tbody>
    <tr>
      <td rowspan="2">Celdas Verticalmente</td>
      <td>Celda 1</td>
    </tr>
    <tr>
      <td>Celda 2</td>
    </tr>
  </tbody>
</table>
   
</body>
</html>
en No hay comentarios:
Etiquetas:

sábado, 22 de septiembre de 2018

Etiquetas Tablas en Html5

Esta es la segunda parte de la entrada anterior sobre las tablas en Html5, vamos a explicar para que sirven las etiquetas para diseñar una tabla.

<table> Nos indica que comienza una tabla en el documento Html. A partir de aquí estará toda la tabla creada.

</table> Nos indica el final de la tabla.

<tr> </tr> Etiqueta contenedora de cada fila de la tabla, es decir si tenemos tres filas en la tabla tendremos que tener tres veces esta etiqueta.

<td></td> Etiqueta contenedora de cada columna de la tabla, es decir si tenemos tres columnas en la tabla tendremos que tener tres veces esta etiqueta.

<tr></tr> Etiqueta contenedora de cada fila de la tabla. Antes de escribir las filas tenemos que meterla dentro de esta etiqueta.

<caption></caption> Esta etiqueta nos valdrá para tener un título en la tabla.

<colgroup></colgroup> Esta etiqueta nos sirve para especificar un gruupo de una o más columnas para aplicarle formato.

<col></col> Esta etiqueta suele estar dentro de la etiqueta anterior. Aquí podemos especificar las propiedades de esa columna.

Luego tenemos unos atributos como son "colspan" que esta nos permite unir celdas horizontalmente y "rowspan" nos permite unir celdas verticalmente.

<thead></thead> Define la cabecera de la tabla
<tbody></tbody> Define el cuerpo de la tabla.
</tfoot></tfoot> Define el pie de la tabla.

Ya la tercera entrada seguiremos con ejemplos de tablas.
en No hay comentarios:
Etiquetas:

domingo, 16 de septiembre de 2018

Creación Tabla con CSS en una página HTML

Aparte de otros cursos que estoy realizando, hoy estoy con el de  HTML5, y acabo de terminar de realizar un ejemplo de como realizar una tabla en html con modificadores de diseño con CSS.

Está sería la tabla que vamos a crear, y con el diseño que se ve en la fotografía.









El código es el siguiente:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo Tabla</title>

<style>

    table{
        color:crimson;
        font-size: 20px;
               
    }

    th{
       
        background: -moz-linear-gradient(top, #00f, #0cf);
        font-weight: bold;
        color:aliceblue;
    }
   
    td{
       
        background:#EDF1E4;
        color:blue;
    }
   
</style>   
   
</head>

<body>

<table border="1" width="400" height="50">
        <caption>Tabla de Actividades</caption>
        <tr>
            <th>Id_Act</th>
            <th>Tipo</th>
            <th>Subtipo</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Estancia</td>
            <td>Hotel</td>
        </tr>
   
        <tr>
            <td>2</td>
            <td>Estancia</td>
            <td>Casa Rural</td>
        </tr>
   
</table>
   
   
   
   
</body>
</html>

En la próxima entrada explicaremos un poco el código insertado.
en No hay comentarios:
Etiquetas:

sábado, 15 de septiembre de 2018

Manifestación Jusapol Barcelona 29 septiembre

Aquí estamos otra vez, y no nos rendiremos hasta que lo consigamos.

El próximo 29 de septiembre Manifestación de Jusapol en Barcelona, tenemos que asistir la familia que somos, que hará poco más de un año, no nos conocíamos casi ninguno y ahora somos una unión, ya que coincidimos en muchas manifestaciones de las que acudimos los componentes de la Policía Nacional y la Guardia Civil.

Luchamos por una causa que creemos justa, que es cobrar lo mismo que las policías autonómicas.

Con las noticias que anteriormente daba el gobierno del PP, y ahora del PSOE, pensarán muchos pero si eso ya lo habéis conseguido; Pues no lo único que nos han dado es una bajísima subida salarial, que por supuesto, todavía no la hemos visto.

 




Mismo Trabajo, mismo sueldo.
#Equiparacionya
@Jusapol
en No hay comentarios:
Etiquetas:

miércoles, 5 de septiembre de 2018

Video del Canto de los Jusapoleros

En la manifestación de Jusapol realizada en Málaga, como en todas, siempre al final de ella realizado el canto de Jusapol.

En todas las manifestaciones se graban y se pasan a las personas que estamos dentro de alguno de los grupos.




#Equiparacionya
@Jusapol


en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)