Ya se encuentra disponible el nuevo tutorial para aprender Bootstrap 4 que es la última versión estable y recomendada.
Por defecto una tabla en Bootstrap solo las filas tienen una línea separadora, si queremos que todas las celdas aparezcan recuadradas debemos añadir la clase "table-bordered".
Un ejemplo para mostrar una tabla con bordes en todas las celdas:
<!DOCTYPE html> <html> <head> <title>Prueba de Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <table class="table table-bordered"> <thead> <tr> <th>Titulo 1</th> <th>Titulo 2</th> <th>Titulo 3</th> </tr> </thead> <tbody> <tr> <td>Elemento 1,1</td> <td>Elemento 1,2</td> <td>Elemento 1,3</td> </tr> <tr> <td>Elemento 2,1</td> <td>Elemento 2,2</td> <td>Elemento 2,3</td> </tr> <tr> <td>Elemento 3,1</td> <td>Elemento 3,2</td> <td>Elemento 3,3</td> </tr> <tr> <td>Elemento 4,1</td> <td>Elemento 4,2</td> <td>Elemento 4,3</td> </tr> <tr> <td>Elemento 5,1</td> <td>Elemento 5,2</td> <td>Elemento 5,3</td> </tr> </tbody> </table> </div> </body> </html>
El resultado en pantalla luego será:
Esto lo logramos solo con agregar la clase "table-bordered":
<table class="table table-bordered">