html实现原生table并设置表格边框的两种方式

系统运维 2024-06-11 LOVEHL^ˇ^ 手机阅读

在HTML中实现原生表格并设置表格边框的两种方式如下：

方式一：使用HTML表格边框属性
使用HTML的表格边框属性可以直接设置表格的边框样式。

示例代码：


  
    表头1
    表头2
    表头3
  
  
    单元格1
    单元格2
    单元格3
  
  
    单元格4
    单元格5
    单元格6
  

在上述代码中， border="1"属性将设置表格的边框为实线。

方式二：使用CSS样式设置表格边框
使用CSS样式可以更灵活地控制表格的边框样式，包括线条样式、颜色、粗细等。

示例代码：


  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
表头1表头2表头3
单元格1单元格2单元格3
单元格4单元格5单元格6

在上述代码中，通过CSS样式设置  border-collapse: collapse;将表格边框合并为单一边框，而  border: 1px solid black;设置每个单元格的边框为1像素的实线黑色。

这两种方式都可以用来实现带有边框的原生HTML表格，你可以根据需要选择适合的方式。