Now that you know how to create a basic HTML table, we're going to see how to customize the style, and we'll start with the headers.

I'm not going to use an external stylesheet for this one, as I want you to see the styling options in the same page. So, let's start with our <style> tag, and use the <th> selector.

We'll add a background color of black and a text color of white.

th {
  background-color: black;
  color: white;
}

Still, it doesn't look so nice because we're using the default values given by HTML. So, let's style the table first. We'll have sans-serif as the font-family, and will give a width of 100%, so it stretches through the entire page, like this:

Next, we're going to use an attribute called border-collapse, that'll make the table tighter and will remove some of the border lines that we saw earlier.

<style>
  table {
    font-family: sans-serif;
    width: 100%;
    border-collapse: collapse;
  }

  th {
    background-color: black;
    color: white;
  }
</style>

The output is:

If you see the default border lines are gone, and that's good!

So, that's how you can style table headings. Play around these attributes a little bit more to get familiar with them.