Now that you we have used all the right semantics you might want to change the HTML Column Width of each column – as of right now, each column is 33% wide. Let’s say we want the first column to be 40% of the table and the two remaning columns to be 30% (as 40% + 30% +30% = 100%).
In order to do this, we use the <col> element. This element is to be placed between the <table> tag and the <thead> tag and we use the style attribute to define the width of the columns. The <col> element is a self-closing element and you need one for every columns of you table. Let’s have an example:
This way, you can control how wide the columns of the table should be. HTML Column Width I have used the style attribute and the value “width:40%” as an example, but ideally, you should have this in your stylesheet file, as this has everything to do with looks and nothing with the semantics.
I you did use your stylesheet you could create three classes where you defined the width of each column, and then your markup would look something like this:
What you have learned HTML Column Width
- Every table starts and ends with the
- You use the attributes colspan and rowspan to merge cells
- A table is divided into a head (
<thead>element) and a body (the
- Inside the head and body, the table is divided into rows using the
- You don’t define columns in HTML tables, but instead, you use the
<td>element to define the individual data cells
- Whenever you need to define a heading cell, use the <th> element instead of the