How to make Table display borders

This time I will show you how to make the Table display the border and what are the things to note. The following is a practical case, let's take a look.

Commonly used attributes of tables

The basic attributes are: width (width),

height (height) , border (border value), cellspacing (the inner width of the table, that is, the interval between the table and tr), cellpadding (the interval between elements in the table, that is, the interval between tr and tr), bordercolorlight (light border color of the table), bordercolordark (dark border color of the table), bgcolor (background color of the table), background (background image of the table), bordercolor (color of the table border)

Attributes of the internal dividing lines of the table

What works is the rules parameter, which has three values ​​​​(cols, rows, none),

When rules=cols, the table will hide the horizontal direction The dividing line, that is, we can only see the columns of the table;

When rules=rows, the vertical dividing line is hidden, that is, we can only see the rows of the table;

When rules=none, both the vertical and horizontal separators will be hidden, and we can only see the outer frame of a table.

Attributes of the external separators of the table

The display and hiding of the outer border of the table can be controlled using the frame parameter. Note: It only works on the outer border of the table, not on the internal edges and lines.

Only displays the upper border

Only displays the lower border

Only display left and right borders

Only display upper and lower borders

Only display left Border

Only the right border is displayed

Does not display any border

<table summary="学生名单，包括学生编号、姓名、联系电话、和地址。">  
    <caption>学生名单</caption>  
    <thead>  
        <th scope="col">编号</th>  
        <th scope="col">姓名</th>  
        <th scope="col">联系电话</th>  
        <th scope="col">地址</th>  
    </thead>  
    <tfoot>  
        <td colspan="4">班主任：</td>  
    </tfoot>  
    <tbody>  
        <tr>  
            <td>1</td>  
            <td>Jamson</td>  
            <td>123-45678</td>  
            <td>XX市XX区XX号</td>  
        </tr>  
        <tr>  
            <td>2</td>  
            <td>Grace</td>  
            <td>123-45678</td>  
            <td>XX市XX区XX号</td>  
        </tr>  
        <tr>  
            <td>3</td>  
            <td>Dizzy</td>  
            <td>123-45678</td>  
            <td>XX市XX区XX号</td>  
        </tr>  
    </tbody>  
</table>

Believe After reading these cases, you have mastered the methods. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How should HTML tables be laid out

What is the difference between class and id when marking HTML elements

How to achieve the effect of clicking the button text into an input box, and clicking save to turn it into text

The above is the detailed content of How to make Table display borders. For more information, please follow other related articles on the PHP Chinese website!