Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to set the border style of the HTML table". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

We can set the border through the border attribute, for example, we can set a 1px border for the table as follows:

one

Effect picture:

From the image above, we can see that this setting is available only on the outer border of the table, and the cells inside have no borders, so we also have to set borders for the inner cells.

one

two

three

Table,table tr th, table tr td {

Border:1px solid # ccc

}

Effect picture:

We can merge the borders of the table into a single border by setting cellspacing (cell spacing), cellpadding (cell margins) and border-collapse: collapse (border merging), which makes the table more beautiful. This property sets whether the borders of the table are merged into a single border, or whether the table is displayed separately as in standard HTML to make the table more beautiful.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

Table,table tr th, table tr td {

Border:1px solid # ccc

}

Table {

Width: 400px

Border-collapse: collapse

}

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Effect picture:

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

This is the end of the content of "how to set the border style of HTML table". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.