How to top, left justify text in a <td> cell that spans multiple rows
I have the following html code:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td rowspan="2">Save a lot</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
Using CSS styling or another method, can I make the text "Save a lot" top, left justified?
Solution 1:
td[rowspan] {
vertical-align: top;
text-align: left;
}
See: CSS attribute selectors.
Solution 2:
<td rowspan="2" style="text-align:left;vertical-align:top;padding:0">Save a lot</td>
That should do it.
Solution 3:
try this
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td valign="top">January</td>
<td valign="bottom">$100</td>
</tr>
</table>
<p><b>Note:</b> The valign attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>use valign="top" for td style