I have some code below that I'm working on to achieve a look similar to this image: https://i.sstatic.net/744M7.jpg
One thing I'm struggling with is how to extend the table header all the way to the right. Additionally, I need help adding more space between the bottom border.
If you're feeling lazy, my current code renders like this: https://i.sstatic.net/9VLu1.jpg
font-family:Arial;
font-size:12px;
width:800px;
}
table {
border-style: solid;
border-color: #cfdaf1;
border-width: 1px;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #cfdaf1;
padding: 3px;
}
td {
padding: 10px
}
#headerMenu {
display: inline-block;
height: 125px;
padding: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#contactTable {
display: inline-block;
padding: 3px;
margin-bottom: 1px;
}
#tableHeader {
display: inline-block;
padding: 3px;
margin: 5px;
}
#ul {
list-style: none;
padding: 0px;
}
#ul li:before {
content: '►';
margin: 0 1em;
}<table id="tableHeader" width="100%">
<tr>
<th style="border-bottom: 1px solid black;">Key Skills</th>
</tr>
<tr>
<td>This is a main summary of my skills.</td>
</tr>
<tr>
<td>
<ul id="ul" style="list-style-type: none">
<li>Negotiating (Intermediate)</li>
<li>Access (Beginner)</li>
<li>Accounting (Beginner)</li>
<li>Sales Auditing (Expert)</li>
<li>Invoicing (Intermediate)</li>
</ul>
</td>
</tr>
</table>