挑战怎么在不使用<table>标签的情况下创建表?

藏色散人
Freigeben: 2021-08-20 10:53:15
Original
3107 人浏览过

在上一篇《如何用前端三剑客创建漂亮的倒计时效果》中给大家介绍了如何HTML、css、javascript实现倒计时效果,有需要的朋友可以学习了解一下~

本文的重点内容则是教大家怎么在不使用

标签的情况下创建表!

首先大家应该都知道HTML是用于创建网页的标准标记语言,HTML允许使用

标记创建表;但其实在层叠样式表(CSS)的帮助下,不使用标签也可以在HTML中创建表!

因为有各种可用的 CSS 框架,例如 BootStrap、Foundation、Pure、Bulma、UI kit、Materialize CSS、Semantic UI、Spectre 等等。

其中Bootstrap则是使用非常广泛的 CSS 框架。Bootstrap的网格系统有一个内建的flexbox,是一个一维布局模型,在界面中提供了项目之间的空间分布和强大的对齐功能。

下面就通过使用 CSS 的 BootStrap 框架创建表格

代码如下:




    
    创建表

    
    

    

示例表格

Id
姓名
性别
工资
101
张三
50000
102
李四
30000
103
王二
40000
104
赵五
45000
Nach dem Login kopieren

效果如下所示:

7b8abde642ffdf29dd1c4feb2a3e2d8.png

注释:

Bootstrap CDN是一个公共内容交付网络,使用户能够从其服务器远程加载 CSS、JavaScript 和图像。BootStrap CDN 链接到代码以访问内置 CSS 库类。

Containers容器用于居中和水平填充实际内容。

Rows行封装了列。

Columns 列是行的直接子项。内容必须放在列中。没有指定宽度的列会自动显示为等宽列。我们可以明确指定列宽,也可以为不同的屏幕尺寸分配不同的宽度。我们可以使用预定义的实用程序类(如 bg-success、bg-info、bg-danger、bg-warning)、样式表或内联样式为不同的行或列指定背景颜色。

Border是 BootStrap 中的一个预定义类,用于在单元格周围创建边框。此外,还有几个边框实用程序类(如 border-dark、border-light、border-danger、border-success、border-warning)可通过赋予颜色或边框宽度来进一步增强外观和感觉。

相关教程推荐:《javascript基础教程》《bootstrap教程》《HTML视频教程

以上是挑战怎么在不使用<table>标签的情况下创建表?的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!