How to Get Text in a HTML Table Cell to Vertically Align to the Center

HyperText Markup Language (HTML) tables display your Web page content in a ledger style format. This format is ideal for features such as an Internet calendar or phone directory, but the content is often unattractive because it is not aligned and is pushed up against the boundary lines of the table cell. Fortunately, Cascading Style Sheets (CSS) work with your HTML markup to fix this problem. Apply a CSS style that vertically centers the text in your table.

Instructions

1. Start the text editor program that comes with your computer and open the HTML document that contains the table.

2. Place your cursor inside the first "<td>" table data tag that precedes the text that you want to align. The table data elements control the cells of your HTML table.

3. Type "style=" and enter "vertical-align:middle" after the equal sign. To illustrate:

   <td style="vertical-align:middle">This is the text that you are aligning.</td>

4. Save your file. The content in the table cell is now vertically centered.

References

• W3Schools: HTML <td> Tag
• W3Schools: CSS How To
• W3Schools: CSS Vertical-Align Property

Resources

• World Wide Web Consortium (W3C): Tables in HTML Documents
• Quackit: HTML Table Tutorial
• W3Schools: HTML Tables