📌  相关文章
📜  如何在不使用的情况下创建表<table>标签 ？

📅  最后修改于: 2021-09-01 02:00:50             🧑  作者: Mango

超文本标记语言 (HTML) 是用于创建网页的标准标记语言。 HTML 允许使用

标签创建表格。但是，在层叠样式表 (CSS) 的帮助下，也可以在 HTML 中创建表格，而无需使用
标签。 CSS 是一种向其他纯 HTML 网页添加样式(例如字体、颜色、填充和其他装饰功能)的机制。有各种可用的 CSS 框架，例如 BootStrap、Foundation、Pure、Bulma、UI kit、Materialize CSS、Semantic UI、Spectre 等等。 Bootstrap 是使用最广泛的 CSS 框架。 Bootstrap 是一个免费的开源 CSS 框架，它为前端开发人员提供大型库，使其在开发人员中很受欢迎。 Bootstrap 的当前版本是 Bootstrap 4。Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐可用于构建表格以满足用户需求的内容。 Bootstrap 还捆绑了内置实用程序类，可用于在不使用任何 CSS 代码的情况下快速设置元素样式。 Bootstrap 的网格系统有一个内置的 flexbox 并且是完全响应的。 Flexbox 是一种一维布局模型，它提供界面中项目之间的空间分布和强大的对齐功能。下面的代码演示了使用 CSS 的 BootStrap 框架创建表格。

解释：

  • Bootstrap CDN是一个公共内容交付网络，使用户能够从其服务器远程加载 CSS、JavaScript 和图像。 BootStrap CDN 链接到代码以访问内置 CSS 库类。
  • 容器用于居中和水平填充实际内容。
  • 行封装了列。
  • 列是行的直接子项。内容必须放在列中。没有指定宽度的列会自动显示为等宽列。我们可以明确指定列宽，也可以为不同的屏幕尺寸分配不同的宽度。我们可以使用预定义的实用程序类(如 bg-success、bg-info、bg-danger、bg-warning)、样式表或内联样式为不同的行或列指定背景颜色。
  • Border是 BootStrap 中的一个预定义类，用于在单元格周围创建边框。此外，还有几个边框实用程序类(如 border-dark、border-light、border-danger、border-success、border-warning)可通过赋予颜色或边框宽度来进一步增强外观和感觉。

例子： 



  

    Table Creation
  
    
    
  
    

  

    

        
Employee Table

  
        

            
EmpId

            
EmpName

            
EmpDept

            
EmpSalary

        

  
        

            
101

            
Joe

            
Development

            
50000

        

  
        

            
102

            
Mary

            
Testing

            
30000

        

  
        

            
103

            
Beck

            
Analyst

            
40000

        

  
        

            
104

            
Candace

            
Development

            
45000

        

    


  

输出：