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 f5d188ed2c074f8b944552db028f98a1 tag is often used, but there are still many questions about the border setting of the table that I don’t understand. Next, we will introduce it in detail below

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. <pre class="brush:html;toolbar:false">&lt;style&gt; table,table tr th, table tr td { border:1px solid #ccc; } table{ width: 400px; border-collapse: collapse; } &lt;/style&gt; &lt;table cellpadding=&quot;0&quot;;cellspacing=&quot;0&quot;&gt; &lt;tr&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;td&gt;内容&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre>

Effect Picture:

You can also change the color of the table border by setting the border attribute

Reference for this article: https://www. html.cn/doc/html/table/

Summary: The above is the entire content of this article, I hope it will be helpful to everyone

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