6. form label

6. Tabular label

6.1 The main function of the form

The form is mainly == Used for display 、 Display data ,== Because it can make the data display very regular , It's very readable . Especially when displaying data in the background , It's important to be able to use forms skillfully . A clean and simple table can present complicated data in a very organized way .

summary ： Tables are not used to lay out pages , It's for Display data Of .

6.2 The basic syntax of tables

<table>
    <tr><th> The first 1 List header </th> <th> The first 2 List header </th>...</tr>
    <tr><td> The first 1 Xing di 1 Column cells </td> <td> The first 1 Xing di 2 Column cells </td>...</tr>
    <tr><td> The first 2 Xing di 1 Column cells </td> <td> The first 2 Xing di 2 Column cells </td>...</tr>
    <tr><td> The first 3 Xing di 1 Column cells </td> <td> The first 3 Xing di 2 Column cells </td>...</tr>
    ...
</table>

1. <th></th> Is used for header cell labels , Bold Center , table head abbreviation ;
2. <table></table> Is the label used to define the table ;
3. <tr></tr> Labels are used to define rows in a table , Must be nested in <table></table> In the label ;
4. <td></td> Used to define cells in a table , Must be nested in <tr></tr> In the label ;
5. Letter td Means tabular data (table data), Data is the contents of data cells ;

6.3 Properties of the table

The attributes of table labels are actually developed, and we don't often use them , Back through CSS To set up .

The purpose of learning table attributes here is 2 individual ：

1. Remember these English words , Back CSS Will use .
2. Intuitively feel the appearance of the form

Property name	Property value	describe
align	left center right	Specifies the alignment of the table with respect to the surrounding elements
border	1 or ""	Specifies whether the table cell has a border , The default is ", Indicates that there is no border
cellpadding	Pixel values	Specifies the space between the edge of a unit and its content , Default 1 Pixels
cellspacing	Pixel values	Specify the space between cells , Default 2 Pixels
width	Pixel value or percentage	Specify the width of the table
height	Pixel value or percentage	Specify the height of the form

notes :

1. cellspacing Usually set to 0 , So there is no gap between the cells
2. Usually only width or , Will be scaled equally

6.4 Table structure label

Use scenarios ： 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 head and the table body ：

In the table label , Use them separately ：<thead></thead> The header area of the label table 、<tbody></tbody> The body area of the label table . This can better distinguish the table structure .

<table>
<thead>
    <tr><th> The first 1 List header </th> <th> The first 2 List header </th>...</tr>
</thead>
<tbody>
    <tr><td> The first 1 Xing di 1 Column cells </td> <td> The first 1 Xing di 2 Column cells </td>...</tr>
    <tr><td> The first 2 Xing di 1 Column cells </td> <td> The first 2 Xing di 2 Column cells </td>...</tr>
    <tr><td> The first 3 Xing di 1 Column cells </td> <td> The first 3 Xing di 2 Column cells </td>...</tr>
    ...
</tbody>
</table>

6.5 merge cell

How to merge cells

• Cross bank merger ：rowspan=“ Number of merged cells ”

• Cross column merge ：colspan=" Number of merged cells ’’

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-fVVcHgiA-1654879047782)(E:\Typora\image-20220610231122728.png)]

Target cell ：（ Write merge code ）

• enjambment ： The uppermost cell is the target cell , Write merge code

• Cross column ： The leftmost cell is the target cell , Write merge code

To merge cells ：

1. First, determine whether to merge across rows or columns .
2. Find the target cell , Write down the merge method = Number of cells merged . such as ：<td colspan="2"><td>.
3. Delete extra cells .

<table align="center" border="1" cellspacing="0" width="300">
    <thead>
        <tr>
            <th colspan="3"> Student transcript </th>  <!-- Merge by columns 3 Column -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> full name </td>
            <td> Discipline </td>
            <td> achievement </td>
        </tr>
        <tr>
            <td rowspan="3"> Xiao Ming </td>  <!-- Merge by line 3 That's ok -->
            <td> Chinese language and literature </td>
            <td>98</td>
        </tr>
        <tr>
            <!--  Because it is merged, the first column directly skips  -->
            <td> mathematics </td>
            <td>96</td>
        </tr>
        <tr>
            <!--  Because it is merged, the first column directly skips  -->
            <td> English </td>
            <td>100</td>
        </tr>
    </tbody>
</table>