Unidad 6. Tablas (III)



6.3. Formato de tablas con CSS

Como vemos, por defecto, las tablas no tienen borde. Podemos manejar los bordes desde las hojas de estilo. Por ejemplo, para dar un borde exterior podemos utilizar la propiedad border-style y darle el valor solid. Al asignarlo al selector table, de esta forma: table { border-style: solid }

Obtendremos este resultado:

Marcas Seat Ford BMW
2016 23900 21500 11500
2017 24600 23500 13400

Si queremos que el borde también afecte a las celdas debemos añadir el selector td, esto producirá un doble borde, si sólo queremos un borde simple, podemos utilizar la propiedad border-collapse, con el valor collapse. Es decir, con este código: table, td { border-style: solid; border-collapse:collapse}

Obtendremos este resultado:

Marcas Seat Ford BMW
2016 23900 21500 11500
2017 24600 23500 13400

Si queremos que el texto esté más separado del borde le daremos un padding de 5 px. y un fondo blanco a las celdas. Es decir, con este código: td { padding: 5px; background-color: white; }

Obtendremos este resultado:

Marcas Seat Ford BMW
2016 23900 21500 11500
2017 24600 23500 13400

También se pueden utilizar las propiedades de formato en la propia tabla, sin utilizar hojas de estilo. Por ejemplo, para poner borde y color de fondo rojo, podemos escribir el siguiente código <table border="1" bgcolor="red">

Pero como ya sabemos es algo que hay que tratar de evitar, salvo excepciones, lo correcto es utilizar las hojas de estilo. Más adelante, a partir de la unidad 9, veremos cómo dar formato con hojas de estilo.


Enero-2019 (V 2.0)
Pág. 6.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.