Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the difference between list and table in html5". In daily operation, I believe many people have doubts about the difference between list and table in html5. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "what is the difference between list and table in html5?" Next, please follow the editor to study!

The difference between list and table in html5: 1, the table is mainly used to display data, while the list is mainly used to lay out the data; 2, the table is defined using table tags with tr, td, th and other tags, and the list is defined using li tags with ol, ul and other tags.

This article operating environment: Windows10 system, html5 version, Dell G3 computer.

What is the difference between a list and a table in html5? Form label 1.1 basic use of tables

The table is mainly used to display and display the data, because it can make the data display very neat and readable. Especially when displaying data in the background, it is very important to be able to use tables skillfully. A crisp and simple table can make complicated data very organized.

Mr. pink: tables are not used to lay out pages, but to display data.

1.2 basic usage of the table the text in the cell.

Is the label used to define the table.

Tags are used to define a row in a table and must be nested within the tag.

Used to define cells in a table and must be nested in tags.

The letter td refers to tabular data (table data), that is, the contents of data cells.

1.3 header cell label

Generally, the header cell is located in the first row or column of the table, and the text content in the header cell is displayed in bold center.

The tag indicates the abbreviation for the header section (table head) of the HTML table.

Name, gender, telephone content 1, content 2.

Pink teacher concluded: the header cell is also a cell, often used in the first row of the table, highlight the importance, the text in the header cell will be bold and centered.

1.4 Table attribute attribute name attribute value description alignleft, center, right specify the way the table is relative to the surrounding elements border1 or "" specifies whether the table cell has a border, the default is "", indicating that there is no frame, the cellpadding pixel value specifies the space between the cell edge and its content, the default pixel is the 1cellspacing pixel value to specify the space between the cells, and the default pixel is the 2width pixel value or percentage to specify the width of the table.

Case

Case study:

Inside the first row is the th header cell

At the beginning of the second line is the normal td cell.

You can put any element in the cell, text, link, picture, etc.

Use width and height borders cellpadding and cellspacing

Its align in the table browser

1.5 Table structure label

Usage scenario: because the table may be very long, in order to better express the semantics of the table, the table can be divided into two parts: the table header and the table body. In the form tag, use: the head area of the table and the body area of the table. In this way, you can better distinguish the table structure.

Content

Used to define the header of the table, which must have a label inside, usually in the first row

Used to define the body of the table, mainly used to put the data ontology.

The above tags are all placed in the label.

1.6 merge cells

In special cases, you can merge multiple cells into one cell, where students can simply merge cells.

Merge cells

Target cell

To merge cells

1.6.1 merge cells:

Cross-line merge: rowspan= "merge number of cells"

Cross-column merge: colspan= "merge number of cells"

1.6.2 Target cell:

Cross-line: the uppermost cell is the target cell, write merge code

Cross-column: the leftmost cell is the target cell, write merge code

1.6.3 merge Cell Trilogy

First determine whether to merge across rows or columns

Find the target cell and write down the merge method = the number of cells merged. For example:

Delete excess cells.

1.7 Table summary

Table learning as a whole can be divided into three parts:

Related labels of the form

Related properties of the table

Merge cells

Table related tags: table tags, tr row tags, td cell tags, th header cell tags, thead table header area tags, tbody table body area tags

Table related properties: align, border, cellpadding, cellspacing, width

Merge cells

two。 List label

Tables are used to display data, so lists are used to layout.

The biggest feature of the list is neat, neat and orderly, it will be more free and convenient as a layout.

Depending on the usage scenario, lists can be divided into three categories: unordered lists, ordered lists, and custom lists.

2.1 unordered list

Tags represent an unordered list of items in a HTML page, and list items are typically rendered as bullets, while list items are defined by tags.

The basic syntax format of an unordered list is as follows:

List item 1 list item 2 list item 3.

There is no order level between the list items of an unordered list, and they are juxtaposed.

Can only be nested in, and entering other tags or text directly into the label is not allowed.

And is equivalent to a container that can hold all elements.

Unordered lists have their own style attributes, but we use CSS to set them when we actually use them.

2.2 ordered list

An ordered list is a list that is arranged in order, and its list items are defined in a certain order.

In HTML tags, tags are used to define ordered lists, list sorting is displayed as numbers, and tags are used to define list items.

The basic syntax format of an ordered list is as follows:

List item 1 list item 2.

Can only be nested, and it is not allowed to enter other tags or text directly into the label.

And is equivalent to a container that can hold all elements.

Ordered lists have their own style attributes, but we usually use CSS to set them when we actually use them.

2.3 Custom list

Usage scenarios for custom lists:

Custom lists are often used to interpret and describe terms or nouns without any bullets before defining list items.

In the HTML tag, the tag is used to define the description list (or definition list), which is used with (define the project / name) and (describe each item / name).

Its basic syntax is as follows:

Noun 2 noun 3.

It can only contain and.

And there is no limit to the number, often one corresponds to more than one.

In the HTML tag

The tag is used to define the description list (or definition list), which is associated with (define the project / name) and

(describe each project / name) to use together.

2.4 list summary tag signature definition states that an unordered list can only contain li, which is not in order, and can be used more frequently. Li can contain any tag in an ordered list, and an ordered list can only contain li, which is relatively rare in use. Li can contain any tag, custom list can only contain dt and dd,dt and dd can put any tag.

