3

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.

Hakerovsky
  • 93
  • 1
  • 6
  • 18

5 Answers5

5

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>
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
1

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>
ankita patel
  • 4,201
  • 1
  • 13
  • 28
1

Or just insert an empty cell before <td>this</td>

<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></td>
    <td>this</td>
    <td>right</td>
  </tr>
</table>
Gerard
  • 15,418
  • 5
  • 30
  • 52
0

I'm looking for a way with less as possible css.. preferred HTML only.

You can try align attribute of td with colspan.

<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>
Jyothi Babu Araja
  • 10,076
  • 3
  • 31
  • 38
0

<tr> <td colspan="2">this</td> <td align="right">right</td> </tr>

colspan can be used in both cells. This will merge cell into 2.

Rinku Makwana
  • 1
  • 2