Challenge How to create a table without using <table> tag?-Bootstrap Tutorial-php.cn

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

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

Home> Web Front-end> Bootstrap Tutorial> body text

Challenge How to create a table without using

藏色散人

Release： 2021-08-20 10:53:15

Original

3151 people have browsed it

In the previous article "How to use the front-end Three Musketeers to create a beautiful countdown effect", I introduced to you how to achieve the countdown effect with HTML, css, and javascript. Friends in need can learn about it~

The focus of this article is to teach you how to create a table without using the

tag?

First of all, everyone should know that HTML is a standard markup language used to create web pages. HTML allows the use of

tag!

Because there are various CSS frameworks available, such as BootStrap, Foundation, Pure, Bulma, UI kit, Materialize CSS, Semantic UI, Specter, etc.

Bootstrap is a very widely used CSS framework. Bootstrap's grid system has a built-in flexbox, which is a one-dimensional layout model that provides spatial distribution and powerful alignment functions between items in the interface.

The following is to create a table by using the BootStrap framework of CSS

The code is as follows:

    创建表    
   示例表格
  Id
 姓名
 性别
 工资
 
  101
 张三
 男
 50000
 
  102
 李四
 女
 30000
 
  103
 王二
 男
 40000
 
  104
 赵五
 女
 45000

Copy after login

The effect is as follows:

Challenge How to create a table without using <table> tag?

Note:

Bootstrap CDN is a public content delivery network that enables users to load CSS, JavaScript, and images remotely from its servers. BootStrap CDN links to code to access built-in CSS library classes.

Containers Containers are used to center and fill the actual content horizontally.

Rows rows encapsulate columns.

Columns Columns are direct children of rows. Content must be placed in columns. Columns with no specified width are automatically displayed as equal-width columns. We can specify column widths explicitly or assign different widths to different screen sizes. We can specify background colors for different rows or columns using predefined utility classes (such as bg-success, bg-info, bg-danger, bg-warning), stylesheets or inline styles.

Border is a predefined class in BootStrap that is used to create borders around cells. Additionally, there are several border utility classes (such as border-dark, border-light, border-danger, border-success, border-warning) that can further enhance the look and feel by giving color or border width.

Related tutorial recommendations: "javascript basic tutorial" "bootstrap tutorial" "HTML video tutorial"

tags to create tables; but in fact, with the help of Cascading Style Sheets (CSS), it is not possible to use tags. Tables can be created in HTML!

The above is the detailed content of Challenge How to create a table without using

Related labels：

surface

source：php.cn

Previous article：10 beautiful and practical Bootstrap background management system templates (come and download now) Next article：8 Bootstrap corporate website templates (source code free download)

Statement of this Website

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