What is table in html

The table tag in HTML is used to define a table. It and one or more tr, th, td elements form an html table. In the table table, you can set borders and spacing for it

In HTML, the table tag can be used to define html tables. In the following article, we will introduce the table tag in detail. It has a certain reference effect and I hope it will be helpful to everyone.

【Recommended course: HTML Tutorial】

A simple HTML table is composed of the table tag and one or more tr, th, td elements.

table tag

The table tag can define a simple table. It is mainly used to control the outer border of the table. It has the margin attribute, which is mainly used to set the outer border of the table. distance. The border attribute is used to set the border of the table and the cellspacing attribute is used to specify the blank space between cells.

tr part:

tr is mainly used to divide the rows in the table. , generally only need to be used to set the height

td part:

td is used to control the properties of each cell, but it can control each cell separately. The top, bottom, left and right borders, which also include padding attributes.

th part: The usage of

th is the same as that of td, except that it is used to distinguish the header.

Note: Using percentages and using pixels as units in tables are the same

Example:

<table border="1px solid #ccc">
        <h4 id="php中文网">php中文网</h4>
     <tr>
        <td>教程</td>
        <td>教程地址</td>
   </tr>
   <tr>
        <td>php教程</td>
        <td>http://www.php.cn</td>
          
   </tr>
   <tr>
        <td>html教程</td>
        <td>http://www.php.cn</td>
            
    </tr>
    </table>

Rendering:

Cross-row and cross-column processing of the table

We can also merge it across columns by setting the colspan attribute of the cell. , you can also set the rowspan attribute of the cell to merge it across rows, as shown below

Cell spans two columns

 <tr>
        <td colspan="2">php教程</td>
        <td>http://www.php.cn</td>
          
   </tr>
   <tr>
        <td colspan="2">html教程</td>
        <td>http://www.php.cn</td>
            
    </tr>
     <tr>
        <td colspan="2">css教程</td>
        <td>http://www.php.cn</td>    
   </tr>

The effect is as follows:

The cell spans two rows

 <tr>
        <td  rowspan="2">教程</td>
        <td>教程地址</td>
   </tr>

The rendering is as follows:

Border setting

By default, the table has no border. The border will be displayed only after setting the border attribute for the table label, but This kind of border looks ugly because of the spacing, so we can use the collapse attribute to remove the border spacing

Example:

<table border="1" style="border-collapse:collapse">
 </table>

The effect is as follows:

Note: In table, width refers to the width of the entire table, while the width value of td refers to the internal width excluding the content

Summary: The above is the entire content of this article. I hope it will be helpful for everyone to learn table tags.

The above is the detailed content of What is table in html. For more information, please follow other related articles on the PHP Chinese website!