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!
Basics of Tables
HTML tables should only be used for rendering data that naturally belongs in a grid. I’m saying this as tables has previously been used for the layout of HTML pages and this has never been the idea. A lot of webdesigners used the tables for the layout, but there are two main reasons not to do it:
- It is semantically incorrect
- Tables are less flexible than e.g. div’s (and other semantic elements)
The elements of tables are pretty comprehensive, but the first you will need to know is the <table> element. This is the first element and defines that the following markup is inside a table.
When you are structuring tables, the HMTL markup is basically structured with row and cells (note, that there are no tags for columns, just rows).
The tag for rows is <tr> (abbreviation for table row) and the tag for each cell is <td> (which stands for table data, and this is where the actual content is.
Before you start writing your markup for the table, you need to know exactly what it should look like – this will make it a lot easier for you. Let’s try and make a really simple table – with three columns and four rows.
<table border="1" width="100%"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> <td>Row 2, cell 3</td> </tr> <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> </table>
As you can see, the <td> tags are nested inside the <tr> tags, and thins means, that every cell in a row must be inside the <tr> element.
And please note, that I have added the attribute border to the <table> tag so that you can actually see the tableborders when you try out the examples, but you should never do this when you are writing your markup – tableborder are a job for CSS!