How to Align Text Vertically in a Table Column Using CSS

Tables are great for displaying structured data, but sometimes the default alignment doesn’t look quite right — especially when dealing with rows of varying height. If you’re looking to vertically align text within a table column, CSS gives you a few powerful and easy solutions.

In this post, we’ll walk through how to vertically align text in HTML table columns using CSS, with practical examples and layout tips.

---

🔍 The Problem

By default, text in table cells (<td> or <th>) is aligned vertically in the middle in most browsers. However, you might want to align it to the top or bottom depending on your design.

---

✅ Method 1: Using vertical-align Property

This is the most direct and widely supported method.

🔧 CSS Options:

td {
  vertical-align: top;     /* Align to top */
  vertical-align: middle;  /* Align to middle (default) */
  vertical-align: bottom;  /* Align to bottom */
}

---

🧪 Example: Vertical Alignment in Columns

<table border="1" style="width: 100%;">
  <tr>
    <th style="vertical-align: top;">Top Aligned</th>
    <th style="vertical-align: middle;">Middle Aligned</th>
    <th style="vertical-align: bottom;">Bottom Aligned</th>
  </tr>
  <tr>
    <td style="height: 100px;">This text is aligned to the top.</td>
    <td>This text is centered vertically.</td>
    <td>This text is at the bottom.</td>
  </tr>
</table>

✅ You can apply vertical-align via:

• Inline CSS
• Internal styles (<style>)
• External CSS file

---

✅ Method 2: Class-Based Alignment for Table Columns

<style>
  .align-top { vertical-align: top; }
  .align-middle { vertical-align: middle; }
  .align-bottom { vertical-align: bottom; }
</style>

<table border="1">
  <tr>
    <td class="align-top" style="height: 120px;">Top</td>
    <td class="align-middle">Middle</td>
    <td class="align-bottom">Bottom</td>
  </tr>
</table>

✔️ Use this method for cleaner code when aligning multiple cells or columns.

---

🛠 Notes & Tips

• To see vertical alignment clearly, ensure your table rows have height (height: 100px or more).
• vertical-align works on elements inside table, table-cell, and inline-level elements.
• For full-column styling, you can also use <col> and CSS selectors like:

col.col-top {
  vertical-align: top;
}

But support and flexibility may vary.

---

❌ Common Mistakes

Mistake	Why It Fails
Using text-align for vertical	text-align controls horizontal alignment
Forgetting row height	No visible effect if cell height is small
Applying vertical-align on div inside td	Doesn’t work unless the div behaves like a table-cell

---

🔚 Conclusion

Aligning text vertically in a table column using CSS is straightforward with the vertical-align property. Whether you want text at the top, center, or bottom of the cell, a simple line of CSS is all you need.

---

📌 Quick Cheat Sheet

Alignment	CSS Code
Top	vertical-align: top;
Center (default)	vertical-align: middle;
Bottom	vertical-align: bottom;