I have created a table within a box on my webpage. The default setting centers the table inside the box, but I want it to align with the bottom border of the box instead. Each row in the table contains two cells, each cell displaying a picture that I would like to touch the bottom border.
<html>
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box1">
<table width="614" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td>
<img src="TL.png">
</td>
<td width="1" class="vertical"></td>
<td>
<img src="TR.png">
</td>
</tr>
</table>
</div>
</body>
.box1{
width: 614px;
margin: 0px;
position:absolute;
border: 1px solid #d0d0d0;
padding: 20px;
border-radius: 20px 20px 20px 20px;
overflow: auto;}
.vertical{
border-right: 1px solid #d0d0d0;
width: 0px;
height: 250px;
float: left;
box-shadow: 1px 1px 0px #ffffff;}
Could someone please help me understand how to achieve this?