Image not staying in table container - html

Question

not in container
I am trying to get the picture to stay into the left column but it doesn't seem to stay. As you can see, it hovers over the table. What can I do to make it stay within the table?
<table align="center" style="width:550px" id="table" cellpadding="5">
<tr>
<th style="text-align: left" rowspan="2">
<img src="avi.png" alt="" id="avatar" />
</th>
<th style="text-align: left">
<h1 id="hello">My Resume</h1>
</th>
</tr>
<tr>
<td style="text-align: left">
<p>Hello this is a crazy little test that i am doing to see if this code works</p>
</td>
</tr>
</table>

Answer 1

If you specifically want something like the example you gave, using tables is the old clunky way of doing it. I'd suggest using flexbox, it's a simple way of lining things up and making them look nice.
Here is an example:
body {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.resume {
display: flex;
align-items: center;
justify-content: center;
}
.resume-picture {
border: 10px solid #1976D2;
border-radius: 50%;
background: #f3f2f1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
height: 175px;
}
.resume-content {
padding: 0 15px;
}
.resume-content h2 {
color: #1976D2;
margin-top: 0;
}
.resume-content p {
color: #333;
margin: 0;
}
<div class="resume">
<img class="resume-picture" src="https://avatars2.githubusercontent.com/u/3534427?v=3" />
<div class="resume-content">
<h2>My Resume</h2>
<p>Hello this is a crazy little test that i am doing to see if this code works.
<br>Hello this is a crazy little test that i am doing to see if this code works.
<br>Hello this is a crazy little test that i am doing to see if this code works.</p>
</div>
</div>
I hope this is the sort of thing you are looking for.

Answer 2

Override image on text
<table align="center" style="width:550px;border:1px solid #c2c2c2; position: relative;" id="table" cellpadding="5" border="0">
<tr>
<th style="text-align: left;border-right:1px solid #c2c2c2;min-width:50px;" rowspan="2">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" style="
position: absolute;
bottom: 0;
left: 14px;
top: 33px;
z-index: 2;
opacity: 0.5;" />
</th>
<th style="text-align: left;border-bottom:1px solid #c2c2c2;">
<h1 id="hello">My Resume</h1>
</th>
</tr>
<tr>
<td style="text-align: left">
<p>Hello this is a crazy little test that i am doing to see if this code works</p>
</td>
</tr>
</table>
image in table container update style
<table align="center" style="width:550px;border:1px solid #c2c2c2;" id="table" cellpadding="5" border="0">
<tr>
<th style="text-align: left;border-right:1px solid #c2c2c2;" rowspan="2">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" />
</th>
<th style="text-align: left;border-bottom:1px solid #c2c2c2;">
<h1 id="hello">My Resume</h1>
</th>
</tr>
<tr>
<td style="text-align: left">
<p>Hello this is a crazy little test that i am doing to see if this code works</p>
</td>
</tr>
</table>