Tablas HTML con borde

24/May/2012 HTML , 1 Comentario

Si has hecho el ejemplo de Crear una tabla con HTML habrás visto que el resultado de tu código no es parecido a los gráficos presentados en el ejemplo. Esto es debido a que las tablas HTML por defecto no aparecen con borde.

Buscando documentación por Internet sobre como poner un borde a una tabla en HTML verás que se habla del atributo border. De esta forma el siguiente código nos permite crear una tabla con borde:

  1. <table border="1">
  2. <tr><td>Art&iacute;culo</td><td>Cantidad</td></tr>
  3. <tr><td>Zapatillas</td><td>1.500</td></tr>
  4. <tr><td>Gorras</td><td>12.200</td></tr>
  5. <tr><td>Pantalones</td><td>3.800</td></tr>
  6. <tr><td>Camisetas</td><td>7.100</td></tr>
  7. </table>

Si bien, el atributo border ya no se encuentra dentro de la especificación HTML y su uso no es aconsejado. La forma de crear una tabla HTML con borde es mediante hojas de estilo, es decir, CSS.

Lo que tenemos que hacer es añadir un estilo CSS a nuestra página web. Un estilo que vaya referente a las tablas. Es por ello que el selector utilizado en este caso es table y td.

  1. table,td { ... }

Ya que si el borde solo se lo aplicamos a la tabla veremos que nos aparecerá únicamente el borde exterior.

La propiedad que nos permite crear el borde es border. Y los parámetros que le ponemos son el grosor del borde, el tipo de línea y el color. Así el código CSS para crear tablas HTML con borde es el siguiente:

  1. table,td {
  2. border: 1px solid black;
  3. }

Vídeos sobre HTML


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*