Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use tables in Bootstrap". In daily operation, I believe many people have doubts about how to use tables in Bootstrap. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use tables in Bootstrap"! Next, please follow the editor to study!

1 powerful Bootstrap tables

Add the basic category .table to the html tag and you can extend it using Bootstrap's table optionally decorated categories or custom styles.

All table styles are not inherited in Bootstrap, meaning that the styles of nested tables are independent of the parent table.

The following is what it looks like in Bootstrap using the most basic form layout.

Form demonstration form demonstration serial number, name, gender, occupation 1 Zhang San male programmer 2 Li Si female artist 3 Wang Wu, I can only play with a big knife.

As you can see, the default simple table just adds a class= "table" to the table tag, which is a big change from the appearance of a normal html table.

2 the color of the table

Use semantic class to color table columns or cells. Cousin color can be set in, and other table elements. If it is added to a table, it is valid throughout the table, in a row for the entire row, and in a cell for the entire cell.

So far it seems impossible to add to the entire column, to use a certain color for the entire column, you can only set the color of all the cells in it.

Table presentation Default table-primary table-secondary table-success table-danger table-warning table-info table-light table-dark table-success

Through this example you can basically understand the use of table color, the main need is to use the color of the entire table, do not omit the previous table, although the last line in the example is also table-success, but in fact, the last line is set on the cell.

3 structure of the table-header, footer, Title form demonstrator registration form serial number name gender occupation 1 Zhang San male policeman 2 Li Si female nurse 3 Wang Wu male teacher serial number, name, gender and occupation

Display effect

As you can see from the above example, the table consists of the following parts:

The header thead:t is the abbreviation of the table head is the header

The footer tfoot:t is the table foot is the bottom

Title caption: there is only one line, which is at the bottom of the table by default. In the demonstration, I put it at the top by adding caption-top to the table. The default title is aligned to the left, and I center the text by adding class= "text-center" to the caption. The default font is smaller, and I made it bigger with the h4 title.

Line tr: one line, the td tag must be written in tr.

Column td: a cell in which the number can be changed by merging two adjacent cells, but not greater than all the columns in the row.

Header column th: the only difference from td is that the text is shown in bold

Usually for the sake of beauty, it is generally used or displayed as light gray or dark gray, which is used in the same color as the rows in 11.2.1, and the footer is rarely used.

4 responsive form

When the content of a table row exceeds the width of the browser, the default browser will appear a scroll bar, so one of the problems is that the page will be wirelessly stretched, seriously affecting the display of other page elements in the page.

The responsive table refers to the table in a tag, and the div tag is responsive, with the same width as the container, when the width of the table is greater than the div tag, the div container will appear scroll bar, not in the browser, thus ensuring that the table will not exceed the page width.

Table presentation td {white-space:nowrap } heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, heading 7 Heading 8, heading 9, heading 10, I'm the first cell, I'm the second cell, I'm the third cell, I'm the fourth. Cell I'm the fifth cell, I'm the sixth cell, I'm the seventh cell, I'm the eighth cell, I'm the ninth cell, I'm the 10th cell.

The css part of the code is to disable text wrapping, otherwise the cell will be squeezed into many lines.

Respond at characteristic breakpoints

Table-responsive {- sm |-md |-lg |-xl |-xxl} indicates that a scroll bar will appear before the breakpoint, from which the table will run normally and will not scroll horizontally. You can change the table-responsive in the above code to table-responsive-md to check the effect, and I won't demonstrate it here.

5 table border

The default table is only row borders, you can use table-bordered for the table and cells of all edges to add borders, you can also use can add border color utility class to change the border color (border color through the table color, but the prefix table into border).

...

You can also construct frameless tables by table-borderless.

...

Now a comprehensive example is given.

Form demonstration with colored border form serial number, name, gender, occupation 1 Zhang San male policeman 2 Li Si female nurse 3 Wang Wu male teacher No Border form Serial number, name, gender Professional 1 Zhang San male policeman 2 Li Si Female nurse 3 Wang Wu male teacher 6 compact form (small form)

Adding table-sm halves all cell padding, making any table more compact.

The second table below is a compact table to see if it is smaller than the height of the first row that does not use table-sm.

7 Vertical alignment

The table cells of are always vertically aligned to the bottom. The table cells in inherit the alignment and align it to the top by default. You can use the vertical alignment class to realign as needed.

Vertical alignment classes have two modifiers:

Vertical-align: middle; center alignment

