https://i.sstatic.net/qJwvE.png
Hello there,
I am currently working with HTML/CSS and I have managed to center a table on my page using the CSS class
.tablecenter { margin-left:auto; margin-right:auto; }
Following the table, I have placed a button:
<input type = "button" value = "Create Listening GIFT" style="???">
However, as shown in the image, the button is aligned directly to the left.
What I aim for: My goal is to position the button starting from where the first column of the table begins. Additionally, when resizing the browser window, causing changes in the left margin of the table, I want the button to move along with the table adjusting its left margin accordingly. In simpler terms, regardless of how the browser window size changes, I want the button to always be right below the table.
How can I achieve this?
CODE:
<div>
<table class = "tablecenter">
<thead>
<tr>
<th style="height:80px">
<span class="tableheader">Listening - Part 1</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 2</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 3</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td id = "col1">
<label> <span class = "spc7">Speaker A:</span>
<select name = "speakerA">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<!-- Other data omitted for brevity -->
</td>
</tr>
</tbody>
</table>
<br>
<input type = "button" value = "Create Listening GIFT">
</div>