HTML (2): List + Table, html list table

HTML (2): List + Table, html list table
1. unordered list

HTML<ul>An element represents an unordered list of multiple items, that is, a set without numerical sorting items, and their order in the list is meaningless. Generally, the header of an unordered list item can be in several forms, such as a vertex, a circle, or a square. You can set the type attribute of the <ul> element to change the unordered list Header Format.

• Both the unordered list and the ordered list use the <li> label to define a single column.

1 <ul type = "disc"> 2 <li> Solid circle </li> 3 </ul> 4 <ul type = "circle"> 5 <li> hollow circle </ li> 6 </ul> 7 <ul type = "square"> 8 <li> square </li> 9 </ul>

2. ordered list

HTML<ol>Element indicates multiple ordered list items. In general, the number (a preceding numbering) displayed before the item in the ordered list can be any form, such as numbers, letters, or roman numerals or even simple points. <Ol> You can also set the type attribute to change the header serial number mark format. You can also set the start attribute to specify the starting value of the sorting.

• <Ol> elements can not only change the tag format through the type attribute, but also perform more diverse settings through the list-style-type attribute of CSS, list-style-type has many configurable values, but it is not commonly used.

1 <ol start = "5"> 2 <li> default format, set start to 5 </li> 3 <li> default format, set start to 5 </li> 4 </ol> 5 <ol type = "a"> 6 <li> to lowercase letters </li> 7 <li> set type to lowercase English letters </li> 8 </ol> 9 <ol type = "A"> 10 <li> to uppercase English letters </li> 11 </li> li> set type to uppercase letters </li> 12 </ol> 13 <ol type = "I"> 14 <li> set type to Roman numerals </li> 15 </li> li> set type to Roman numerals </li> 16 </ol>

The following are optional values for list-style-type:

• Reference: CSS Reference Manual list-style-type MDN list-style-type

3. definition list

HTML<dl>An element is a list of terms, definitions, and descriptions. It is usually used to display a vocabulary or metadata (key-Value Pair list ).

1 <dl>2 <dt>Coffee</dt>3 <dd>- black hot drink</dd>4 <dt>Milk</dt>5 <dd>- white cold drink</dd>6 </dl>

4. Table

The table is defined by the <table> label. Each table has several rows (defined by the <tr> label) and each row is divided into several cells (defined by the <td> label ). Tag td refers to table data, that is, the content of data cells. Data cells can contain text, images, lists, paragraphs, forms, horizontal lines, tables, and so on. At the same time, the label <th> can define the header.

<Table> attributes that can be set for a tag:

Reference: w3school <table> label