Text-Align Class for Inside a Table

Text-align class for inside a table

Bootstrap 3

v3 Text Alignment Docs

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 3 text align example

Bootstrap 4

v4 Text Alignment Docs

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Bootstrap 4 text align example

Bootstrap 5

v5 Text Alignment Docs

text-left has been replaced with text-start,
text-right has been replaced with text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

How to align text inside table thead to center horizontally and vertically

Add the bootstrap class align-middle and text-center to the th elements.

Bootstrap Vertical alignment also Bootstrap Text alignment

th:nth-of-type(1),
th:nth-of-type(4),
th:nth-of-type(5),
th:nth-of-type(8){
  min-width: 150px;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table id="stanari" class="table table-striped table-bordered w-100 animate__animated animate__fadeIn">
    <thead>
        <tr>
            <th class="align-middle text-center">First name and last name of tenants</th>
            <th class="align-middle text-center">Cell phone of tenants</th>
            <th class="align-middle text-center">Apartment address</th>
            <th class="align-middle text-center">Number at the door of the apartment</th>
            <th class="align-middle text-center">Paid deposit in euros</th>
            <th class="align-middle text-center">Date of tenants registration</th>
            <th class="align-middle text-center">Monthly rent in euros</th>
            <th class="align-middle text-center">Is the monthly rent paid</th>
            <th class="align-middle text-center">Payment date</th>
            <th class="align-middle text-center">For month</th>
            <th class="align-middle text-center"></th>
        </tr>
        <tr>
            <td class="align-middle text-center col-3">John and Jane Doe</td>
            <td class="align-middle text-center">555-555-5555</td>
            <td class="align-middle text-center">5555 Someroad streer</td>
            <td class="align-middle text-center">555</td>
            <td class="align-middle text-center">1555 Euro</td>
            <td class="align-middle text-center">5-5-21</td>
            <td class="align-middle text-center">2555 Euro</td>
            <td class="align-middle text-center">Paid in full</td>
            <td class="align-middle text-center">5-1-21</td>
            <td class="align-middle text-center">May</td>
            <td class="align-middle text-center">N/A</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Text align in table [bootstrap]

You can use class="text-right"

More reference https://getbootstrap.com/docs/4.0/utilities/text/

Table: align text by column

You can use the :nth-child(n) CSS selector. This of course becomes a little more difficult if you were to have a cell with a colspan of more than one, but fortunately you don't.

#tb td:nth-child(1) // column 1
#tb td:nth-child(2) // column 2
#tb td:nth-child(3) // column 3

#tb {
    width: 100%;
  border-spacing: 0px;
}

#tb th,
#tb td {
  padding: 12px 0;
  line-height: 0.9;
}

#tb th {
  border-bottom: 1px solid #000;
  text-align: left;
}

#tb td {
  border-bottom: 1px solid #ddd;
}

#tb .tb-last-row {
    border-bottom: none;
}

#tb td:nth-child(1) {
  text-align: center;
}

#tb td:nth-child(2) {
  text-align: center;
}

#tb td:nth-child(3) {
  text-align: center;
}

<!DOCTYPE html>
<html>
<body>

<table id="tb">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td class="tb-last-row">Jill</td>
    <td class="tb-last-row">Smith</td>
    <td class="tb-last-row">50</td>
  </tr>
</table>

</body>
</html>

Bootstrap 4 Table Align Some Text in Top Right of Table Cell

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><table class="table table-striped table-bordered">  <tr>    <td width=20%>SKU:</td>    <td width=80%>PM432523      <span style="float: right;">On Special</span>    </td>  </tr>  <tr>    <td>Supplier:</td>    <td>Acme Meat Inc</td>  </tr></table>

Aligning text in table column group in HTML5

Maybe I should've been more clear on this in the comments, but no, you can't text-align it using col. It doesn't work by spec.

What you could do instead, is use CSS to align the different children of each tr element, as that is somewhat the same thing.

<style>    tr td:nth-child(-n+2) {        text-align: center;    }</style><table>  <colgroup>    <col span="2" style="background-color:red; text-align: center;">    <col style="background-color:yellow">  </colgroup>  <thead>    <tr>      <td>ISBN</td>      <td>Title</td>      <td style="text-align: center;">Price - longer</td>    </tr>  </thead>  <tbody>    <tr>      <td>3476896</td>      <td>My first HTML - long title</td>      <td style="text-align: center;">$53</td>    </tr>    <tr>      <td>5869207</td>      <td>My first CSS</td>      <td style="text-align: center;">$49</td>    </tr>  </tbody></table>

Text-Align Class for Inside a Table