HTML basic knowledge learning (middle)-table and list tags

1. Table label
(1) <table></table>is the label used to define the table
(2) the <tr></tr>label is used to define the rows in the table and must be nested in the <table></table>label
(3) is <td></td>used to define the cell in the table and must be nested in the <tr></tr>label
(4) The letter td value table data (table data), that is, the content of the data cell

E.g:

<table>
	<tr> <td>姓名</td> <td>性别</td> <td>年龄</td></tr>
	<tr> <td>周星星</td> <td>男</td> <td>27</td></tr>
</table>

Note:
Table head cell label <th></th>, (table head) is generally located in the first row or column of the table, the text content inside is bolded and displayed in the center

2. Table attributes
This part of the attributes of the table label is not commonly used in actual development and will be set through CSS. Now it is to remember these words

Attribute name Attribute value description
align left、center、right Specifies how the table should be aligned relative to surrounding elements
border 1或"" Specifies whether the table cell has a border, the default is "", which means there is no border
cellpadding Pixel values Specifies the space between the edge of the cell and its content, the default is 1 pixel
cellspacing Pixel values Specifies the space between cells, the default is 2 pixels
width Pixel value or percentage Specifies the width of the table

Note: These are all added in the <table></table>label.
E.g:<table align="center"> </table>

3. The table structure tag
(1) is <thead></thead>used to define the head of the table. It must have a <tr>label inside
(2) <tbody></tbody>used to define the theme of the table, mainly used to put the data ontology

They are all placed in the <table>label.
E.g:

<table>
		<thead> <tr></tr> </thead>
		<tbody></tbody>
</table>

4, merge cells
interbank combined: rowspan = "number of merged cells"
across columns were combined: colspan = "number of the merged cell."

5. List label The
label is used to display data, so the list is used for layout. The
biggest feature of the list is neat, tidy and orderly. It will be more free and convenient as a layout.
According to different usage scenarios, the list is divided into three categories : Unordered lists, ordered lists and custom lists

(1) The unordered list (emphasis)
<ul> tag represents the unordered list of items in the HTML page. The list items are generally presented as bullets, and the list items are <li>defined by tags

Syntax format:

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

Note:
there is no distinction between the various levels of the order list items unordered list, are juxtaposed: A
B: <ul></ul>can only be nested <li></li>, directly in the <ul></ul>input tag or other tag text is not allowed practices
C: <li></li>between It is equivalent to a container, which can hold all elements.
D: Unordered list will bring its own style attributes (such as small black dots), but in actual use, it will be set with CSS

(2) Ordered list (understand) An
ordered list is a list in a sorted order, and each list will be arranged and defined in a certain order.

In HTML tags, <ol>tags are used to define an ordered list, the list arrangement is displayed in numbers, and <li>tags are used to define list items.

Syntax format:

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

Note:
A: <ol></ol>can only be nested in <li></li>. It <ol></ol>is not allowed to directly enter other tags or text in the label.
B: <li></li>is equivalent to a container and can hold all elements.
C: unordered list will bring its own style attributes (Such as 1,2...sequence), but in actual use, CSS will be used to set

(3) Custom list (emphasis)
The custom list is often used to explain and describe terms or nouns. There is no symbol before the list items of the custom list.

Syntax format:

<dl>
	<dt>名词1</dt>
	<dd>名词解释1</dd>
	<dd>名词解释2</dd>
</dl>

Note:
A: <dl></dl>which can contain <dt>and <dd>
B: <dt>and <dd>the number is not limited, and is often a <dt>corresponding number of<dd>

Guess you like

Origin blog.csdn.net/qq_42524288/article/details/102730502