Project Review Summary 2: Table, DIV + CSS, label nesting rules

Directory:1,What is the meaning of a table?2. What elements does a table have?3,TableGrid layout, advantages and disadvantages of table layout4,What are the differences between row and block elements?5,Reasonable tag nesting and tag Semantics

 
① What is the meaning of the table?

Tables should be used to display information suitable for table display, such as data display, statistics, or two-dimensional reports, rather than as a kind of work.

② What elements does the table have?

Table element: table thead tbody tfoot caption tr th td...

③ What should I pay attention to when using tables?

1) when using tables, pay attention to reasonable nesting and follow the semantic nature of labels. Tables can only contain thead, tbody, and tfoot. When using tables, pay attention to the appropriate place, tbody, thead contains tr, th, and td. The title is the caption label used outside the table. 2) the content in the table should be written in the tr or td cells. Otherwise, the content will go out of the table and cannot be included. For example: <Table border = "1" width = "200px"> <Caption align = "center"> Monthly savings </caption> Insertion in disorder <Tr> Th is missing. <Th> Savings </th> </Tr> <Tr> <Td> January </td> <Td> $100 </td> </Tr> </Table> 3) disabling the table layout page will cause code redundancy and inconvenient maintenance. 4) The table element can only contain caption, colgroup, col, thead, tbody, and tfoot. It cannot directly contain tr or any other element.

④ What are the advantages and disadvantages of table layout?

Advantages: The Table layout is easy to use and can form complex changes. It is simple and fast, and the performance is more "rigorous". It can be well compatible in different browsers. Disadvantage: it is not conducive to maintenance, code is too large, and redundancy. If the table exceeds the three-layer cable receiving engine, it will not be crawled. If your website requires layout changes, in this way, the table layout will be re-designed, and the proportion of page changes will be slightly larger, which will affect your preliminary ranking and search base. ① Code bloated ② page rendering performance problems ③ unfavorable to search engine optimization ④ poor accessibility ⑤ insufficient Semantics 6. What are the basic attributes of a table (merging columns and columns )? Column merging: colspan indicates merging columns, and "3" indicates three columns. Colspan = "3" means to combine the three columns into one column. In other words, the three vertical cells are merged into one cell. Row merge: rowspan merges the code of the row. "7" indicates merging 7 rows. Code practice: Open

What are the advantages and disadvantages of DIV + CSS layout?

Advantages: Easy Maintenance and modification, which is conducive to SEO crawling (pay attention to the comparison of table layout), reasonable structure nesting, structure style separation, reduced webpage loading time, and higher page rendering performance than table Disadvantages: ① It is well known that div + css should be compatible with various browsers, which makes development of div + css more difficult. ② Long development time div + css layout compared with the table layout, div + css takes much longer time than the table layout. In addition, considering browser compatibility, testing between various browsers is also a time-consuming task. ③ High development costs: As mentioned above, high technology and long time determine their costs.

What are the differences between row and block elements?

Block Element: h div p title ol ul dl dt dd fieldset form... 1. The entire row is occupied by default. The block contains rows/block elements. 2. Set the width and height to be valid 3. The margin and padding settings are valid. 4. Convert the line element display: inline Row element: a span I em strong B 1. the row does not occupy the entire row and can only contain row elements, but cannot contain block elements. 2. Invalid width/height setting 3. The vertical margin settings are invalid. 4. convert to a block element: display: block

Reasonable tag nesting and tag Semantics

Label nesting rules 1. The body can directly contain block elements, ins, del, and scripts. Cannot directly contain row Elements 2. ins and del (intra-row elements) can contain block elements or intra-row elements. Other intra-row elements cannot contain block elements. 3. p, h1-h6 can directly contain Line Elements and text information, but not block elements 4. dl elements can only contain dt and dd, while dt cannot contain block elements. It can only contain intra-row elements. For dd, it can contain any element. 5. The form element cannot directly contain the input element. The reason is that the input element is a row element, and the form element can only contain block elements. 6. The table element can only contain caption, colgroup, col, thead, tbody, and tfoot. It cannot directly contain tr or any other element.