search
HomeWeb Front-endHTML Tutorialbootstrap学习笔记bootstrap组件_html/css_WEB-ITnose

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

标签 描述
),用来标识表格列。 )。 内使用。
为表格添加基础样式。
表格标题行的容器元素(
表格主体中的表格行的容器元素(
一组出现在单行上的表格单元格的容器元素( )。
默认的表格单元格。
特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在
关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中:

, 内的行上看到条纹,如下面的实例所示:
<div class="row">            <table class="table table-striped">                <caption class="text-center">条纹表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果:

边框表格

通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

<div class="row">            <table class="table table-bordered">                <caption class="text-center">边框表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果:

悬停表格

通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

<div class="row">            <table class="table table-hover">                <caption class="text-center">悬停表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果:

精简表格

通过添加 .table-condensed  class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<div class="row">            <table class="table table-condensed">                <caption class="text-center">精简表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果:

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

描述
.table 为任意 添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态
.table-striped
.table-bordered 为所有表格的单元格添加边框
.table-hover
.table-condensed 让表格更加紧凑

下表的类可用于表格的行或者单元格:

描述
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

基本的表格

如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table ,如下面实例所示:

<div class="row">            <table class="table">                <caption class="text-center">基本表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                </tbody>            </table>        </div>

显示效果:

可选的表格类

除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加 .table-striped class,您将在

描述
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作

这些类可以用到

中,如下面实例所示:
<div class="row">            <table class="table">                <caption class="text-center">上下文表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr class="active">                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr class="success">                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr class="warning">                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr class="danger">                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果:

响应式表格

通过把任意的 .table 包在  .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

 <div class="table-responsive">        <table class="table">            <caption class="text-center">响应式表格布局</caption>            <thead>                <tr>                    <th>编号</th>                    <th>城市</th>                </tr>            </thead>            <tbody>                <tr>                    <td>No.1</td>                    <td>北京</td>                </tr>                <tr>                    <td>No.2</td>                    <td>上海</td>                </tr>                <tr>                    <td>No.3</td>                    <td>苏州</td>                </tr>                <tr>                    <td>No.4</td>                    <td>南京</td>                </tr>            </tbody>        </table>    </div>

显示效果:

Statement
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
What is the purpose of HTML tags?What is the purpose of HTML tags?Apr 28, 2025 am 12:02 AM

HTMLtagsareessentialforstructuringwebpages,enhancingaccessibility,SEO,andperformance.1)Theyareenclosedinanglebracketsandusedinpairstocreateahierarchicalstructure.2)SemantictagslikeandimproveuserexperienceandSEO.3)Creativetagslikeenabledynamicgraphics

What are self-closing tags? Give an example.What are self-closing tags? Give an example.Apr 27, 2025 am 12:04 AM

Self-closingtagsinHTMLandXMLaretagsthatclosethemselveswithoutneedingaseparateclosingtag,simplifyingmarkupstructureandenhancingcodingefficiency.1)TheyareessentialinXMLforelementswithoutcontent,ensuringwell-formeddocuments.2)InHTML5,usageisflexiblebutr

Beyond HTML: Essential Technologies for Web DevelopmentBeyond HTML: Essential Technologies for Web DevelopmentApr 26, 2025 am 12:04 AM

To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

What are boolean attributes in HTML? Give some examples.What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AM

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values ​​need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

How can you validate your HTML code?How can you validate your HTML code?Apr 24, 2025 am 12:04 AM

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML vs. CSS and JavaScript: Comparing Web TechnologiesHTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML as a Markup Language: Its Function and PurposeHTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Atom editor mac version download

Atom editor mac version download

The most popular open source editor