In this video, we're going to talk about how to use the column span element. As the name suggests, it'll allow us to have data that spans across different columns.

If you see our existing table, there is no heading for our "edit/delete" option, and this is kind of makes the table look incomplete. Let's fix that.

Go to your HTML file, and under the <th> tags, add one more table header. If you add an empty one, there'll be an empty header, which is ok. But, what we need is another one.
So, if you want to do it manually, add two empty <th> tags, and this will complete the table.

<tr>
  <th>Name</th>
  <th>Average</th>
  <th>HRs</th>
  <th>RBIs</th>
  <th></th>
  <th></th>
</tr>

A better way is to use the column span element. The code for that is:

 <th colspan='2'></th> 

This will create two columns, like this:

I think this is a lot cleaner way to implement.

One more thing we need is totals, and this is a fairly common thing to have. In fact, it can be particularly relevant for financial data. You can implement this too, using colspan.

Let's now create a long column for the total, and for that, the code is:

<tr>
  <td colspan = '6'>Totals...</td>
</tr>

This code should give a long total column, like this:

This way, you'll have complete control over your table. You don't have to feel restricted while using data, as you can even use an entire row to display a specific information. For example, you can have just the name of the player, and can combine the other rows together to display any information, like this:

The corresponding code is:

<tr>
  <td>Player XYZ</td>
  <td colspan="5">Did not play this year</td>
</tr>

This is a much better way of displaying the information than simply putting a value of zero in every column. In this sense, colspan gives you a ton of flexibility.