How to Align Text in an HTML Table
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.
Instructions
-
-
1
Open a blank text document in any text editor such as Notepad.
-
2
Start the HTML document with the following code:
<html>
<body> -
-
3
Type the line "<table>" to define the table.
-
4
Type the line "<tr>" to create the first row.
-
5
Define a table cell with the text aligned to the left by typing <td align="left"> Left </td>.
-
6
Create a table cell with the text aligned to the center by typing <td align="center"> Center</td>.
-
7
Define a table cell with the text aligned to the right by entering <td align="right"> Right</td>.
-
8
Type </tr> to end the first row.
-
9
Type the line "<tr>" to begin the second row.
-
10
Define a table cell with the text aligned to the top of the cell by typing <td valign="top"> Top </td>.
-
11
Create a table cell with the text aligned to the middle of the cell by typing <td valign="middle"> Middle</td>.
-
12
Insert a table cell with the text aligned to the bottom of the cell by entering <td valign="bottom"> Bottom</td>.
-
13
Type the line "</tr>" to end the second row.
-
14
Type the following code to close the table and complete the HTML document:
</table>
</body>
</html>
-
1
References
- Photo Credit Ciaran Griffin/Lifesize/Getty Images