How to set a table at the bottom of a div - html

Question

I need my table to align at the bottom of my div, I've tried adding to the table's style the attributes : position:absolute;bottom:0px but it changed according to the page and not the div. I posted the full code (with img tag) cus i'm not sure about the influence of other tags.
//HTML
<div>
<img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: absolute" />
<table style="width:100%;height:120px;">
<tr>
<td style="background-color:gray">
</td>
<td style="background-color:green">
</td>
<td style="background-color:yellow">
</td>
<td style="background-color:red">
</td>
<td style="background-color:lime">
</td>
<td style="background-color:maroon">
</td>
</tr>
</table></div>

Answer 1

Your parent "div" and "img" should be declared as "position:relative" in this
case.
here is your solution:
<div style="position: relative;">
<img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: relative;">
<table style="width: 100%; height: 120px;">
<tbody><tr>
<td style="background-color:gray">
</td>
<td style="background-color:green">
</td>
<td style="background-color:yellow">
</td>
<td style="background-color:red">
</td>
<td style="background-color:lime">
</td>
<td style="background-color:maroon">
</td>
</tr>
</tbody></table>
</div>

Answer 2

You can also use CSS Flexbox (check browser support) to vertical align:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
<div class="Aligner">
<div class="Aligner-item Aligner-item--bottom">…</div>
</div>
<style>
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
.Aligner-item--bottom {
align-self: flex-end;
}
<style>