Issue
How can I align the tables vertically ?
so that
Number 546
Lottery 1
aligns under the column Linked Element
Number 547
Lottery 2
falls under the column Linked Element1
Number 548
Lottery 3
falls under the column Linked Element2
Picture for reference. Turn it for the correct view.
https://onecompiler.com/html/3zyvupx94
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</=h ead>
<body>
<br>
<html>
<body>
<br><br><br>
<table width="300" table-layout:fixed border="1">
<tr>
<td>
<table width="300" table-layout=fixed border="0" rules="none">
<tr> Linked Element</tr>
<tr>
<td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
</tr>
<tr>
<td> 546 Lottery 1</td>
<tr>
</table>
</td>
<br>
<br>
<td>
<table width="300" table-layout=fixed border="0" rules="none">
<tr> Linked Element1</tr>
<tr>
<td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
</tr>
<tr>
<td> 547 Lottery 1</td>
<tr>
</table>
</td>
<br>
<br>
<td>
<table width="300" table-layout=fixed border="0" rules="none">
<tr> Linked Element2</tr>
<tr>
<td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
</tr>
<tr>
<td> 548 Lottery 1</td>
<tr>
</table>
</td>
<br>
<br>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> Number 546</td>
</tr>
<tr>
<td> Lottery 1</td>
</tr>
</tbody>
</table>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> Number 547</td>
</tr>
<tr>
<td> Lottery 1</td>
</tr>
</tbody>
</table>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> Number 548</td>
</tr>
<tr>
<td> Lottery 1</td>
</tr>
</tbody>
</table>
</tr>
</table>
</body>
</html>Solution
You can put the lower three tables into table cells that are in a row which still belongs to the "overall table". To create the vertical space, use another <tr> in between, with just one <td> spanning the whole row which has a defined height (adjust value as needed) and border: none:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</=h ead>
<body>
<br>
<html>
<body>
<br><br><br>
<table width="300" table-layout:fixed border="1">
<tr>
<td>
<table width="300" table-layout=fixed border="0" rules="none">
<tr> Linked Element</tr>
<tr>
<td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
</tr>
<tr>
<td> 546 Lottery 1</td>
<tr>
</table>
</td>
<td>
<table width="300" table-layout=fixed border="0" rules="none">
<tr> Linked Element1</tr>
<tr>
<td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
</tr>
<tr>
<td> 547 Lottery 1</td>
<tr>
</table>
</td>
<td>
<table width="300" table-layout=fixed border="0" rules="none">
<tr> Linked Element2</tr>
<tr>
<td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
</tr>
<tr>
<td> 548 Lottery 1</td>
<tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="height:30px;border:none"></td>
</tr>
<tr>
<td>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> Number 546</td>
</tr>
<tr>
<td> Lottery 1</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> Number 547</td>
</tr>
<tr>
<td> Lottery 1</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> Number 548</td>
</tr>
<tr>
<td> Lottery 1</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>Answered By - Johannes
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.