HTML Table Align – A Complete Guide with Examples and Best Practices

Table alignment plays a major role in readability and presentation of data.
Properly aligned tables make information easier to scan, understand, and compare.

You commonly need table alignment when working with:

Student mark sheets
Pricing tables
Reports and dashboards
Admin panels
Data comparison tables

As a beginner, it’s important to know that modern HTML uses CSS for alignment, not old HTML attributes.

Important Beginner Rule

Avoid old HTML attributes like align="center"
Use CSS for table alignment (industry standard)

Types of Alignment in HTML Tables

There are three main types of alignment you should understand:

Aligning the table itself
Aligning text inside table cells
Vertical alignment inside cells

Aligning the Table (Left, Center, Right)

Center Align the Table (Recommended Method)

Complete Example

<table class="center-table">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>90</td>
  </tr>
</table>
<!-- css file -->
.center-table {
  margin: auto;
  border-collapse: collapse;
}

This places the table in the center of the page

Left or Right Align the Table

Aligning Text Inside Table Cells (Horizontal Alignment)

Text inside <th> and <td> can be aligned using text-align.

Center Text in Table Cells

Left or Right Align Text

Example

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>50000</td>
  </tr>
</table>

css

td {
  text-align: center;
}

Vertical Alignment Inside Table Cells

Vertical alignment controls how content is positioned top, middle, or bottom inside a cell.

CSS Vertical Alignment Values

top
middle
bottom

Example

<table>
  <tr>
    <th>Item</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Book</td>
    <td style="height:80px;">Long description text</td>
  </tr>
</table>
<!-- css-->
td {
  vertical-align: middle;
}

Old HTML table Alignment Methods (Do NOT Use)

<table align="center">
<td align="center">

Deprecated
Poor accessibility
Not SEO-friendly

Real-World Example: Aligned Student Table

<table class="student-table">
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Riya</td>
    <td>Math</td>
    <td>95</td>
  </tr>
</table>

css

.student-table {
  margin: auto;
  border-collapse: collapse;
}

.student-table th,
.student-table td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}