7 - table : básica

Ya se encuentra disponible el nuevo tutorial para aprender Bootstrap 4 que es la última versión estable y recomendada.


El elemento table de HTML nos permite mostrar datos en forma tabular. Cuando incluimos el framework Bootstrap se introducen una serie de reglas a los elementos relacionados a la marca table.

Una tabla básica la logramos insertando la clase "table":

<!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">
       <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>
       </tbody>
     </table>
  </div> 
</body> 
</html> 

Como podemos ver solo con agregar la clase "table":

     <table class="table">

Tenemos como resultado una disposición de los elementos con el siguiente formato:

bootstrap table

Si sacamos la clase "table" el resultado en el navegador es:

sin bootstrap table

Es decir que las reglas que define Bootstrap permiten mostrar las filas separadas por una línea horizontal, los textos de la cabecera en negrita y la tabla se expande a todo su contenedor.

Ejecutar Ejemplo

Retornar