Note:

Learn when to use unordered lists and when to use custom lists.

How to write the code of unordered list and custom list?

The list layout is not completed until after learning CSS.

3. Form label

The real form is similar to the one we fill in when we go to the bank to apply for a credit card.

Form display in a web page

3.1 Why do you need a form

The purpose of using the form is for the user's information.

In our web page, we also need to interact with users, mobile user information, at this time we need to fill out the form.

3.2 composition of the form

In HTML, a complete form usually consists of three parts: form fields, form controls, and prompt messages.

3.3 form field

A form field is an area that contains form elements.

In HTML tags, tags are used to define form fields to enable the collection and transmission of user information.

The form element information within its scope is submitted to the server.

Various form controls

Common attributes:

Attribute value function actionurl address is used to specify the url address of the server program that accepts and processes the form data methodget/post is used to set how the form data is submitted, and its value is get or postname name to specify the name of the form to distinguish form fields on the same page

As far as the basic class is concerned, we don't need to submit data in the form field for the time being, we just need to write the form tag. Employment classes and other learning server programming stages will be re-explained.

There are only two things to remember here:

Before we write form elements, there should be a form field to include them.

Form fields are form tags

3.4 presentation controls (form elements)

A variety of form elements can be defined in the form field, which are content controls that allow users to enter or select in the form.

The main contents are as follows:

Input input form elements

Select drop-down form element

Textarea text field elements

3.4.1 form elements

In English words, input is the meaning of input, while in form elements, tags are used to collect user information.

In the tag, there is a type attribute, and the input field has many forms (text fields, check boxes, masked text space, radio buttons, buttons, etc.) depending on the value of the type attribute.

Label is a single label

The type property sets different property values to specify different control types.

The property value of the type property and its description are as follows:

Property value description button definition clickable button (in most cases, used to launch a script through JavaScript) checkbox definition check box file definition input field and "Browse" button for file upload hidden definition Hidden input Field image definition submit button in the form of image password definition password field, the characters in this field are masked radio definition radio button reset definition reset button The reset button clears all data from the form submit definition submit button, and the submit button sends the form data to the input field of the server text definition single line, where the user can enter text with a default width of 20 characters

In addition to the type attribute, tags have many other attributes, and their common attributes are as follows:

Attribute value description name the name of the input element is defined by the user value the value of the input element is defined by the user checkedchecked specifies that when this input element is loaded for the first time it should be selected maxlength positive integer to specify the maximum length of characters in the input field

Name and value are attribute values for every form element and are mainly used by background staff.

The name of the name form element, which requires that the radio button and the check box have the same name value.

The checked attribute is mainly aimed at checkboxes and check boxes, the main role-to open the page, you can select a form element by default.

Maxlength is the maximum number of characters that a user can enter in a form element and is generally rarely used.

1. Some form elements want to show a few words how to do as soon as they are opened

You can set the value attribute = "value" for these form elements

User name:

two。 There are many form elements on the page, how to distinguish the different form elements?

Name attribute: the name of the current input form, which can be found in the background through this name attribute. There are many forms on the page, and the main function of name is to distinguish it from different forms.

User name:

The value after the name attribute is custom

If radio (or CheckBox) is a group, we have to give them the same name.

Men and women

3. What if a radio button or a check box button is selected as soon as the page opens?

Checked property: indicates the default selected state and is used for checkboxes and checkboxes.

Gender: male and female

4. How do you make input form elements show different forms? Like a checkbox or a text box.

Type attribute: the type attribute allows input form elements to set different forms

Male 3.4.2 label

Tags define annotations (labels) for input elements

The tag is used to bind a form element, and when you click on the text inside the tag, the browser will automatically shift the focus to or select the corresponding form element to increase the user experience.

Syntax:

Male

Core: the for attribute of the tag should be the same as the id attribute of the related element.

3.4.3 form elements

Usage scenario: on a page, if there are multiple options for the user to choose from and want to save page space, we can use the tag space to define the drop-down list.

Syntax:

Option 1, option 2, option 3.

Contains at least a pair of

When selected= "selected" is defined in, the item is currently selected by default.

3.4.4 form elements

Usage scenario: when the user enters a lot of content, we can not use the text box form, at this time we can use tags.

In a form element, a label is a control that defines multiline text input.

You can enter more text using a multi-line text input control, which is common on message boards and comments.

Syntax:

Text content

You can easily create multiline text input boxes with tags.

Cols= "words per line" and rows= "lines displayed"; CSS is generally used to resize in actual development

3.5 Summary of form elements

Among the form elements, we learned three groups: input input form elements select drop-down form elements textarea text field form elements

All three sets of form elements should be contained in the form form field and have the name attribute.

Beijing, Ningxia.

There are three tags with very similar names:

Form field form usage scenario: submit form elements in the area to the background server

File domain file is the value of the input type attribute. Use scenario: upload files

Text field textarea usage scenarios: you can enter multiple lines of text, such as message boards, website introductions, etc.

We do not need to submit form elements at this stage, so we are only responsible for the appearance of form elements.

4. Comprehensive case

At this point, the study on "what is the difference between lists and tables in html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.