In case the title of this article is confusing, what I’m trying to show is how to use CSS to change only the style of a particular column of an HTML table… so, for example, how to center-align the contents of the second table column.
Often you’ll find that the simplest solution to applying styling to data inside of tables is to use CSS styling. Obviously, you’ll want to maintain that styling from a single point (ie: in the style tag at the page header) rather than applying the style individually to each of your table cells.
Simple Example of Adding a Style to the Second Column of an HTML Table
For example, using the following CSS at the page header level you can make sure that the contents of the second column in your table will be right aligned.
<style>
table tr td:nth-child(2)
{
text-align:center;
}
</style>
Note that this syntax is not zero-based, so your first column can be accessed using the number 1.
Basically what this css syntax is saying is that within the table elements of the page, look at each tr element and get the second td child element of each. If you want, you can also drop the tr reference and the code will work just fine, but I find that including the tr makes the code much more readable/maintainable.
table tr td:nth-child(2)
Styling the Contents of a Table Column
Addressing elements inside each column is just as straightforward. For example to bold each hyperlink in the second column of your HTML table would be done like this:
<style>
table tr td:nth-child(2) a
{
font-weight:bold;
}
</style>
Note that this only affects hyperlinks in the second table column… all other hyperlinks are unaffected. Pretty cool, right?
In some older browsers (for example Internet Explorer 9 and below) this syntax wasn’t possible, but these browsers are reasonably obsolete by now so this shouldn’t be too big a worry going forward.
Working Example Page
Here is a fully functional example page of an HTML table with three columns, and the hyperlinks in the second column centered and bolded:
<!DOCTYPE html>
<html>
<head runat="server">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test Page</title>
<style>
table tr td:nth-child(2)
{
text-align:center;
}
table tr td:nth-child(2) a
{
font-weight:bold;
}
</style>
</head>
<body>
<table>
<tr>
<th>Property</th><th>User Name</th><th>Eye Color</td>
</tr>
<tr>
<td>name:</td><td>fred</td><td>blue</td>
</tr>
<tr>
<td>name:</td><td><a href="#">Joe</a></td><td>brown</td>
</tr>
<tr>
<td>name:</td><td>Sam</td><td>brown</td>
</tr>
</table>
</body>
</html>
Justin Cooney 