Vertical-align: bottom; alignment to bottom

The vertical alignment modifier can be written to a table, to a row, or to a cell, acting wherever it is written. Other tags such as p, div and so on can also be used.

Sort th {white-space:nowrap of the column } serial number brief introduction 1 Li Bai Li Bai (701-762), the word is too white, the number is Qinglian Juji, and the number is "Fairy Man". He was a great romantic poet in the Tang Dynasty and was praised as "Poetry Immortal" by later generations. His masterpieces include "Wanglushan Waterfall", "difficult to travel", "difficult to go to Shu Road", "going to drink", "Liang Fuyin", "early White Emperor City" and so on. Serial number brief introduction 1 Li Bai Li Bai (701-762), the word is too white, Qinglian Juji, also known as "Xianren", was a great romantic poet in the Tang Dynasty. It is praised as "Poetry Immortal" by later generations. His masterpieces include "Wanglushan Waterfall", "difficult to travel", "difficult to go to Shu Road", "going to drink", "Liang Fuyin", "early White Emperor City" and so on. Du Fu (712-770), whose character is beautiful, originally from Xiangyang, Hubei Province, retreated to Gongxian County, Henan Province. The great realistic poet of the Tang Dynasty, together with Li Bai, was called "Li du". Du Fu has a far-reaching influence in Chinese classical poetry, which is called "the saint of poetry" by later generations, and his poems are called "history of poetry". Du Fu created masterpieces such as climbing to the height, Chunwang, Northern Expedition, three officials, and three Bye. 3Bai Juyi Bai Juyi (772-846), the word Lotte, Xiangshan Jushi, and Mr. drunk Yin, originally from Taiyuan, Shanxi Province. He is a great realistic poet in the Tang Dynasty. Bai Juyi's poems have a wide range of subjects, various forms, easy and popular language, and are known as "Poetry Devil" and "King of Poetry". "Bai's Changqing Collection" has been handed down, and its representative poems include "Song of everlasting regret", "selling charcoal Weng", "Pipa Line" and so on.

The first table does not use the effect of vertical alignment. In the second table, the first row inherits the table alignment, the second row uses the row alignment, the third row, the second cell uses the cell alignment effect, and the other two cells use the table alignment effect.

8 horizontal alignment

Horizontal alignment is actually text alignment, using a generic text class, which has been used in the title section of the previous table structure, with three modifiers:

Text-start: left alignment, default. Sometimes the outer layer is aligned in other ways, and you can use it to reset.

Text-center: Center alignment

Text-end: align to the right

Like vertical alignment, the vertical alignment modifier can be written to a table, to a row, or to a cell, and works wherever it is written. You can also use other tags such as p, div, h2-h7, span, and so on, even for any container with text, which is much more common than vertical alignment. This has been used in many of the previous examples, so there will be no examples.

9 nesting

The nesting of a table is to embed another table in a cell in the table, and the nested table does not inherit border styles, active styles, and table variables.

It is important to note that the table must be nested in a cell, not directly into a row. If you want to nest in a row, please use the cell merge feature, as shown in the following example.

Sort th {white-space:nowrap of the column } personnel list serial number, name, gender, occupation, Zhang San male policeman Li Si female nurse is said to have no gender serial number. Name occupation 1 Gabriel Archangel 2 Sally, Angel of the Moon

10 emphasize form 10.1 striped lines

Use the. table-striped to add a light and dark stripe style to any table row in the range, and you can make a more beautiful table with the color.

Form demonstration serial number, name, gender, occupation 1 Zhang San male policeman 2 Li Si female nurse 3 Wang Wu male Teacher serial number, name, gender, occupation 1 Zhang San male policeman 2 Li Si Female nurse 3 Wang Wu male teacher Serial number, name, gender, occupation 1 Zhang San male policeman 2 Li Four female nurses, three Wang and five male teachers

10.2 can be hovered

Add table-hover to the table tag class to enable the hover effect on the table rows in. When the mouse is over a row, Zheng Hang will display it specially. Change table-striped to table-hover in the 11.9.1 code above to achieve the hovering effect, or you can use it with table-striped. The usage is simple and will not be demonstrated here.

10.3 Activation Table

Highlight table rows or cells by adding table-active. Note that this modifier can only be added to rows or cells, and its usage is similar to that of vertical alignment. There is no more demonstration here, only the effect picture is given.

At this point, the study on "how to use tables in Bootstrap" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.