Attribute of
<td>
What does <td align=""> do?
Was used to specify the alignment of the contents of a single table data cell. This attribute has been deprecated. Use CSS to control alignment of the contents of a table data cell.

How to Align the Contents of a Table Cell

This deprecated attribute was once used to center the contents of a table data cell. Sounds easy enough, but image if you were working with a large HTML table and wanted to quickly change the alignment of every <td> element. Suddenly that attribute doesn't seem like such a good idea. Whether you like the attribute or not, it's been deprecated in favor of CSS. Let's take a look at how we would use CSS to accomplish the same effect as the old align attribute. The old way of aligning table cells with align:

<table>   <tr>     <th align="left">Left</th>     <th align="center">Center</th>     <th align="right">Right</th>   </tr>   <tr>     <td align="left">Handed</td>     <td align="center">Fast</td>     <td align="right">Handed</td>   </tr>   <tr>     <td align="left">First base</td>     <td align="center">Center field</td>     <td align="right">Catcher</td>   </tr> </table> 

Most browsers still handle the align attribute just fine. So this table should show up just as we expect it.

Left Center Right
Handed Fast Handed
First base Center field Catcher

However, with careful use of CSS selectors we can craft a table layout that can be quickly modified if we change our minds about alignment. Let's see how we might do that.

<style> .baseball th:nth-child(1), .baseball td:nth-child(1) {   text-align: left; } .baseball th:nth-child(2), .baseball td:nth-child(2) {   text-align: center; } .baseball th:nth-child(3), .baseball td:nth-child(3) {   text-align: right; } </style> <table class="baseball">   <tr>     <th>Left</th>     <th>Center</th>     <th>Right</th>   </tr>   <tr>     <td>Handed</td>     <td>Fast</td>     <td>Handed</td>   </tr>   <tr>     <td>First base</td>     <td>Center field</td>     <td>Catcher</td>   </tr> </table> 

As you can see, we've done away with all of the align attributes. Instead, we've added a class to the parent table, and we're using that class to target the <th> and <td> elements in this table. We're using the nth-child() selector to target the first, second, and third element of each row individually. This allows us to apply a different alignment to each table column. Here's how this all shows up when we render it in a browser:

Left Center Right
Handed Fast Handed
First base Center field Catcher

The awesome thing about CSS is that we can change the alignment of every cell in this table just by switching the values we added to our CSS. So, how about the CSS below? How will the table now show up?

.baseball th:nth-child(1), .baseball td:nth-child(1) {   text-align: center; } .baseball th:nth-child(2), .baseball td:nth-child(2) {   text-align: right; } .baseball th:nth-child(3), .baseball td:nth-child(3) {   text-align: left; } 

Let's see what that looks like in the browser:

Left Center Right
Handed Fast Handed
First base Center field Catcher

That's the beauty of using CSS rather than HTML attributes to style web page content. So even though the align attribute is out, don't despair! Just learn CSS!