CSS Table Alignment

Horizontal Alignment

CSS Table Alignment: The text-align property sets the horizontal alignment (like left, right, or center) of the substance in <th> or <td>.

By default, the substance of <th> elements are center-aligned and the substance of <td> elements are left-aligned.

To center-align the substance of <td> elements also, use text-align : center:

The text-align Property

This property sets the horizontal alignment (like left, right, or center) of the content in th or td.

Firstname Lastname Savings
Sohail Khan $100
Haroon Khan $150
Asad Khan $300
Jawad Khan $250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

To left-align the substance, force the alignment of <th> elements to be left-aligned, with the text-align: left property:

The text-align Property

This property sets the horizontal alignment (like left, right, or center) of the content in th or td.

Firstname Lastname Savings
Sohail Khan $100
Haroon Khan $150
Asad Khan $300
Jawad Khan $250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the substance in <th> or <td>.

By default, the vertical alignment of the substance in a table is middle (for both <th> and <td> elements)

The accompanying example sets the vertical text alignment to bottom for <td> elements:

The vertical-align Property

This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.

Firstname Lastname Savings
Sohail Khan $100
Haroon Khan $150
Asad Khan $300
Jawad Khan $250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>The vertical-align Property</h2>
<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder