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:

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>
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!

      html
      border
      table
      https
      

     

      Statement：
      

       The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      
     

     Previous article：How to center a div in html
     Next article：How to center a div in html
    

     

      
Related articles
      See more
      

     
     

      
html set table border style
       

      
How to add border style to css table? Summary of css table border styles (with complete examples)
       

      
How to write html table code
       

     
    

    

     

      
Home
      
Course
      
Q&A
      
My
      

     
    
   

    

     

      
      
      

     
     

      
Home
        

      
Course
        

      
Article
        

      
Q&A
        

      
Dictionary
        

      
Manual
        

      
Download
        

      
Topic
        

      

     
    
   

    

     
    
    

     

      

       

        Home
       
       

        Article
       
       

        Q&A
       
       

        Course
       
       

        Topic
       
       

        Download
       
       

        Game
       
       

        Dictionary
       
       

      
     
     

      
      

       简体中文（ZH-CN）
       English（EN）
       繁体中文（ZH-TW）
       日本語（JA）
       한국어（KO）
       Melayu（MS）
       Français（FR）
       Deutsch（DE）