How can i make div in bottom of table td? - Html

SonaRijesh
March 8, 2023
186 views
1 vote
2 Answers

How can make a div in bottom of td of table in html?

<table style="width:100px;" >
    <thead class="text-center">
        <th>Name</th>
        <th>Marks</th>
    </thead>
    <tbody>
    <tr>
        <td>Nikhil</td>
        <td>60<br>Average</td>
    </tr>
    <tr>
        <td>Akhil</td>
        <td>90<br>Excellent</td>
    </tr>
    <tr>
        <td>Alan</td>
        <td>40<br>Poor</td>
    </tr>
    </tbody>
</table>

For reference i have attached image.

TIA

Answers

Update

Semantically, I do not recommend mixing two values in one cell. However, you can embed your two values using the span tag on which you simply apply the display:block property. Then you apply the vertical-align:top property on both td.

.name, 
.rating {
  vertical-align: top;
}

.rating span {
  display:block;
  text-align:right;
}

.rating .excellent {
  color: green;

}

.rating .average {
  color: orange;
}

.rating .poor {
  color: red;
}

<table style="width:100px;" >
    <thead class="text-center">
        <th>Name</th>
        <th>Marks</th>
    </thead>
    <tbody>
    <tr>
        <td class="name">Nikhil</td>
        <td class="rating">
          <span>60</span>
          <span class="average">Average</span>
        </td>
    </tr>
    <tr>
        <td class="name">Akhil</td>
        <td class="rating">
          <span>90</span>
          <span class="excellent">Excellent</span>
        </td>
    </tr>
    <tr>
        <td class="name">Alan</td>
        <td class="rating">
          <span>40</span>
          <span class="poor">Poor</span>
        </td>
    </tr>
    </tbody>
</table>

You don’t need a div, you could just use a tfoot, which is used to define a set of rows summarizing the columns of the table:

<table style="width:100px;">
  <thead class="text-center">
    <th>Name</th>
    <th>Marks</th>
  </thead>
  <tbody>
    <tr>
      <td>Nikhil</td>
      <td>60</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Average</td>
    </tr>
  </tfoot>
</table>

In addition, you could also expand the average row with the colspan attribute:

<table style="width:100px;">
  <thead class="text-center">
    <th>Name</th>
    <th>Marks</th>
  </thead>
  <tbody>
    <tr>
      <td>Nikhil</td>
      <td>60</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" style="text-align: right;">Average</td>
    </tr>
  </tfoot>
</table>

<table style="width:100px;" >
    <thead class="text-center">
        <th>Name</th>
        <th>Marks</th>
    </thead>
    <tbody>
    <tr>
        <td>Nikhil</td>
        <td>60</td>
    </tr>
    <tr>
        <td>Danixal</td>
        <td>71</td>
    </tr>
    <tr>
        <td>Clarke</td>
        <td>39</td>
    </tr>
    </tbody>
    <tfoot>
        <td></td>
        <td><div>Average</div></td>
    </tfoot>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

How can i make div in bottom of table td? – Html

Answers