Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out.
<style type="text/css">
.tftable {
font-size: 12px;
color: #333333;
width: 100%;
border-width: 1px;
border-color: #729ea5;
border-collapse: collapse;
}
.tftable th {
font-size: 12px;
background-color: #acc8cc;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
text-align: left;
}
.tftable tr {
background-color: #d4e3e5;
}
.tftable td {
font-size: 12px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
}
.tftable tr:hover {
background-color: #ffffff;
}
</style>
<table class="tftable" border="1">
<tr><th>Header 1</th></tr>
<tr><td>Row:1 Cell:1</td></tr>
<tr><td>Row:2 Cell:1</td></tr>
<tr><td>Row:3 Cell:1</td></tr>
<tr><td>Row:4 Cell:1</td></tr>
<tr><td>Row:5 Cell:1</td></tr>
<tr><td>Row:6 Cell:1</td></tr>
</table>
Is it possible to include a line break within the header as well? This code snippet did not seem to work:
<tr><th><br />Header 1</th></tr>
Any suggestions or solutions would be greatly appreciated.