How to set table border in html-HTML Tutorial-php.cn

How to set table border in html

藏色散人

Release： 2023-01-05 16:11:53

Original

47454 people have browsed it

htmlHow to set the table border: first create an HTML sample file; then define a table through table; finally set it by adding the css code as "tr td,th{border:1px solid red;}" Just the table border.

How to set table border in html

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Prepare a piece of html code for the table, and use this piece of code to display the browser's default rendering of the table tag. The code is as follows:

<html>
<head>
<title></title>
</head>
<style>
</style>
<body>
<table class="mt">
    <tr>
         <th>col_1</th>
         <th>col_2</th>
         <th>col_3</th>
    </tr>
    <tr>
         <td>value_1</td>
         <td>value_2</td>
        <td>value_3</td>
   </tr>
</table>
</body>
</html>

Copy after login

How to set table border in html

Set the inner border for the table. It can be seen that the default style of the table label has no border. Now we add a border to the table, just add the following code to the style tag:

<style>
tr td,th{
border:1px solid red;
}
</style>

Copy after login

How to set table border in html

##Cancel unit The space between cells. In the previous step, although the borders within the rows were set, the space between cells is often not what we want, so we can set it through the following code:

<style>
tr td,th{
border:1px solid red;
}
/*取消table标签中的单元格空白*/
.mt{
 border-collapse:collapse;
}
</style>

Copy after login

How to set table border in html

Set the outer border for the table, the code is as follows:

<style>
.mt{
 border-collapse:collapse;
 border:1px solid black; /*设置表格的外边框*/
}
</style>

Copy after login

How to set table border in html

Set the row border, relative to the cell border setting, Row border settings are more common. We only need to use the following code

<style>
 
 
.mt{
 border-collapse:collapse;
 border:1px solid black;
}
/*设置行边框*/
.mt tr{
border-bottom:1px solid black;
}
</style>

Copy after login

How to set table border in html

[Recommended learning:

HTML video tutorial]

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