Table table

stay HTML in , To create a table, you need to use table label

Study table Before , Let's get to know table Common properties of tags

And then we can have a brief understanding

<table border="1" cellspacing="0">
        <tr>
            <td> Content 1</td>
            <td> Content 2</td>
        </tr>
        <tr>
            <td> Content 3</td>
            <td> Content 4</td>
        </tr>
        <tr>
            <td> Content 5</td>
            <td> Content 6</td>
        </tr>
    </table>

The running result is ：

From this we can see ,tr Specify the columns of the table , How many tr How many columns are there ,td Specify the rows in the table , How many td Just how many lines , If td The number of labels is not equal ？ first tr There is a... In the label td label , the second tr There are two in the label td label , Third tr There are three in the label td label

<table border="1" cellspacing="0">
        <tr>
            <td> Content 1</td>
        </tr>
        <tr>
            <td> Content 2</td>
            <td> Content 3</td>
        </tr>
        <tr>
            <td> Content 4</td>
            <td> Content 5</td>
            <td> Content 6</td>
        </tr>
    </table>

The running result is ：

Obviously , The total width of the table depends on tr In the label td The number of tags , The total height depends on tr The number of tags , But it's not beautiful , Should we find a way to merge empty cells .

Before the merger , Let's first understand the properties of the consolidated table

<table border="1" cellspacing="0">
        <tr>
            <td colspan="3"> Content 1</td>
        </tr>
        <tr>
            <td colspan="2"> Content 2</td>
            <td> Content 3</td>
        </tr>
        <tr>
            <td> Content 4</td>
            <td> Content 5</td>
            <td> Content 6</td>
        </tr>
    </table>

After knowing this , Let's do a little exercise

For ease of understanding , Let's use this form Excel Do a simple treatment ,

After processing , You can see that very clearly , This is a six element , Nine column table , The first two cells of the first 679 rows are merged , Four or five cells merged , The first two cells of the eighth row are merged , The third, fourth, fifth and sixth cells are merged , The second three four five cells of the first four columns are merged

 <style>
        tr {
            height: 30px;
        }
    </style>
<table border="1" cellspacing="0" width="1400">
        <tr>
            <th colspan="2"></th>
            <th></th>
            <th colspan="2"></th>
            <th colspan="3"></th>
        </tr>
        <tr>
            <td rowspan="4" width="45"></td>
            <td></td>
            <td></td>
            <td rowspan="4" width="45"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
    </table>

The running result after merging is ：

Then we add the information in the table ,

<table border="1" cellspacing="0" width="1400">
        <tr>
            <th colspan="2"> Receipt type </th>
            <th> Online transfer and remittance </th>
            <th colspan="2"> Instruction serial number </th>
            <th colspan="3">123456789012</th>
        </tr>
        <tr>
            <td rowspan="4" width="45"><b> closed <br> paragraph <br> people </b></td>
            <td> Account name </td>
            <td> Zhang San </td>
            <td rowspan="4" width="45"><b> pay <br> paragraph <br> people </b></td>
            <td> Account name </td>
            <td> Li Si </td>
        </tr>
        <tr>
            <td><b> Card number </b></td>
            <td>0000000001</td>
            <td><b> Card number </b></td>
            <td>0000000002</td>
        </tr>
        <tr>
            <td> region </td>
            <td> nanjing </td>
            <td> region </td>
            <td> Hangzhou </td>
        </tr>
        <tr>
            <td><b> Dot </b></td>
            <td> Industrial and commercial Jiangsu Nanjing business processing center </td>
            <td><b> Dot </b></td>
            <td> Jiangsu Xuzhou Business Center </td>
        </tr>
        <tr>
            <td colspan="2"><b> currency </b></td>
            <td> RMB </td>
            <td colspan="2"><b> Banknote and remittance mark </b></td>
            <td> Bank note </td>
        </tr>
        <tr>
            <td colspan="2"><b> amount of money </b></td>
            <td>1.00 element </td>
            <td colspan="2"><b> Service Charge </b></td>
            <td>0.75 element </td>
        </tr>
        <tr>
            <td colspan="2"><b> total </b></td>
            <td colspan="4"> RMB ( Capitalization )： one </td>
        </tr>
        <tr>
            <td colspan="2"><b> Trading hours </b></td>
            <td>2021 year 5 month 30 Number </td>
            <td colspan="2"><b> Time stamp </b></td>
            <td>2021-05-30-02.56.32</td>
        </tr>
    </table>

The running result of the code is shown in the figure ,

A simple form is done in this way , In addition, here is a supplement to the label ：

table ———— Create a table

thead ———— Header

tbody ———— The backbone of the form

tfoot ———— Tail

tr ———— Column

td ———— That's ok