How to Align Text in an HTML Table

Save

An HTML table allows you to arrange text, images and other elements in your Web page into rows and columns. Each section of the table is called a cell, and is defined with the "<td>" tag. The text in each cell can be arranged both horizontally and vertically. The "align" attribute lets you align the text horizontally to the left, center or right within the cell. The "valign" attribute allows you to align the text vertically to the top, middle or bottom of the cell.

Things You'll Need

  • Text Editor
  • Open a blank text document in any text editor such as Notepad.

  • Start the HTML document with the following code:
    <html>
    <body>

  • Type the line "<table>" to define the table.

  • Type the line "<tr>" to create the first row.

  • Define a table cell with the text aligned to the left by typing <td align="left"> Left </td>.

  • Create a table cell with the text aligned to the center by typing <td align="center"> Center</td>.

  • Define a table cell with the text aligned to the right by entering <td align="right"> Right</td>.

  • Type </tr> to end the first row.

  • Type the line "<tr>" to begin the second row.

  • Define a table cell with the text aligned to the top of the cell by typing <td valign="top"> Top </td>.

  • Create a table cell with the text aligned to the middle of the cell by typing <td valign="middle"> Middle</td>.

  • Insert a table cell with the text aligned to the bottom of the cell by entering <td valign="bottom"> Bottom</td>.

  • Type the line "</tr>" to end the second row.

  • Type the following code to close the table and complete the HTML document:
    </table>
    </body>
    </html>

References

  • Photo Credit Ciaran Griffin/Lifesize/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!