The community is working on translating this tutorial into Spanish, 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 Spanish, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Spanish 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!
Thead & tbody
If you want, you can leave your tables like this, but if you appreciate content that are highly semantically structured I am glad to introduce you to the <thead> element. The <thead> element structures the headings in your table and this tells browsers what e.g. each column contains. The <tbody> element structures all of the content, so that the browser knows what the actual content of the table is. Using the same example as before, the <thead> and the <tbody> elements are to b used like this:
<table border="1" width="100%"> <thead> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> <td>Row 2, cell 3</td> </tr> </thead> <tbody> <tr> <td>Row 2, cell 1</td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <tr> <td>Row 3, cell 1</td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td>Row 4, cell 1</td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </tbody> </table>
Additionally, there is one more element I would like to introduce to you – the <th> element. This tag, which stands for table cell heading, is to be used instead of the <td> element when the content of the cell is a heading instead of actual cell data.
This means that it is the obvious choice inside the <thead> element (which should contain e.g. the first row of your table) but you can also use it for the very first column to indicate the headings - table row headers.
Let’s look at an example – it is very similar to the previous but I have used meaningful content to make clear to you how to use the <th> element.
<table border="1" width="100%"> <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>
As you probably notice when you try out the examples yourself, you cannot see any difference. This is because the thead, tbody, and the tableheadings only add semmantic value. But you can always use CSS to style your table and then these elements actually make the styling easier!