<table class="table">

<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>

<div class="vh-100 d-flex justify-content-center align-items-center">

<div class="col-md-6">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Created_At</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>jhon</td>
<td>Jon@gmail.com</td>
<td>10/10/1995</td>
<td><button class="btn btn-sm
btn-primary">Edit</button></td>
<td><button class="btn btn-sm
btn-danger">Delete</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>mark</td>
<td>mark@gmail.com</td>
<td>10/10/1996</td>
<td><button class="btn btn-sm
btn-primary">Edit</button></td>
<td><button class="btn btn-sm
btn-danger">Delete</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Raj</td>
<td>raj@gmail.com</td>
<td>10/10/1997</td>
<td><button class="btn btn-sm
btn-primary">Edit</button></td>
<td><button class="btn btn-sm
btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
 </div>

TABELA 2

<div class="vh-100 d-flex justify-content-center align-items-center">

<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Created_At</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>jhon</td>
<td>Jon@gmail.com</td>
<td>10/10/1995</td>
<td><button class="btn btn-sm btn-primary"><i class="bi
bi-pencil-square"></i></button></td>
<td><button class="btn btn-sm btn-danger"><i class="bi
bi-trash3-fill"></i></button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>mark</td>
<td>mark@gmail.com</td>
<td>10/10/1996</td>
<td><button class="btn btn-sm btn-primary"><i class="bi
bi-pencil-square"></i></button></td>
<td><button class="btn btn-sm btn-danger"><i class="bi
bi-trash3-fill"></i></button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Raj</td>
<td>raj@gmail.com</td>
<td>10/10/1997</td>
<td><button class="btn btn-sm btn-primary"><i class="bi
bi-pencil-square"></i></button></td>
<td><button class="btn btn-sm btn-danger"><i class="bi
bi-trash3-fill"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>

<!-- Footer -->

<footer class="text-center text-lg-start bg-light text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4
border-bottom">
 <!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->

<!-- Right -->

<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->

<!-- Section: Links -->

<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content.
Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->

<!-- Grid column -->

<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
 <p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->

<!-- Grid column -->

<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->

<!-- Grid column -->

<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->

<!-- Copyright -->

<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright:
<a class="text-reset fw-bold"
href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->

A COR

<!-- Footer -->

<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-facebook-f"></i
></a>

<!-- Twitter -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-twitter"></i
></a>

<!-- Google -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-google"></i
></a>

<!-- Instagram -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-instagram"></i
></a>

<!-- Linkedin -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-linkedin-in"></i
></a>

<!-- Github -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-github"></i
></a>
</section>
<!-- Section: Social media -->

<!-- Section: Form -->

<section class="">
<form action="">
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-auto">
<p class="pt-2">
<strong>Sign up for our newsletter</strong>
</p>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-md-5 col-12">
<!-- Email input -->
 <div class="form-outline form-white mb-4">
<input type="email" id="form5Example21" class="form-control" />
<label class="form-label" for="form5Example21">Email address</label>
</div>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-auto">
<!-- Submit button -->
<button type="submit" class="btn btn-outline-light mb-4">
Subscribe
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</form>
</section>
<!-- Section: Form -->

<!-- Section: Text -->

<section class="mb-4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt distinctio
earum
repellat quaerat voluptatibus placeat nam, commodi optio pariatur est quia
magnam
eum harum corrupti dicta, aliquam sequi voluptate quas.
</p>
</section>
<!-- Section: Text -->

<!-- Section: Links -->

<section class="">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
 </div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!-- Section: Links -->
</div>
<!-- Grid container -->

<!-- Copyright -->

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->

BackGrand-color:
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

Text-Color:
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Links de alerta:
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>