Prev Next

CSS Table Alignment

Text and content within table cells can be aligned horizontally and vertically to improve readability. Use text-align for horizontal alignment and vertical-align for vertical positioning. Proper alignment helps present data cleanly and guides the eye efficiently.

Key Topics

Horizontal Alignment

text-align: left; (default), center, or right can be applied to th or td elements.

Vertical Alignment

vertical-align: top;, middle;, or bottom; controls cell content’s vertical position. This is useful when cells contain images or multi-line text.

<style>
    th, td {
        border: 1px solid #000;
        vertical-align: middle;
        text-align: center;
        height: 50px;
    }
</style>
<table>
    <tr>
        <th>Centered Text</th>
        <th>Centered Text</th>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

Explanation: Centering content both horizontally and vertically makes data tables appear more orderly and easy to scan.

Key Takeaways

  • Readability: Aligning text improves clarity.
  • Consistency: Apply alignment rules site-wide for a uniform look.
  • Flexibility: Adjust horizontal and vertical alignment to suit different data types.
Prev Next