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

寻∝梦

Release： 2018-08-22 13:59:09

Original

24643 people have browsed it

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:

Create table row:

Create columns (cells):

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, < table> 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

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

width

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

Function: Define the title for the table

Position: Centered display

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

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:

1. Row grouping

The table can be divided into 3 parts

1. Table header

2. Table body 3. Table foot < /tfoot>

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

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

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

In A table has another table embedded in it

The nested table must appear in

<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

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

2. Attribute: border-spacing

Value:

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