CODEWITHSUNDEEP
htmlcss
Mango
Mango

Reputation: 121

How to get the buttons to the bottom corner of the table in HTML?

Here is what i have been working on:

<table style="width: 100%">
  <tr>
    <td style="width: 50px;height: 300px;">

      <img alt="Basketball" height="687" src="Basketball.jpg" width="1030" /></td>
    <td style="width: 100px;height: 300px;">
      <p style="width: 100%;text-align:justify">Basketball is a limited-contact sport played on a rectangular court.</p>
      <input style="margin-top:-20px" name="JoinUs" type="button" value="Join this club" />
    </td>
  </tr>
</table>

Been trying to get the button to the corner of the table but its too close to the paragraph. Sorry if this is not good enough, still self learning html...

Upvotes: 1

Views: 902

Answers (1)

Ehsan
Ehsan

Reputation: 12951

Only button move to bottom corner:

td:last-child {
    position: relative;
}

input[type="button"] {
    position: absolute;
    bottom: 0;
}


td:last-child {
    position: relative;
}
input[type="button"] {
    position: absolute;
    bottom: 0;
}
<table style="width: 100%">
<tr>
    <td style="width: 50px;height: 300px;">

    <img alt="Basketball" height="687" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" width="1030" /></td>
    <td style="width: 100px;height: 300px;">
        <p style="width: 100%;text-align:justify">Basketball is a limited-contact sport played on a rectangular court.</p>
    <input  name="JoinUs" type="button" value="Join this club" />
    </td>
</tr>
</table>

Paragraph and button move to bottom corner:

td:last-child {
    vertical-align: bottom;
}


td:last-child {
    vertical-align: bottom;
}
<table style="width: 100%">
<tr>
    <td style="width: 50px;height: 300px;">

    <img alt="Basketball" height="687" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" width="1030" /></td>
    <td style="width: 100px;height: 300px;">
        <p style="width: 100%;text-align:justify">Basketball is a limited-contact sport played on a rectangular court.</p>
    <input style="margin-top:-20px" name="JoinUs" type="button" value="Join this club" />
    </td>
</tr>
</table>

Upvotes: 2

Related Questions