9 - table : con borde en cada celda.

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á:

bootstrap table table-bordered

Esto lo logramos solo con agregar la clase "table-bordered":

     <table class="table table-bordered">

Ejecutar Ejemplo

Retornar