How do I make the div inline with td in table? - html

Question

I've got a table and I've put a div inside it but now it's not in line with the td. I've put display inline block on both the td and div but the td only moved up a little bit. But it needs to be inline with the box. How can I fix this??
Here is my HTML code for the table :
#box4 {
height: 200px;
width: 300px;
background-color: #f2f2f2;
}
th,
td {
padding: 15px;
}
<table style="margin-left:5%;margin-bottom: 10%;">
<tr>
<td>
<h3>Name:</h3>
</td>
<td>Here will be the name of the course.</td>
</tr>
<tr>
<td>
<h3>Description:</h3>
</td>
<td>Here will be the description of the course.</td>
</tr>
<tr>
<td>
<h3>Chapters:</h3>
</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Chapter 1</option>
<option value="saab">Chapter 2</option>
<option value="mercedes">Chapter 3</option>
<option value="audi">Chapter 4</option>
</select>
</td>
</tr>
<tr>
<td style="display: inline-block; position: relative;top:-20%">
<h3>Video:</h3>
</td>
<td>
<div style="display: inline-block;" id="box4"></div>
</td>
</tr>
<tr>
<td>
<h3>Quiz:</h3>
</td>
<td><button>Do quiz</button></td>
</tr>
<tr>
<td>
<h3>Course trial:</h3>
</td>
<td><button>Start trial</button></td>
</tr>
<tr>
<td></td>
<td><button>Community</button></td>
</tr>
</table>
Here is what it looks like

Answer 1

your H3 elements naturally have padding and are pushing them down.
add
h3 {
padding: 0;
}

Answer 2

Try this, a little code added in the CSS file and define a class in the h3 tag
#box4 {
height: 200px;
width: 300px;
background-color: #f2f2f2;
}
.td-video {
margin-top: -5px;
}
th,
td {
padding: 15px;
}
<table style="margin-left:5%;margin-bottom: 10%;">
<tr>
<td>
<h3>Name:</h3>
</td>
<td>Here will be the name of the course.</td>
</tr>
<tr>
<td>
<h3>Description:</h3>
</td>
<td>Here will be the description of the course.</td>
</tr>
<tr>
<td>
<h3>Chapters:</h3>
</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Chapter 1</option>
<option value="saab">Chapter 2</option>
<option value="mercedes">Chapter 3</option>
<option value="audi">Chapter 4</option>
</select>
</td>
</tr>
<tr>
<td style="display: inline-block; position: relative;">
<h3 class="td-video">Video:</h3>
</td>
<td>
<div style="display: inline-block;" id="box4"></div>
</td>
</tr>
<tr>
<td>
<h3>Quiz:</h3>
</td>
<td><button>Do quiz</button></td>
</tr>
<tr>
<td>
<h3>Course trial:</h3>
</td>
<td><button>Start trial</button></td>
</tr>
<tr>
<td></td>
<td><button>Community</button></td>
</tr>
</table>

Answer 3

Change in line css stlye from top: 19% to margin-top: -19px.
#box4 {
height: 200px;
width: 300px;
background-color: #f2f2f2;
}
th,
td {
padding: 15px;
}
<table style="margin-left:5%;margin-bottom: 10%;">
<tr>
<td>
<h3>Name:</h3>
</td>
<td>Here will be the name of the course.</td>
</tr>
<tr>
<td>
<h3>Description:</h3>
</td>
<td>Here will be the description of the course.</td>
</tr>
<tr>
<td>
<h3>Chapters:</h3>
</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Chapter 1</option>
<option value="saab">Chapter 2</option>
<option value="mercedes">Chapter 3</option>
<option value="audi">Chapter 4</option>
</select>
</td>
</tr>
<tr>
<td style="display: inline-block; position: relative;margin-top:-20px">
<h3>Video:</h3>
</td>
<td>
<div style="display: inline-block;" id="box4"></div>
</td>
</tr>
<tr>
<td>
<h3>Quiz:</h3>
</td>
<td><button>Do quiz</button></td>
</tr>
<tr>
<td>
<h3>Course trial:</h3>
</td>
<td><button>Start trial</button></td>
</tr>
<tr>
<td></td>
<td><button>Community</button></td>
</tr>
</table>