1. Table functions:

It is reasonable to exist. Table is still a more common label, but not for layout, commonly used to display tabular data.

Because it can make the data display very neat, very readable.

Especially when the background shows the data, it is very important to use the table skillfully. A clean and simple table can show the complicated data in a very organized way. Although div layout can also be done, it is always not as convenient as the table.

Ps: These places use forms and you will feel that life is still wonderful… Can’t help but say PPAP I hava a pen

2. Create a table

In an HTML web page, to create a table, you need to use the tags associated with the table.

Basic syntax for creating tables:

<table> <tr> <td> </ TD >... </tr> ... </table>Copy the code

Understand how tables, rows, and cells are structured.

There are three basic pairs of HTML tags in the syntax above: table, tr, and TD. They are the basic tags for creating a table

  • Table is used to define a table label.
  • The TR tag is used to define rows in the table and must be nested within the table tag.
  • Td is used to define the cells in the table and must be nested in<tr></tr>Tag.
  • The letter TD refers to table data, the contents of data cells, and now we know that the best place for a table is to store data.

Conclusion:

  • The main purpose of tables is to display specific data
  • A complete table consists of table labels (table), row labels (TR), cell labels (TD), and no column labels
  • <tr></tr>Can only be nested<td></td>The cells of the class
  • <td></td>Tag, it is like a container, can hold all the elements

3. Table properties

There are some attributes in the table that we don’t use very often, but keep in mind cellspacing and cellPadding.

The property name meaning Common attribute values
border Set the border of the table (default border=”0″ no border) Pixel values
cellspacing Sets the spacing between cells and cell borders Pixel value (default 2 pixels)
cellpadding Sets the spacing between the cell contents and the cell border Pixel value (default: 1 pixel)
width Set the table width Pixel values
height Sets the height of the table Pixel values
align Sets the horizontal alignment of the table in the web page Left, center, right

The border cellpadding cellspacing parameter is 0

4. Table header cell label TH

  • Function:
    • Typically, header cells are in the first row or column of the table, and the text is bold and centered
  • Grammar:

    • Simply replace the corresponding cell tag < TD ></ TD > with the table header tag <th></th>.

Th is also a cell, but unlike normal TD cells, it centers and boldes the text inside it

5

Definitions and Usage

<table> </caption> </table>Copy the code

Note:

  • The Caption element defines the table title, which is usually centered and displayed above the table.
  • The Caption tag must follow the table tag.
  • The label only makes sense if it exists in a table. You are the wind and I am the sand

6. Merge cells

Merging cells is one of the most common operations we do, but it’s not very complicated.

6.1 Two ways to Merge cells

  • Rowspan =” Number of merged cells”
  • Colspan =” Number of merged cells”

6.2 Merging cell order

The order of merging is up, down, left, and right

It is exactly the same as the writing order of Chinese characters we learned before.

6.3 Merge three steps of cells

< TD colspan=”3″>
③ Delete the extra cells

7. Summarize the table

Tag name define instructions
<table></table> Table label It’s just a square box
<tr></tr> Table row label Row labels have to be inside the table tag to make sense
<td></td> Cell label A cell tag is a container-level element that can hold anything
<th></th> Header cell label It is still a cell, but the text inside will be centered and bold
<caption></caption> Table title label The title of the table, which follows the table, is centered with the table
Clospan and rowspan Merge attributes Used to merge cells
  • Tables provide a way to define tabular data in HTML.
  • A table consists of cells in a row.
  • There are no column elements in the table, and the number of columns depends on the number of rows.
  • Don’t worry about how tables look, that’s what CSS is for.
  • Table learning requirements: be able to write table structure and combine cells easily.

8. Read more

8.1 Table division structure

For a more complex table, the structure of the table is relatively complex, so the table is divided into three parts: header, text and footnotes. The three parts are marked with thead,tbody and tfoot respectively, so as to better distinguish the table structure

Note:

  1. <thead></thead>: Used to define the header of the table. For headlines and stuff like that. Must have tags inside!
  2. <tbody></tbody>: Used to define the body of the table. Put data ontology.
  3. <tfoot></tfoot>Footnotes to tables and stuff like that.
  4. All the above labels are placed in the table tag.