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

藏色散人
풀어 주다: 2021-08-20 10:53:15
원래의
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
로그인 후 복사

效果如下所示:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!