The way you organize content on your website is important.
There’s a range of design strategies you can implement to make your content more readable. You can use images and/or whitespace to break up large chunks of text. You can use typography,changing the font-size或者spacing between words or otherwise arranging text on the page. You can also use tables.
表可有效地组织和呈现内容，以读者容易扫描和快速吸收大量数据。
Across the HubSpot blogs, you’ll sometimes see tables that summarize the key takeaways of blog posts. Check out the table at the end of thisWix vs. WordPress帖子， 例如。
While this table was built inCMS Hub, HubSpot's CMS, you can create similar tables from scratch with HTML and CSS. However, without using a mobile-first framework, it's hard to get these tables to look good on both desktop and mobile devices.
这就是为什么,在这篇文章中,我们将介绍如何to create and style a simple table element in the CSS frameworkBootstrap CSS, so you can add responsive tables to pages and blog posts on your site. Let’s get started.
Bootstrap Table CSS
Like many things in Bootstrap, creating a table is easy. Simply add theclass.tableto any<表>element in the body section of yourindex.htmlfile. You can then customize the table using modifier classes or custom styles.
Before we talk about customization, let’s start with the most basic table markup. Let’s say you want to create a table listing some periodic elements. You want it to have four columns and three rows so that it looks something like this:
To create this Bootstrap table, you’d use the following HTML:
No. Name Symbol Atomic Weight 1 Hydrogen H 1.008 2 氦 He 4.003 3 Lithium Li 6.941
请注意，该片段可以分为两个主要部分：和sections (ie. the table head and table body sections). The four columns are defined in thesection while the three rows are in the部分。Each of these sections are then wrapped in the parent<表>element. You can customize the table by adding modifier classes or custom styles to the parent or child elements. We’ll look at how in the examples below. Below are some examples that demonstrate how you can use and extend the table element with Bootstrap. Each example will show the different modifier classes needed. Click any of the links below to jump to the corresponding example. Bootstrap's mobile-first approach is one of the most compelling reasons to use this framework to build your site, rather than building it from scratch. It makes the process for creating responsive elements, including tables, much simpler. To create tables that are responsive across all viewports (meaning, they can be scaled horizontally with ease), you just need to wrap the.table与.table-responsiveclass. That means, rather than add the “table-responsive” after the.tableclass, you need to place the whole table element in a To create the responsive table above, use the following code. (You might notice I’ve added some dummy rows and columns to show the effect of the.table-responsiveclass more clearly.) You can also make tables responsive to different specific viewports, rather than all viewports, by picking a maximum breakpoint at which your table can scroll horizontally. For example, if you’d like your table to scroll horizontally up to 576px, then you’d use the.table响应sm修饰符类。768px, 992px, and 1120px are the respective max-width breakpoints for.table-responsive{-md|-lg|-xl}. Bootstrap表类的默认颜色可能与您的品牌或配色方案不符。在这种情况下，您可以使用.table-darkmodifier class to invert the colors so that the background color is dark while the text is light. It will look something like this: To create this table, simply add “table-dark" after the.tableclass. You can see this addition in the first line of code, which is the only difference between this markup and the basic table markup. If you’d like to only change the color of the head of the table and leave the body as is, then you can use the modifier classes.thead-dark或者.thead-light..thead-darkwill make it dark gray (as shown in the example below) while.thead-lightwill make it light gray. Whereas in the previous example you applied the modifier class to the<表>element, you’ll apply one of these classes to thes. You can see this change in the second line of the code below: 假设您想更改桌子主体部分的样式，而不是头部部分。使用.table-striped每一个修饰符类,您可以添加颜色other row within the部分。This will give it a “zebra-striping” effect, shown below.
To create this table, simply add “table-striped" after the.tableclass. This is virtually the same process for creating a dark table. Here’s the code: Now let’s say you’d like the style of the rows to change only when a visitor hovers over them. Using the.table-hovermodifier class, you can enable a hover state on table rows within a部分。您可以在下面的演示中看到效果。
To create this table, simply add “table-hover" after the.tableclass. This is virtually the same process for creating a dark or striped table. Here’s the code: With Bootstrap, you can also change the color of rows or cells using contextual classes. To do, you can apply the following classes to I can apply any of the above classes to different rows to make my table look something like: Here’s the code to create this multi-colored table. If you’d like to have borders on all sides of the table rather than just the horizontal dividers, then you can use the.table-bordered修饰符类。 To create this table, simply add “table-bordered" after the.tableclass. This is virtually the same process for creating a dark table, striped table, or table with hoverable rows. Here’s the code: If you’d like to remove all borders, then you can use the.table-borderless修饰符类。 Tables can help organize large amounts of data on your site in a way that’s easy to read and digest for your visitors. Any of the table examples described above can be added and customized to your unique Bootstrap site. You’ll just need some familiarity with HTML and CSS to get started.
最初发布于2021年2月19日7:00：00 AM，更新2021年2月19日 Topics:Bootstrap Table CSS Examples
1. Responsive Bootstrap Table
No. Name Symbol Atomic Weight - - - 1 Hydrogen H 1.008 N/A N/A N/A 2 氦 He 4.003 N/A N/A N/A 3 Lithium Li 6.941 N/A N/A N/A 2. Dark Bootstrap Table
No. Name Symbol Atomic Weight 1 Hydrogen H 1.008 2 氦 He 4.003 3 Lithium Li 6.941 3. Bootstrap Table with Colored Head
No. Name Symbol Atomic Weight 1 Hydrogen H 1.008 2 氦 He 4.003 3 Lithium Li 6.941 4. Bootstrap Table with Striped Rows
No. Name Symbol Atomic Weight 1 Hydrogen H 1.008 2 氦 He 4.003 3 Lithium Li 6.941 5. Bootstrap Table with Hoverable Rows
No. Name Symbol Atomic Weight 1 Hydrogen H 1.008 2 氦 He 4.003 3 Lithium Li 6.941 6. Bootstrap Table with Colored Rows
elements (rows) or elements (individual cells):
No. Name Symbol Atomic Weight 1 Hydrogen H 1.008 2 氦 He 4.003 3 Lithium Li 6.941 7.边界的bootstrap表
No. Name Symbol Atomic Weight 1 Hydrogen H 1.008 2 氦 He 4.003 3 Lithium Li 6.941 Adding Bootstrap Tables to Your Site
Related Articles
![How to Create Scrolling Text With CSS [+ Code Templates]](http://www.eigoj.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg)
