What Replaced Td Align After HTML5?: We've Got The Answer (And ...

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn moreAttribute ofDealing With Td Layout Issues In HTML5 - Quick TutorialWhat does What Replaced Td Align After HTML5?: We've Got The Answer (And The Code) 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:

.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;}

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:

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

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!

Adam WoodAdam is a technical writer who specializes in developer documentation and tutorials.