1. Form label
1.1 main functions of tables
Tables are mainly used to display and display data
1.2 basic syntax of tables
Shape such as <table> <tr> <td>Text in cell</td> ... </tr> ... </table>
Of which:
1.table label is a label used to define a table;
2.tr is the abbreviation of table row. It is used to define rows in the table and must be nested in the table label;
3.td is the abbreviation of table data. It is used to define the cells in the table. It must be nested in the tr tag. If there are several data in a row, write several pairs of tags.
1.3 header cell label
Generally, the header cell is located in the first row or column of the table, and the text content inside is bold and centered.
Shape such as <table> <tr> <th>Text in cell</th> ... </tr> ... </table>
Where: th is the abbreviation of table head
1.4 table attributes
It is not commonly used in actual development. It will be set later through CSS.
| Attribute name | Attribute value | describe |
|---|---|---|
| align | left,center,right | Specifies the alignment of the table with respect to the surrounding elements |
| border | 1 or infinite | Specifies whether the cell has a border. The default is infinite, which means there is no border |
| cellpadding | Pixel value | Specifies the space between the edge of the cell and its content. The default is 1 pixel |
| cellspacing | Pixel value | Specifies the space between cells. The default is 2 pixels |
| width | Pixel value or percentage | Specify the width of the table |
be careful
These attributes should be written to the table tag
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="240">
1.4.1 a small case
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Novel ranking</title>
</head>
<body>
<table align="center" border="1" cellpadding="5" cellspacing="0">
<tr>
<th>ranking</th> <th>key word</th> <th>trend</th> <th>Search today</th> <th>Last seven days</th> <th>Related links</th>
</tr>
<tr>
<td>1</td>
<td>Ghost blow lamp</td>
<td><img src="R-C.jfif" width="10" height="10"/></td>
<td>345</td>
<td>123</td>
<td>
<a href="https://tieba.baidu.com/" target="_ Blank "> Post Bar < / a > & nbsp;
<a href="https://Cn. Bing. COM / search? Q =% E5% 9b% be% E7% 89% 87 & CVID = 192d2409dd6f436280fbc2b40e0589e5 & AQS = edge.. 69i57j0l8.1984j0j4 & form = anab01 & PC = u531 "target =" _blank "> picture</a>
<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790" target="_ Blank "> Encyclopedia</a>
</td>
</tr>
</table>
</body>
</html>
1.5 table structure label
Function: divide the table into two parts: table head and table body to better represent the semantics of the table.
Shape such as <thead>I'm the head of the form</thead> <tbody>I am the body of the form</tbody>
be careful
1.thead must have tr label inside;
2. Both thead and tbody should be placed in the table tab.
1.6 merging cells
| Consolidation method | attribute | set cell |
|---|---|---|
| Cross bank consolidation | rowspan = "number of merged cells" | Uppermost cell |
| Cross column merge | colspan = "number of merged cells" | Leftmost cell |
be careful
Suppose you write a table with three rows and three columns
The number of td tags depends on the number of merged cells.
2. List label
For page layout, the biggest feature is neat, tidy and orderly.
2.1 unordered list (key)
Shape such as
<ul>
<li>List item 2</li>
<li>List item 1</li>
<li>List item 3</li>
......
</ul>
Where ul is the abbreviation of unordered list and li is the abbreviation of list
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered list</title>
</head>
<body>
<h4>Your favorite fruit</h4>
<ul>
<li>Peeled pears</li>
<li>Seedless watermelon</li>
<li>Green Hami melon</li>
<li>Skinned grapes</li>
</ul>
</body>
</html>
be careful
1. In the unordered list, there is no order level among the list items, which are parallel;
2. Only li tags can be nested in UL tags, and no other tags or text can be entered;
3.li label is equivalent to a container, which can hold all elements;
2.2 with sequence table
Shape such as
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
......
</ol>
Where ol is the abbreviation of ordered list and li is the abbreviation of list.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered list</title>
</head>
<body>
<h4>Fan list</h4>
<ol>
<li>Andy Lau 10000</li>
<li>Liu Ruoying 1000</li>
</ol>
</body>
</html>
2.3 custom list
It is often used to explain and describe terms or nouns. There is no bullet before the list item defining the list.
Shape such as <dl> <dt>Noun 1</dt> <dd>Noun 1 interpretation 1</dd> <dd>Noun 1 interpretation 2</dd> </dl>
Among them, dl is the abbreviation of definition list, dt is the abbreviation of definition term (user-defined list group), which feels like a list title, and dd is the abbreviation of definition description (user-defined list description), which is the specific content of dt.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom title</title>
</head>
<body>
<dl>
<dt>Focus on us</dt>
<dd>Sina Weibo</dd>
<dd>Official wechat</dd>
<dd>contact us</dd>
</dl>
</body>
</html>
be careful
1.dl tag can only contain dt and dd;
2. There is no limit to the number of dt and dd, and often one dt corresponds to multiple dd;
3. The three lists have their own style attributes, but CSS will be used to set them in practical application.
2.4 list summary
| Tag name | definition | explain |
|---|---|---|
| ul | Unordered label | It can only contain li. There is no order. It is widely used. li can contain any label |
| ol | Ordered label | Only li is included, in order, and relatively few are used. li can contain any label |
| dl | Custom list | Only dt and dd can be included. Any label can be included in dt and dd |