List table label

List label ol ul dl

What is a list

It is a display form of information resources, which can make information structured and organized, and displayed in the form of a list, so that the viewer can obtain the corresponding information more quickly

Classification of the list:

Ordered list

order list

Numbers in front

<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

Application scope: test paper options, question and answer

Unordered list

a list

There is a small black spot on the front

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Application: website navigation bar, sidebar

Custom list

dl diylist

There are neither numbers nor small black dots, but you can set a subtitle

<dl>
    <dt>标题</dt>  
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

dl tag

dt title/list name

dd list content

Application: the bottom of the website

Table label

Why use tables: simple and universal, stable structure

border="" add border

basic structure

Cell, row, column, cross row, cross column

Row tr column td

Cross-column colspan="4" Cross-four columns is to merge 1-4 columns into one column

Inter-row rowspan="2"

Student grades across columns
Mad god Language 100
Interbank mathematics 100
Qin Jiang Language 100
Interbank mathematics 100
<!--五行三列的表格-->
<table border="1px">
    <tr>
<!--        跨三列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
<!--        跨两行-->
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
     <!-- 此处删掉了一行-->
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
<!--        跨两行-->
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
    <!--   此处删掉了一行-->
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

First judge a few lines and columns and then write line by line

Guess you like

Origin blog.csdn.net/weixin_43903813/article/details/111873459