Overview:
I'm trying to get 2 tables to be aligned side by side. In another thread I found out that you can do that using display:inline-table or float: left. However when I added these elements to my CSS, nothing happens.
Here is how my code looks at the moment (also, apologies if my code is messy):
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color:#FFFFFF;
}
table {
float: left;
font-family: tahoma, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr:hover {background-color:#FFDB80;}
</style>
</head>
<body>
<table cellpadding="10" cellspacing="0" style="height: 100px; font-family:tahoma;">
<tbody>
<tr>
<td colspan="3" width="700px" valign="center" bgcolor="#192A34" style="color:white;"><font size="4">LIST OF ISBT 128 STANDARDS</font></td>
<td width="100px" valign="center" bgcolor="#192A34" style="color:white;"><font size="2"> 05 Nov 2018</font></td>
</tr>
<tr>
<td width="100px" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Identification</font></td>
<td width="600" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Document Title</font></td>
<td width="100" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Active Version</font></td>
<td valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Date Issued</font></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><font size="2">ST-001</font></td>
<td><font size="2">ISBT 128 Standard Technical Specification</font></td>
<td><font size="2">5.10.0</font></td>
<td><font size="2"> Jan 2019</font></td>
</tr>
</tbody>
</table>
<table cellpadding="10" cellspacing="0" style="height: 100px; font-family:tahoma;">
<tbody>
<tr>
<td colspan="3" width="700px" valign="center" bgcolor="#192A34" style="color:white;"><font size="4">LIST OF ISBT 128 TECHNICAL BULLETINS</font></td>
<td width="100px" valign="center" bgcolor="#192A34" style="color:white;"><font size="2"> 05 Nov 2018</font></td>
</tr>
<tr>
<td width="100px" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Identification</font></td>
<td width="600" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Document Title</font></td>
<td width="100" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Active Version</font></td>
<td valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Date Issued</font></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><font size="2">TB-001</font></td>
<td><font size="2">Implementing ISBT 128: Guidance on Handling non-ISBT 128 Labeled Collections</font></td>
<td><font size="2">5.10.0</font></td>
<td><font size="2"> Jan 2019</font></td>
</tr>
</tbody>
</table>
</body>
</html>
I suspect it has something to do with a lot of the td width elements and other html elements I injected into the table. I'm still a beginner so any suggestions are welcome to clean up the code.
You have your width set on the tables as 100% so each of them is taking up the full width of the browser and they can't fit side by side. Reduce that to 50% and you'll see that works.
Note: <font>, valign and bgcolor have been obsolete for many years. Do not use them.