CODEWITHSUNDEEP
htmlhtml-table
John
John

Reputation: 451

How to align html table td elements on the opposite (right) end of the screen

I have an image on the upper left of the screen but want to position some text on the evenly opposite side (upper right). But this code positions the subsequent td elements only slightly to the right and a bit lower. Do I need to add an align to the <td> elements?

<table>
  <tr>
    <td><img src="some_img" style='width:50%; height:50%;' />
      <td style="vertical-align:bottom;">t1</td>
  </tr>
  <tr>
    <td></td>
    <td>t2</td>
  </tr>
  <tr>
    <td></td>
    <td>t3</td>
  </tr>
</table>

Upvotes: 1

Views: 2340

Answers (1)

Tamas Szoke
Tamas Szoke

Reputation: 5542

One closing td is missing, other than that you can use the text-align css property to align the items inside the cell.

If I understand correctly, you may want something like this:

.cell{
  width: 50vw;
  background: #ccc;
  text-align: right;
}

.image{
  width:50%;
  height:50%;
  text-align: left;
}
<table>
  <tr>
    <td class="cell image"><img src="some_img"/></td>
    <td class="cell">t1</td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell">t2</td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell">t3</td>
  </tr>
</table>

Upvotes: 1

Related Questions