I'm trying to figure out how to move a cell to the left on HTML table. I want to use less cells in the last row and it's on the right by default.
I have this table for example:
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>this</td>
<td>right</td>
</tr>
</table>
I'm trying to move the "this" and "right" cells to the opposite side. I'm looking for a way with less as possible css.. preferred HTML only.
Update: I wasn't looking for answers about text/value align. colspan
solves it somehow but still, won't call it a perfect solution.
The td
should span two columns by using the attribute colspan="2"
, and align the text to the right:
.alignRight {
text-align: right;
}
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>this</td>
<td colspan="2" class="alignRight">right</td>
</tr>
</table>
Another, html only, option is to use colspan="2"
on the "this" cell:
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td colspan="2">this</td>
<td>right</td>
</tr>
</table>
you can only add align="right"
attribute
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>this</td>
<td colspan="2" align="right">right</td>
</tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With