写在前面，该博客是对黑马前端课程笔记的再整理，方便自己复习回顾，侵删

01 stage front-end basis. Table

The next target HTML

Able to use tables, lists and forms to complete the registration page of the integrated case

You can say what a table is used to do
What I can say to do list
You can say what form to do

In order for us to display the page more tidy, we need to learn three tables (tables, forms, lists)

Form table (will be used)

aims:

understanding:
- You can say what to do table
- The basic structure of a table consisting of
application:
- Write fluent form n rows and n columns
- Can simply merged cell

Form role:

Existence that is reasonable. Now or in the more commonly used as a label in the table, but not for layout, common display, display tabular data.

Because it allows data to be displayed is very neat, very good readability.

Especially when the background display data using tables whether skilled becomes very important , a very clear and simple form able to complex data appeared very organized, although div layout can do, but not always more convenient form.

1. Create a table

In the HTML page, to create a table, you need to use table-related tags.

The basic syntax to create tables:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

To deeply understand the table, row, cell they constitute.

Contained in the above three basic syntax of HTML tags, respectively table, tr, td, they are creating a table of basic label, are indispensable, the following explanation for them specifically

tag is used to define a table form.
tr tag defines a row in the table, the table must be nested label.
td a cell definition table, you must be nested in the label.
Letters refer td form data (table data), i.e., data contents of the cell, now we understand, the table is most appropriate place to store data.

to sum up:

The main purpose of the form is used to display special data
The table has a complete tag table (Table), the row labels (TR), the cell label (TD), with no column labels

<tr></tr>Can only nested <td></td>classes cells
<td></td>Label, it's like a container that can contain all the elements

2. Table Properties

We do not attribute some form used here is important to remember cellspacing, cellpadding.

We often have an idea, is a three-parameter to 0, usually we developed these three parameters border cellpadding cellspacing 0

Case 1:

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td>女</td> <td>63</td>  </tr>
</table>

3. The tag header cell th

effect:
- Usually header cell located in the first row or the first column of the table, and centered text bold
grammar:
- Simply header tag <th> </ th> tag replace the corresponding cell <td> </ td> to.

Case 2:

Renderings

Code:

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>姓名</th> 
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>小王</td>
			<td>女</td>
			<td>110</td>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>120</td>
		</tr>	
	</table>

th is only one cell and a normal cell td not the same, it will make their own centered inside the text and bold

4. Form the title caption

Definition and Usage

<table>
   <caption>我是表格标题</caption>
</table>

note:

caption element defines table captions , usually the title will be centered and displayed on top of the table.
caption labels must immediately after the table tag.
This tab exists only inside the table makes sense.

The merged cell (difficult)

We compared the merged cell is a common operation, but does not merge very complicated.

5.1 merge cells in two ways

Interbank combined: rowspan = "number of the merged cell."
Cross merged column: colspan = "number of the merged cell."

5.2 merge cells sequentially

The combined first order we follow the order of the lower first left and right

Fully consistent with our previous written order of learning Chinese characters.

5.3 merge cells trilogy

First determine the interbank across columns or merge
Find the target cell on a first-down on the first left and then right to write as well as the number of cells you want to merge merger such as:<td colspan="3"> </td>
Remove the extra cell

Table 6. Summary

Label name	definition	Explanation
`<table></table>`	Table tags	It is a square box
`<tr></tr>`	Table row tag	Row labels inside the table tag makes sense again
`<td></td>`	Cell label	Cell label a container-level element, you can put anything
`<th></th>`	Tag header cell	It is also a cell, but inside the text is centered and bold
`<caption></caption>`	Table header tag	The title of the table, followed by the table to go with, and tables centered
`clospan` with`rowspan`	The combined properties	For merged cell

Table tabular data is provided a method defined in HTML.
The table cell row composition.
The number of elements not listed in the table, the column depends on the number of rows of cells.
Do not form entangled in appearance, it is the role of CSS.
Learning requirements table: the table structure can handwriting, and can simply merged cells.

7. Further Reading @

Table partitioning structure (understand)

For more complex form, the structure of the table also relatively complex, the turn table is divided into three portions: head, body, and footnotes. Which three parts were used: thead, tbody, tfoot to mark, the better to distinguish such table structure.

note:

<thead></thead>: Used to define the table's head. To put things like the title. <thead>You must have internal <tr>tags!
<tbody></tbody>: Used to define the form of the body. Put the data body.
<tfoot></tfoot>: Put the table footnotes and the like.
Tags are placed above the table tag.