Rediscover the form HTML [turned]
According to some recent after my practice as well as in and some readers to communicate using the problem about HTML form, decided to write this article. In general, I noticed the misleading information, they have a First impressions are strongest aversion to the use of table. The fact that many people will say "I see should never use form", but this is absolutely the wrong! This suggestion is to use HTML form to define Webpage layout form, but in the arrangement of data information conveniently and column is very perfect, and if you have to display tabular data on a page, you have to use them! Why not? However, in this case, some people disregard for some HTML tags table exists and does not know how to use them properly.
HTML has 10 forms related tags. The following is a list with brief, but first of all, the document to be correctly defined in HTML 4.01/XHTML 1 or HTML 5:
- <caption> The definition of the table header(4, 5)
- <col> Defined for the column property table(4, 5)
- <colgroup> The group definition table columns(4, 5)
- <table> Defines a table(4, 5)
- <tbody> Defines a table body(4, 5)
- <td> The definition of a cell (4, 5)
- <tfoot> Table table note (bottom)(4, 5)
- <th> Defines a table header (4, 5)
- <thead> Defines a table header(4, 5)
- <tr> Defines a table row(4, 5)
As a basic form of structure:
It contains a title, the head, body and bottom. The HTML element sequence is correct:
You can also use the<col> And<colgroup> To define the columns of the table or column grouping:
The following is a correct form structure case:
<table border="1"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table>
In the browser, the results are shown below:
Tips on the table
- According to the interpretation and use of W3Schools, in a table definition, <tfoot>Element must appear in the<tbody>Before, In this way, the browser can receive all the data presented before the table note. In addition, if not this order, willCan'tBy W3C HTML4 and XHTML verification, no matter what kind of DTD you declare. (more).
- In HTML 4.01, formalignAndbgcolorAttribute is deprecated in HTML, so there is no longer any table 5 attributes are supported (in fact, in the XHTML 1 Strict DTD does not support the "align" and "bgcolor" attribute),
- All major browsers support<colgroup> Labels, span and width properties, Chrome and Safari but Firefox only supports the colgroup elements,
- CSS empty-cells:show|hide can be set to null cell whether to display the border. Note, thisNeed to be arranged in table but not in td/th. Can easily meet the problems in IE6,
- Frame in CSS border-collapse:collapse | separate can set the table will be merged into one.,
- The border-spacing property equivalent in CSS on the table cellspacing property.
In order to realize the separation performance and structure now advocated by the mode of development, front-end observations suggest all related to the presentation layer. The page, are used to control CSS, HTML comes with no attributes to control page performance, and table is one of the most easily overlooked.
For more details about the table can view the W3C documentation: w3 Introduction to tables
Finally, a very simple problem to you, which attributes to the equivalent CSS table cellpadding property?
Posted by Glendon at December 06, 2013 - 12:42 AM