What is html table? How to use various attributes in the

html What is table? The various attributes and uses of the f5d188ed2c074f8b944552db028f98a1 tag are all in this article. It is very suitable for people who are new to the table tag to learn. This article clearly explains all the basic attributes of the table. The role of the html table table is also There are attributes and some usages here

First let us understand what a table is and its function

What is a table Table: It consists of some rectangular boxes called cells arranged together in order from left to right and top to bottom.

The function of table: to display information in a certain structure.

How we use table table:

Define table:f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08

Create table row:a34de1251f0d9fe1e645927f19a896e8 fd273fcf5bcad3dfdad3c41bd81ad3e5

Create columns (cells):b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf

Note: By default, columns in each row Numbers are unified.

table : display:table;

html table table features:

1. Exclusive row

2. Width adaptive (determined by content)

html table’s table attributes:

1, 43c4707103c6cc3650c2aeb71d2b1e8d Attribute

1.width: Set the width of the table

2.height: Set the height of the table

3.align: Set the height of the table in its parent element Horizontal alignment, value: left, center, right

4.border: border, border width, value in px, px can be omitted

5.cellpadding

                                                                                                        off OUTCELL margins

             . The distance between cells or between cells and tables

7.bgcolor: background color

2. a34de1251f0d9fe1e645927f19a896e8 attribute in table

1.align: The horizontal alignment of the content of this line

2.valign The vertical alignment of the content of this line

Values: top, middle, bottom

3.bgcolor

3.b6c5a531a458a2e790c1fd6421739d1c attribute in table

width

height
align
valign
bgcolor
colspan: Set cells to span columns
rowspan: Set cells to span rows
• Also Other tags in the table:

1, 63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8

Function: Define the title for the table

Position: Centered display

<table>
    <caption>标题</caption>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2, row title or column title

directly above the table Column title: Each column in the first row, bold, horizontally centered Effect display

Row title: The first column in each row, bold, horizontally centered effect display Row (column) title:b4d429308760b6c2d20d6300079ed38e01c3ce868d2b3d9bce8da5c1b7e41e5b

3. Complex application of tables

1. Row grouping

The table can be divided into 3 parts

1. Table headerae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a

2. Table body92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1 3. Table foot 06669983c3badb677f993a8c29d1884529ef2a7480190e02cff1c62c6e19ab01

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

Note: If the table rows are not grouped, then by default they all belong to tbody

2. Irregular tables

Each The number of columns in a row is not uniform.

1. Cross-column Merge columns, let the specified cell move horizontally to the right, merge several cells (including itself)

Syntax: colspan attribute of td

2. Cross rows

Merge rows, let the specified cells go vertically downward, merge several cells (including yourself)

Syntax: rowspan attribute of td

Note: Whether it is across rows or columns, the merged cells must be deleted from the code

3. Nesting of tables

In A table has another table embedded in it

The nested table must appear in b6c5a531a458a2e790c1fd6421739d1c

<table>
    <tr>
       <td>
<table>
    <tr>
        <td>
        </td>
    </tr>
</table>
       </td>
    </tr>
</table>

html table table unique style attributes

1. Border merge of html table table style attributesAttribute: border-collapse

Value: 1.separate: Default value, separate border mode

1.collapse: Border merge mode

2. Border margin of html table table style attribute

1. Function: Set the distance between adjacent cell borders (similar to cellspacing)

2. Attribute: border-spacing

Value:

1. Take 1 value

which means the horizontal and vertical spacing are equal

2. Take 2 values ​​

First The horizontal spacing represented by the first value

The vertical spacing represented by the second value

Separated by a space between the two values

3.Requirements

border-collapse must be separate

It must be valid in the separated border mode

3. The title position of the html table table style attribute

Function: Change the title position from the default position to below the table

Attribute: caption-side

Value:

1. top: Default

2. Bottom: The title is below the table

4. Display rules for html table table style attributes

1.Function

Specify how the browser layouts a table. It actually specifies the algorithm rules of the cell

Default algorithm: The width of the cell is determined by the content and is not limited by the set width value.

2. Attribute: table-layout

Value:

1, auto: default value, automatic, column width is determined by the content

2 , fixed: fixed table layout, column width is determined by the set value.

3. Automatic table layout & fixed table layout

1. Automatic table layout (auto)

The size of the cell will adapt to the content size

In When the table is complex, loading will be slower

Suitable for use when the size of each column is uncertain

Traditional table presentation method

2. Fixed table layout (fixed)

The size of the cell is determined by the set value, regardless of the content.

It will speed up the display of the table, and the browser will not need to calculate it after loading the first row.

4. Hidden display effect

Attribute: visibility:collapse

Used on table elements to delete a row or column without affecting the entire layout of the table

Thank you for reading this article. If you have any questions or questions about this, you can ask below.

There is another article about this advanced version, welcome to click: Introduction to the style of the html5 table tag (with an example of html5 table css centering)

[small Related articles edited by editor]

html What is the function of em tag? The difference between 907fae80ddef53131f3292ee4f81644b and 5a8028ccc7a7e27417bff9f05adf5932 tags

html What does the optgroup tag mean? About the usage and attribute instance analysis of html optgroup tag

The above is the detailed content of What is html table? How to use various attributes in the