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 border9f6b505c8d03e0233e078bf74db9973f

Only displays the lower borderb10a2a8f4008a6af9d5d59a92f9601c8

Only display left and right bordersaea7592daf05b6c5fdf9acd977ba7a2d

Only display upper and lower bordersb7f0ae994f2ec3bda5ee2e7ff958029f

Only display left Border99080a860bbaf7d57f0e890e747be82f

Only the right border is displayedefb406896cdf57e49a55b7e361f904d8

Does not display any border f67379367ee70c194e1734434cee3d1e

<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!