My HTML page has a layout where most of the content needs to be centered, but within a specific table, I require cells to have different alignments - some left-aligned, some right-aligned, and one center-aligned. The code below demonstrates what I am trying to achieve:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.contentWrapper {
width: 1000px;
border: 1px solid black;
margin: auto;
}
.centerAligned {
text-align: center;
}
.myTable td {
width: 200px;
text-align: left;
}
.myTable td.label {
text-align: right;
}
</style>
</head>
<body>
<div class="contentWrapper centerAligned">
<p>A label for this table...</p>
<table class="myTable" border="1" align="center">
<tr>
<td class="label">Label 1 (Right Aligned)</td>
<td>Value 1 (Left Aligned)</td>
<td class="label">Label 2 (Right Aligned)</td>
<td>Value 2 (Left Aligned)</td>
</tr>
<tr>
<td class="label">Label 3 (Right Aligned)</td>
<td>Value 3 (Left Aligned)</td>
<td class="label">Label 4 (Right Aligned)</td>
<td>Value 4 (Left Aligned)</td>
</tr>
<tr>
<td colspan="4" class="centerAligned">
<input type="button" value="Push Me!">
</td>
</tr>
</table>
<p>Some more content...</p>
</div>
</body>
</html>
I am looking for a way to style these table cells without assigning a class to each td element individually. Is there a cleaner solution to achieve the desired alignment effect?
Thank you!