TOC

The community is working on translating this tutorial into Portuguese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Tables:

Changing Column Width

Now that you we have used all the right semantics you might want to change the 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:

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

This way, you can control how wide the columns of the table should be. 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:

<table border="1">
	<col class="column-one">
	<col class="column-two">
	<col class="column-three">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>

What you have learned

  • Every table starts and end with the <table> element
  • You use the attributes colspan and rowspan to merge cells
  • A table is divided into a head (<thead> element) and a body (the <tbody> element)
  • Inside the head and body the table is divided into rows using the <tr> element
  • 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 <td> element
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!