This is my code below and I'm trying to make it look like this image: [![enter image description here](https://i.stack.imgur.com/744M7.jpg)](https://i.stack.imgur.com/744M7.jpg)

I'm unsure of how to expand the table header all the way to the right. I also don't know how to add more spacing between the bottom border.

For the lazy my code shows this: [![enter image description here](https://i.stack.imgur.com/9VLu1.jpg)](https://i.stack.imgur.com/9VLu1.jpg)

```css
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;
}
```

```html
<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>
```