¿Cómo cambiar el color de fondo de las filas de la tabla o celdas individuales en Bootstrap?

Posted on by Rudeus Greyrat

En este artículo, discutiremos cómo configurar el color de fondo de las filas de la tabla y cómo configurar el color de fondo para una celda individual usando Bootstrap. Bootstrap proporciona una serie de clases que se pueden usar para aplicar varios estilos a las tablas, como cambiar la apariencia del encabezado, eliminar las filas, agregar o eliminar bordes, hacer que las filas se puedan desplazar, etc. Bootstrap también proporciona clases para hacer que las tablas respondan.

El propósito de crear la tabla es mostrar los datos complejos y de gran tamaño en un formato estructurado compacto simple que proporciona contenido informativo de un vistazo. Esto ahorrará tiempo para leer y analizar grandes datos no estructurados. Bootstrap ayuda a crear y decorar el contenido de manera estándar. Usaremos clases integradas de arranque para crear la estructura de la tabla. Se puede crear una tabla HTML simple usando la siguiente sintaxis:

Sintaxis:

<table class="table"> Table Contents... <table>

Antes de continuar con nuestra discusión principal, el conocimiento de la creación de tablas usando HTML lo ayudará a comprender mejor el artículo. Consulte Bootstrap 4 | Tablas para muchos otros casos de tablas en bootstrap.

Enlace CDN Bootstrap: Tomemos un ejemplo para entender cómo configurar y agregar un enlace CDN Bootstrap para aplicar las clases predefinidas de arranque para crear la tabla.

<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Geeks For Geeks</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link
      rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"/>
  </head>
  
  <body>
    <h1>Tables</h1>
    <h3>Change color of tables</h3>
    <table class="table table-bordered table-hover table-sm">
      <thread>
        <tr>
          <th scope="col">Sl No.</th>
          <th scope="col">Country</th>
          <th scope="col">Capital</th>
        </tr>
      </thread>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>India</td>
          <td>New Delhi</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Canada</td>
          <td>Ottawa</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Bangladesh</td>
          <td>Dhaka</td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td>Australia</td>
          <td>Canberra</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Producción:

Hemos agregado el enlace CDN de arranque en nuestro código que crea una tabla de contenido estándar y bien estructurada. Usando clases predefinidas, podemos cambiar el color de las celdas de la tabla y las filas de la tabla. Para cambiar el color de la fila de la tabla, debemos especificar en la etiqueta <tr> con la clase requerida y para cambiar el color de la fila de la tabla, luego especifíquelo dentro de la etiqueta <td> con la clase requerida. Aprendamos las clases una a una.

Clases Predefinidas: Para cambiar el color de una fila o de toda la tabla, usaremos cualquiera de las siguientes clases.

  1. table-active: esta clase se aplica al color de desplazamiento de la fila o celda de la tabla con color gris.
  2. table-default: esta clase se aplica para cambiar el color a blanco cuando se selecciona la fila predeterminada.
  3. table-primary: Esta clase indica la acción importante.
  4. table-secundario: Esta clase indica las actividades menos importantes.
  5. table-success: Esta clase indica la acción positiva o exitosa.
  6. table-danger: Esta clase indica una acción potencialmente negativa o peligrosa.
  7. table-warning: esta clase indica una advertencia que podría necesitar atención.
  8. table-info: Esta clase indica un cambio o acción informativo neutral.
  9. table-light: esta clase se aplica para el fondo de la fila de la tabla o la tabla gris claro.
  10. table-dark: Esta clase se aplica a una mesa gris oscuro.

Ejemplo: En este caso, hemos utilizado todas las clases predefinidas para cambiar el color de las filas.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Geeks For Geeks</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link
      rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"/>
  </head>
  
  <body>
    <h1>Tables</h1>
    <h3>Different colour of table rows</h3>
  
    <table class="table">
      <thread>
        <th scope="col">Sl No.</th>
        <th scope="col">Class</th>
      </thread>
      <tbody>
        <tr class="table-active">
          <th scope="row">1</th>
          <td>table-active</td>
        </tr>
        <tr class="table-default">
          <th scope="row">2</th>
          <td>table-default</td>
        </tr>
        <tr class="table-primary">
          <th scope="row">3</th>
          <td>table-primary</td>
        </tr>
        <tr class="table-secondary">
          <th scope="row">4</th>
          <td>table-secondary</td>
        </tr>
        <tr class="table-success">
          <th scope="row">5</th>
          <td>table-success</td>
        </tr>
        <tr class="table-danger">
          <th scope="row">6</th>
          <td>table-danger</td>
        </tr>
        <tr class="table-warning">
          <th scope="row">7</th>
          <td>table-warning</td>
        </tr>
        <tr class="table-info">
          <th scope="row">8</th>
          <td>table-info</td>
        </tr>
        <tr class="table-light">
          <th scope="row">9</th>
          <td>table-light</td>
        </tr>
        <tr class="table-dark">
          <th scope="row">10</th>
          <td>table-dark</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Producción:

Para cambiar el color de cualquier celda en particular, puede usar cualquiera de las siguientes clases:

  1. bg-primary: Se aplica para indicar una acción positiva o exitosa.
  2. bg-success: Se aplica para indicar una acción exitosa o positiva.
  3. bg-warning: se aplica para indicar una advertencia que podría necesitar atención
  4. bg-danger: Se aplica para indicar una acción potencialmente negativa o peligrosa
  5. bg-info: Se aplica para indicar un cambio o acción informativa neutra.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Geeks For Geeks</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link
      rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"/>
  </head>
  
  <body>
    <h1>Tables</h1>
    <h3>Change color of single cells</h3>
    <table class="table">
      <thread>
        <th scope="col">Sl No.</th>
        <th scope="col">Class</th>
      </thread>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td class="bg-primary">bg-primary</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td class="bg-success">bg-success</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td class="bg-warning">bg-warning</td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td class="bg-danger">bg-danger</td>
        </tr>
        <tr>
          <th scope="row">5</th>
          <td class="bg-info">bg-info</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Producción:

Para cambiar el color de la celda de la tabla en particular, debemos especificarlo dentro de la etiqueta <td> para la celda en particular. El siguiente ejemplo ilustra cómo declarar una celda en particular.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Geeks For Geeks</title>
    <link
      rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
  </head>
  
  <body>
    <h1>Tables</h1>
    <h3>Change color of tables</h3>
    <table class="table table-bordered table-hover table-sm">
      <thread>
        <tr>
          <th scope="col">Sl No.</th>
          <th scope="col">Country</th>
          <th scope="col">Capital</th>
        </tr>
      </thread>
      <tbody>
        <tr class="bg-primary">
          <th scope="row">1</th>
          <td>India</td>
          <td>New Delhi</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td class="bg-success">Canada</td>
          <td>Ottawa</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Bangladesh</td>
          <td>Dhaka</td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td>Australia</td>
          <td>Canberra</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Producción:

Color personalizado

Publicación traducida automáticamente

Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *