I want to align the text in a <td> to the top

Deep dive into perfect alignment

CSS classes over inline styles

The fast answer above is your quickest route to a solution, but it may not be the most maintainable. For a neater, more reusable solution, consider implementing this styling via a CSS class:

<!-- In your HTML -->
<td class="text-at-top">Your top-aligned text</td>


/* In your CSS file. Remember, cooler than inline */
.text-at-top {
  vertical-align: top;
}


The crucial role of table and cell dimensions

To have greater control over the layout and prevent any layout surprises, it's best to give your <table> and <td> elements defined dimensions:

table {
  width: 100%; /* Or a fixed width */
}

td {
  width: 25%; /* Or a fixed width */
  /* Stylin' and profilin'... at the top */
  vertical-align: top;
}


valign: The HTML legacy attribute

If you're bold enough to dabble into old-school HTML, valign="top" also brings about top alignment:

<td valign="top">Dusty but it gets the job done!</td>


Heads up: Webmasters generally favour CSS over these old-school HTML attributes due to standards compliance and damn sexy cross-browser consistency.

Testing across different browsers

For the final touch, ensure your layout looks dapper across various browsers. Rendering can differ per browser as they each have their unique sense of style. Use those trusty developer tools for real-time style tweaks.

The power within: additional styling options

For advanced texture and enhanced control over the look and feel, consider slipping a <p> paragraph tag inside your <td> for that extra padding and text property finesse that impacts alignment:

<td>
  <p class="content">Well-aligned and looking good</p>
</td>


.content {
  margin: 0; /* For bosses only */
  padding-top: 10px; /* Let's give it some room to breathe */
}


Masterclass: advanced CSS alignment

• Dabble into the text-align property for an impressive double whammy of horizontal and vertical alignment, giving a laser-sharp top-left alignment.
• Fear too much content might spoil your layout? Implement CSS properties like max-height, max-width, and overflow for a serene peace of mind.
• Mix up your vertical placement strategy with vertical-align: baseline;; an ideal alternative for aligning text in multi-content cells.