CSS. Donar estil a les taules

A continuació es mostra diferents etiquetes CSS que ens serveixen per donar format a les taules:

Per definir vores usarem l'etiqueta border:


table, th, td {
   border: 1px solid black;
}

Perquè ens mostri les vores juntes, com si fos només una sola línia usarem border-collapse:

table {
    border-collapse: collapse;
}

L'alçada i amplada de cada cel.la o fila o de la taula la definim amb width i weight. Podem usar pixels, %, em etc.. i ho podem definir sobre la taula, sobre fila o sobre la columna:
table {
    width: 100%;
}

th {
    height: 50px;
}

 
Per definir l'alineació horizontal usarem text-align i per definir l'alineació vertical usarem vertical-align:

th {
    text-align: left; }

td {
    height: 50px;
    vertical-align: bottom;
}
 


Per separar el contingut de les vores de la cel.la, usarem padding, ja sigui als td o als th

td {
    padding: 15px;
}
 
Per afegir color a la taula, tenim diferents camins, si és per les vores ho definirem a border, si és pel fons de la taula usarem background-color i si és per el contingut usarem color.


table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

Podem definir el tipus de lletra amb font-family
table {
font-family: Verdana; }


Per millorar la llegibilitat de la taula, podem fer l'efecte zebra. Una manera ràpida i fàcil ( no la única) es definir una classe per les files imparells o parells.

A continuació l'exemple complert:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid green;
    font-family: Verdana;
}

table {
    border-collapse: collapse;
width: 100%;
}

th {
    height: 50px;
   text-align: left;
  background-color: green;
    color: white;
}

td {
    height: 50px;
    vertical-align: bottom;
  
}

.fosc {
background-color: #A7C942;}

</style>
</head>
<body>

<table>
  <tr>
    <th>Nom alumne</th>
    <th>Curs</th>
  </tr>
  <tr>
    <td>Pere</td>
    <td>ASIX</td>
  </tr>
  <tr class="fosc">
    <td>Joan</td>
    <td>SMX</td>
  </tr>
</table>

</body>
</html>

  




 

HTML5. Nous camps per formularis (1)

HTML5 incorpora nous tipus per el tag <input> i nous atributs, que permeten implementar tipus de camp de manera molt fàcil i a més, en facilita la validació.
El problema és que molts d'aquest tipus només funcionen en alguns navegadors, per exemple Chrome i no funcionen en Firefox.

En la següent comparativa es pot veure les funcionalitats que suporten cadascun dels navegadors . La pàgina can i use és un bon recurs per veure el suport de css ( fins la versió 3) i html5 en els diferents navegadors.

Entrada tipus data: Mostra un calendari on escollir una data (no funciona en Firefox)
<input type="date">

Entrada tipus mes : Semblant a l'anterior però escolliríem un mes d'un any (no funciona en Firefox)

<input type="month">

Entrada tipus número: Mostra un camp que al enviar el camp submit ens donaria un missatge d'error si el camp no és numèric

<input type="number">

Entrada tipus email: Mostra un camp que al enviar el camp submit ens donaria un missatge d'error si el camp no és una adreça de correu electrònica vàlida

<input type="email">

Entrada tipus url: Mostra un camp que al enviar el camp submit ens donaria un missatge d'error si el camp no és una url vàlida.

<input type="url">

Inserir objectes al nostre web

L'etiqueta <object> defineix un objecte incrustat en un document HTML. 

Amb aquesta etiqueta podem  inserir contingut multimèdia (com àudio, vídeo, applets de Java, ActiveX, PDF i Flash) en les seves pàgines web. 

També pot utilitzar l'etiqueta <object> incrustar una altra pàgina web al document HTML. 

Es pot utilitzar l'etiqueta <param> per passar paràmetres als plugins que s'han integrat amb l'etiqueta <object>.

L'atribut data ens permet indicar la url del recurs. Amb l'atribut type indiquem el tipus MIME de l'objecte incrustat.

Per exemple si volem incloure un vídeo amb nom "prova.mpeg" l'etiqueta que hauríem d'incloure seria la següent:

<object data="prova.mpeg" type="application/mpeg" />

En ocasions l'etiqueta <object> provoca error al incloure vídeos flash amb html5 i alguns navegadors. Per aquesta raó podem usar l'etiqueta <embed>

L'atribut src ens permet indicar la url del recurs. Amb l'atribut type 
indiquem el tipus MIME de l'objecte incrustat.

En aquest enllaç podeu veure més exemples de <object> i en aquest enllaç el mateix exemple amb <embed>

L'etiqueta <iframe> ens permet incloure un web dins d'un altre web. L'atribut més important és src que ens permet dir quina és la url de la pàgina que
volem incloure. Per exemple, si volem incrustar al nostre web la pàgina de
l'institut.

<iframe src="http://fp.institutmvm.cat"  />

Ens pot servir , per exemple, per incloure una pàgina de publicitat o un mapa de google. 

En aquest enllaç teniu un exempe fet amb l'etiqueta <iframe>