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:

As a basic form of structure:

To recognize table

It contains a title, the head, body and bottom. The HTML element sequence is correct:

  1. <table>
  2. <caption>
  3. <thead>
  4. <tfoot>
  5. <tbody>

You can also use the<col> And<colgroup> To define the columns of the table or column grouping:

  1. <table>
  2. <caption>
  3. <colgroup>
  4. <col>
  5. <thead>
  6. <tfoot>
  7. <tbody>

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:

To recognize table

Tips on the table

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