Tablas
La tabla muestra datos organizados y estructurados en filas y columnas. Se utiliza para categorizar y comparar contenido relacionado. Este componente permite escanear más fácilmente información compleja.
Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.
Sin separadores
| Número | Título de la celdaSubtítulo de hasta 2 líneas donde se puede sumar contenido de soporte | Enlace | Botón | Checkbox | Etiqueta |
|---|---|---|---|---|---|
| 1 | Juan | Enlace predeterminado | Texto predeterminado | ||
| 2 | María | Enlace predeterminado | Texto predeterminado | ||
| 3 | Esther | Enlace predeterminado | Texto predeterminado | ||
| 4 | José | Enlace predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col" class="tb-number">Número</th>
<th scope="col" class="tb-text">
<span class="th-title">Título de la celda</span>
<span class="th-subtitle">Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte</span>
</th>
<th scope="col" class="tb-link">Enlace</th>
<th scope="col" class="tb-button">Botón</th>
<th scope="col" class="tb-check">Checkbox</th>
<th scope="col" class="tb-tag">Etiqueta</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right">1</td>
<td>Juan</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-designer"
value="diseñador"
/>
<label class="form-checkbox-label" for="profession-checkbox-designer">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-default">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">2</td>
<td>María</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-developer"
value="desarrollador"
/>
<label class="form-checkbox-label" for="profession-checkbox-developer">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-danger">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">3</td>
<td>Esther</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-1"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-1">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-info">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">4</td>
<td>José</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-2"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-2">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-warning">Texto predeterminado</span></td>
</tr>
</tbody>
</table>
</div>
Con separadores
| Número | Texto | Enlace | Botón | Checkbox | Etiqueta |
|---|---|---|---|---|---|
| 1 | Juan | Enlace predeterminado | Texto predeterminado | ||
| 2 | María | Enlace predeterminado | Texto predeterminado | ||
| 3 | Esther | Enlace predeterminado | Texto predeterminado | ||
| 4 | José | Enlace predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-number">Número</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-link">Enlace</th>
<th scope="col" class="tb-button">Botón</th>
<th scope="col" class="tb-check">Checkbox</th>
<th scope="col" class="tb-tag">Etiqueta</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right">1</td>
<td>Juan</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-5"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-5">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-default">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">2</td>
<td>María</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-6"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-6">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-success">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">3</td>
<td>Esther</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-7"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-7">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-info">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">4</td>
<td>José</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-8"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-8">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-warning">Texto predeterminado</span></td>
</tr>
</tbody>
</table>
</div>
Con patrón cebra
| Número | Texto | Enlace | Botón | Checkbox | Etiqueta |
|---|---|---|---|---|---|
| 1 | Juan | Enlace predeterminado | Texto predeterminado | ||
| 2 | María | Enlace predeterminado | Texto predeterminado | ||
| 3 | Esther | Enlace predeterminado | Texto predeterminado | ||
| 4 | José | Enlace predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" class="tb-number">Número</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-link">Enlace</th>
<th scope="col" class="tb-button">Botón</th>
<th scope="col" class="tb-check">Checkbox</th>
<th scope="col" class="tb-tag">Etiqueta</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right">1</td>
<td>Juan</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-18"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-18">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-default">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">2</td>
<td>María</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-19"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-19">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-warning">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">3</td>
<td>Esther</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-20"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-20">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-info">Texto predeterminado</span></td>
</tr>
<tr>
<td class="text-right">4</td>
<td>José</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="professionCheckbox"
id="profession-checkbox-content-21"
value="redactor"
/>
<label class="form-checkbox-label" for="profession-checkbox-content-21">
Checkbox
</label>
</div>
</td>
<td><span class="badge badge-danger">Texto predeterminado</span></td>
</tr>
</tbody>
</table>
</div>
Con checkbox
| Checkbox | Número | Texto | Texto | Texto |
|---|---|---|---|---|
| $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-check">Checkbox</th>
<th scope="col" class="tb-number">Número</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="checkboxNoText"
id="checkbox-no-text"
value="Sin texto"
/>
<label class="form-checkbox-label" for="checkbox-no-text" aria-label="Casilla múltiple sin texto">
</label>
</div>
</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="checkboxNoText-1"
id="checkbox-no-text-1"
value="Sin texto"
/>
<label class="form-checkbox-label" for="checkbox-no-text-1" aria-label="Casilla múltiple sin texto">
</label>
</div>
</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="checkboxNoText-2"
id="checkbox-no-text-2"
value="Sin texto"
/>
<label class="form-checkbox-label" for="checkbox-no-text-2" aria-label="Casilla múltiple sin texto">
</label>
</div>
</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>
<div class="form-checkbox">
<input
class="form-checkbox-input"
type="checkbox"
name="checkboxNoText-3"
id="checkbox-no-text-3"
value="Sin texto"
/>
<label class="form-checkbox-label" for="checkbox-no-text-3" aria-label="Casilla múltiple sin texto">
</label>
</div>
</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
</tbody>
</table>
</div>
Tipos de celda
arrow_right_altDe texto
| Texto | Texto | Texto |
|---|---|---|
| Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
</tbody>
</table>
</div>
arrow_right_altDe número
| Texto | Número | Texto | Texto | Texto |
|---|---|---|---|---|
| Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos. | $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | $100,00 | Texto predeterminado | Texto predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-number">Número</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Este un texto de prueba para registrar el alto máximo de la celda y
la cantidad de caracteres permitidos.
</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td class="text-right">$100,00</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
</tbody>
</table>
</div>
arrow_right_altDe enlace
| Texto | Texto | Enlace | Texto | Texto |
|---|---|---|---|---|
| Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos. | Texto predeterminado | Enlace predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Enlace predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Enlace predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Enlace predeterminado | Texto predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-link">Enlace</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Este un texto de prueba para registrar el alto máximo de la celda y
la cantidad de caracteres permitidos.
</td>
<td>Texto predeterminado</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<a href="#" target="_blank" rel="noreferrer">
Enlace predeterminado
</a>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
</tbody>
</table>
</div>
arrow_right_altDe etiqueta
| Texto | Texto | Texto | Texto | Etiqueta |
|---|---|---|---|---|
| Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos. | Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-tag">Etiqueta</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Este un texto de prueba para registrar el alto máximo de la celda y
la cantidad de caracteres permitidos.
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td><span class="badge badge-default">Texto predeterminado</span></td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td><span class="badge badge-danger">Texto predeterminado</span></td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td><span class="badge badge-info">Texto predeterminado</span></td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td><span class="badge badge-success">Texto predeterminado</span></td>
</tr>
</tbody>
</table>
</div>
arrow_right_altDe botón
| Texto | Texto | Botón | Texto | Texto |
|---|---|---|---|---|
| Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos. | Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-button">Botón</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Este un texto de prueba para registrar el alto máximo de la celda y
la cantidad de caracteres permitidos.
</td>
<td>Texto predeterminado</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<button type="button" class="btn btn-outline-tertiary">Botón</button>
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
</tr>
</tbody>
</table>
</div>
arrow_right_altDe botón con ícono
| Texto | Texto | Texto | Botón de ícono |
|---|---|---|---|
| Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos. | Texto predeterminado | Texto predeterminado | |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| Texto predeterminado | Texto predeterminado | Texto predeterminado | |
| Texto predeterminado | Texto predeterminado | Texto predeterminado |
<div class="responsive-scroll" tabIndex="0">
<table class="table">
<thead>
<tr>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-text">Texto</th>
<th scope="col" class="tb-button">Botón de ícono</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Este un texto de prueba para registrar el alto máximo de la celda y
la cantidad de caracteres permitidos.
</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<div class="actions-table">
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-trash-alt o-icon"></i>
</button>
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-download o-icon"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<div class="actions-table">
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-trash-alt o-icon"></i>
</button>
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-download o-icon"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<div class="actions-table">
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-trash-alt o-icon"></i>
</button>
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-download o-icon"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>Texto predeterminado</td>
<td>
<div class="actions-table">
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-trash-alt o-icon"></i>
</button>
<button type="button" class="btn btn-xs">
<span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
</button>
<button type="button" class="btn btn-xs">
<i class="bx bxs-download o-icon"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>