The community is working on translating this tutorial into Chinese, 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".
If you are fluent in Chinese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Chinese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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