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:

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:

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:

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.

 Cursos Informática Gratuitos