5. List mark
5.1 The role of lists
1) A list refers to arranging several lines of text that have similar characteristics or have a sequential order.
2) All lists are composed of list types and list items:
①List types are: ordered list <ol> (ordered list) and unordered list <ul> (unordered list).
②List items are: <li> (list item), used to indicate specific list content.
u Note: <ol> or <ul> must be used to define a list. For each content of the list, use one <li>.
5.2 Unordered List <ul>
1) The <ul> element represents an unordered list, which is used to list some items on the page without a specific order.
2) The <ul> element can only contain specific list item elements <li>, and each item contained in the list must be included between the start tag <li> and the end tag</li>.
例如：<ul> <li>one</li><li>two</li> </ul>
5.3 Ordered list <ol>
1) The <ol> element represents an ordered list, which is used to list some items in a specific order on the page.
2) The <ol> element can only contain specific list item elements <li>, and each item contained in the list must be included between the start tag <li> and the end tag</li>.
例如：<ol> <li>one</li><li>two</li> </ol>
5.4 Nesting of lists
1) Nesting the list elements, you can create a multi-layer list, that is, you can put the entire list in a certain li.
2) Often used to create document outlines, navigation menus, etc.
For example: <ul>
<li>Web basic knowledge
<ul><li>How the web works</li></ul>
</li>
<li>HTML quick start
<ul><li>Basic grammar</li></ul>
</li>
</ul>
5.5 Case: Add navigation directory using list mark
<ol>
<li>Personal income tax calculator
<ul>
<li><a href="#link1">问题</a></li>
<li><a href="#link2">方案</a></li>
</ul>
</li>
</ol>
6. Form
6.1 The role of the table
1) Forms are usually used to organize structured information.
2) A table is formed by a number of rectangular boxes called cells arranged in order from left to right and top to bottom.
3) The data of the table is stored in the cell.
4) Display grid data, often used in page layout.
6.2 Create table
1) Define the table: Use paired <table></table> tags.
2) Create table rows: Use paired <tr></tr> tags.
3) Create a cell: Use paired <td></td> tags (table defination).
例如：<table border="1">
<tr> <td>row 1, column 1</td><td>row 1, column 2</td></tr>
<tr> <td>row 2, column 1</td><td>row 2, column 2</td></tr>
</table>
6.3 Common attributes of the table
1) Border property: the width of the outer border of the table, a border will be applied to each cell!
2) Width/height attributes: the width and height of the table.
3) align attribute: horizontal alignment, optional values are: left, right, center
4) cellpadding property: the distance between the cell content and the cell border.
5) Cellspacing property: the distance between cells.
u Matters needing attention:
v The height and width of the table are adaptive by default (adapted according to the content length).
v Set the value of the width of the table, the width of each column is distributed in proportion to the length of the cell content, such as 5 characters in the first column and 4 characters in the second column, the distribution ratio is 5:4.
v Setting the width of the column will affect the entire column. Setting high for the column will affect the entire row.
6.4 Common attributes of cells
1) width/height attributes: the width and height of the cell.
2) align attribute: horizontal alignment, optional values are: left, right, center
3) valign attribute: vertical alignment, optional values are: left, right, center
6.5 Table title <caption>
1) Use the <caption> element to define a caption for the table. By default, the caption will be displayed in the center above the table.
2) The <caption> tag can only be located in the table <table>, and only one caption can be defined for each table, and it exists as the first child element!
例如：<table border="1">
<caption>My form</caption>
<tr> <td>row 1, column 1</td><td>row 1, column 2</td></tr>
</table>
6.6 Row grouping (table-specific)
When multiple rows are used as a group and unified settings, use special elements to group the table.
1) The table can be divided into 3 parts: table header, table body and table footer.
2) Header row grouping: <thead></thead> can only appear once
3) Grouping of table body rows: <tbody></tbody> can appear multiple times
4) Table footer row grouping: <tfoot></tfoot> can only appear once
u Note: Row grouping elements can only appear in the table and can only contain tr elements.
6.7 Irregular tables
For the <td> element, there are colspan and rowspan attributes to set the cell to cross columns or rows.
1) Cross-column: colspan
Extend the cell horizontally (horizontally). The value is a positive integer, representing the number of cells that the cell extends horizontally.
2) Inter-row: rowspan
Extend the cell vertically (vertically). The value is a positive integer, which represents the number of cells that this cell extends vertically.
6.8 Nesting of tables
1) Place another table in the cell. In the table cell, the <td> element contains the <table> element.
2) Use nested tables to design complex tables or complex layouts.
6.9 Case: Implement the table as shown in the figure below
<table border="1" width="300" height="300">
<tr>
<td colspan="2">a</td>
<td rowspan="2">b</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td>d</td>
</tr>
<tr>
<td colspan="2">e</td>
</tr>
</table>