Impi css-10.tablas

  • 96 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
96
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Portales de InformaciónCSS: Tablas2009 - 2010
  • 2. Estilos básicosCuando se aplican bordes a las celdas de una tabla, el aspectopor defecto con el que se muestra en un navegador es elsiguiente:
  • 3. Estilos básicosEl estándar CSS 2.1 define dos modelos diferentes para eltratamiento de los bordes de las celdas.La propiedad que permite seleccionar el modelo de bordes esborder-collapse:El modelo collapse fusiona de forma automática los bordes delas celdas adyacentes, mientras que el modelo separate fuerza aque cada celda muestre sus cuatro bordes. Por defecto, losnavegadores utilizan el modelo separate, tal y como se puedecomprobar en el ejemplo anterior.
  • 4. Estilos básicosEn general, los diseñadores prefieren el modelo collapse porqueestéticamente resulta más atractivo y más parecido a las tablasde datos tradicionales.El ejemplo anterior se puede rehacer para mostrar la tabla conbordes sencillos y sin separación entre celdas:
  • 5. Estilos básicosAunque parece sencillo, el mecanismo que utiliza el modelocollapse es muy complejo, ya que cuando los bordes que sefusionan no son exactamente iguales, debe tener en cuenta laanchura de cada borde, su estilo y el tipo de celda que contieneel borde (columna, fila, grupo de filas, grupo de columnas) paradeterminar la prioridad de cada borde.Si se opta por el modelo separate (que es el que se aplica si nose indica lo contrario) se puede utilizar la propiedad border-spacing para controlar la separación entre los bordes de cadacelda.
  • 6. Estilos básicosSi solamente se indica como valor una medida, se asigna esevalor como separación horizontal y vertical. Si se indican dosmedidas, la primera es la separación horizontal y la segunda esla separación vertical entre celdas.La propiedad border-spacing sólo controla la separación entreceldas y por tanto, no se puede utilizar para modificar el tipo demodelo de bordes que se utiliza.En concreto, si se establece un valor igual a 0 para laseparación entre los bordes de las celdas, el resultado es muydiferente al modelo collapse:
  • 7. Estilos básicosEn la tabla del ejemplo anterior, se ha establecido la propiedadborder-spacing: 0, por lo que el navegador no introduceninguna separación entre los bordes de las celdas. Además,como no se ha establecido de forma explícita ningún modelo debordes, el navegador utiliza el modelo separate.El resultado es que border-spacing: 0 muestra los bordes conuna anchura doble, ya que en realidad se trata de dos bordesiguales sin separación entre ellos. Por tanto, las diferenciasvisuales con el modelo border-collapse: collapse son muyevidentes.
  • 8. Estilos avanzadosCSS define otras propiedades específicas para el control delaspecto de las tablas. Una de ellas es el tratamiento que recibenlas celdas vacías de una tabla, que se controla mediante lapropiedad empty-cells.Esta propiedad sólo se aplica cuando el modelo de bordes de latabla es de tipo separate.
  • 9. Estilos avanzadosEl valor hide indica que las celdas vacías no se deben mostrar.Una celda vacía es aquella que no tiene ningún contenido, nisiquiera un espacio en blanco o un  .La siguiente imagen muestra las diferencias entre una tablanormal y una tabla con la propiedad empty-cells: hide:
  • 10. Estilos avanzadosDesafortunadamente, Internet Explorer 6 y las versionesanteriores no interpretan correctamente esta propiedad ymuestran el ejemplo anterior de la siguiente manera:
  • 11. Estilos avanzadosPor otra parte, el título de las tablas se establece mediante elelemento <caption>, que por defecto se muestra encima de loscontenidos de la tabla.La propiedad caption-side permite controlar la posición del títulode la tabla.
  • 12. Estilos avanzadosEl valor bottom indica que el título de la tabla se debe mostrardespués de los contenidos de la tabla.La alineación horizontal se controla mediante la propiedad text-align.A continuación se muestra el código HTML y CSS de un ejemplosencillo de uso de la propiedad caption-side:
  • 13. Estilos avanzadosDesafortunadamente, el navegador Opera 9 y versionesanteriores y el navegador Internet Explorer 6 y versionesanteriores no soportan esta propiedad y muestran el título de latabla siempre encima de sus contenidos:
  • 14. Estilos avanzadosEl navegador Firefox sí que soporta esta propiedad y muestra eltítulo de la segunda tabla debajo de sus contenidos, tal y comose ha indicado en el ejemplo:
  • 15. Estilos avanzadosEl resultado final del ejercicio anterior se podría completarañadiendo una pequeña mejora: que el color de las filas varíecuando el usuario pasa el ratón por encima de cada fila. Lapseudo-clase :hover permite añadir fácilmente estacaracterística:
  • 16. Estilos avanzadosLa regla CSS necesaria se muestra a continuación:Desafortunadamente, Internet Explorer 6 y las versionesanteriores no soportan la pseudo-clase :hover en elementosdiferentes a los enlaces, por lo que se debe recurrir a solucionescon JavaScript para mostrar de otro color la fila activa.