Tablas básicas con borde



Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla sencilla:

<table  border="1">
  <tr><td>Art&iacute;culo</td><td>Cantidad</td></tr>
  <tr><td>Zapatillas</td><td>1.500</td></tr>
  <tr><td>Gorras</td><td>12.200</td></tr>
  <tr><td>Pantalones</td><td>3.800</td></tr>
  <tr><td>Camisetas</td><td>7.100</td></tr>
</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.

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:

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


Entradas que pueden interesarte