html sets table border

The table element in HTML is a tag used to create a table. It can display data to users in a tabular format. In a table, the data in each cell can be arranged, grouped, and sorted, so the table has better readability and operability when displaying data.

Among them, the appearance of a table usually depends on how the table borders are set. When the border is not set, the border of the table is invisible by default. When the border is set, border lines will be added between cells, which can better define the structure of the table and highlight the content of the table. Next we will introduce how to set the table border in HTML.

Several properties of HTML table borders

When using HTML to create a table, you can set the border properties of the table through CSS styles. There are two properties for setting table borders in CSS:

1. Use the border property to set the width, color and style of the table border.
2. Use the border-collapse attribute to set the folding method of the table border.

Next we will explain these two properties in detail.

1. Border attribute

In HTML, you can use the CSS border attribute to set the border of the table. The border attribute has three parameters: border-width, border-style and border-color, which are used to set the width, style and color of the border respectively.

The specific operation is as follows:

<table style="border:1px solid black;">
  <tr>
    <td>第一列第一个单元格</td>
    <td>第一列第二个单元格</td>
  </tr>
  <tr>
    <td>第二列第一个单元格</td>
    <td>第二列第二个单元格</td>
  </tr>
</table>

Among them, border: 1px solid black is a composite attribute, indicating that the width of the border is 1px, the style is solid line, and the color is black.

Border-style values ​​are as follows:

• none: no border;
• dotted: dotted border;
• dashed : Dotted border;
• solid: Solid border;
• double: Double border;
• groove: 3D raised border;
• ridge: 3D Recessed border;
• inset: 3D inset border;
• outset: 3D outset border.

The value of border-color can be the color, the name of the color, or the rgb value of the color.

2. border-collapse attribute

The border-collapse attribute is used to set the folding method of the table border. The folding method can be collapse or separate, which means folding and separating respectively. During collapse, the borders between adjacent cells will be merged into one to reduce the number of border lines and enhance the beauty of the table.

The specific operation is as follows:

<table style="border-collapse:collapse;">
  <tr>
    <td>第一列第一个单元格</td>
    <td>第一列第二个单元格</td>
  </tr>
  <tr>
    <td>第二列第一个单元格</td>
    <td>第二列第二个单元格</td>
  </tr>
</table>

In border-collapse:collapse, collapse means folding the border line. Adjacent cells share a border line, reducing the number of border lines.

Conclusion

In table development, tables with border lines will be more beautiful and intuitive. This article details the two attributes for setting table borders in HTML, border and border-collapse. border is used to set the style, width and color of the border, and border-collapse is used to set the folding method of the border, which can optimize the beauty of the table.

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