How to set border style for HTML table

The methods for setting the border style of HTML tables include: you can set the thickness and color style of the border through the border attribute. In addition, you can also set the spacing and margins of table cells and merge borders to beautify the table.

In HTML We can add a border style to the table. Next, we will introduce in detail how to set the border style of the table in the article. It has a certain reference effect and I hope it will be helpful to everyone.

[Recommended course: HTML Tutorial]

For those who are just learning HTML, we The

We can set the border through the border attribute, such as To give the table a 1px border we can set it like this:

<table border="1px solid #ccc">

Rendering:

From the picture above we can find that this setting only Only the outer borders of the table have borders, and the cells inside have no borders, so we also need to set borders for the internal cells

 table,table tr th, table tr td { 
       	border:1px solid #ccc;
       	 }

Rendering:

We can merge the borders of the table into A single border, which makes the table more beautiful. This property sets whether the table's borders are combined into a single border, or whether they are displayed separately like in standard HTML, making the table more beautiful.

<style>
       table,table tr th, table tr td { 
       	border:1px solid #ccc;
       	 }
       table{ 
       	width: 400px;
       	border-collapse: collapse;
    }   
    </style>
    <table  cellpadding="0";cellspacing="0">
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
    </table>