Bordes de las tablas

Hemos visto que, por defecto, el navegador muestra dos bordes en las tablas: el borde que compone el contorno de la tabla y los bordes que componen el contorno de las celdas. 

La propiedad de estilo border-collapse permite gestionar esta situación.

border-collapse:

collapse;

separate;

Comentarios

  • El valor collapse fusiona los dos bordes adyacentes, otorgando el aspecto de un único borde.

  • El valor separate muestra los dos bordes de forma separada, situación por defecto.

Ejemplo


<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8">  
<style type="text/css"> 
table { width: 200px; 
        text-align: center; 
        border : 1px solid gray; 
        border-collapse: collapse;} 
td { border : 1px solid gray;} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>1</td><td>2</td><td>3</td> 
</tr> 
<tr> 
<td>4</td><td>5</td><td>6</td> 
</tr> 
<tr> 
<td>7</td><td>8</td><td>9</td> 
</tr> 
</table> 
</body> 
</html>
 
images/CAP15IMG05.png
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Espacio entre las celdas de las tablas
Siguiente
Celdas vacías en las tablas