This is the 11th day of my participation in Gwen Challenge

“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.

11.1 Powerful Bootstrap tables

Table can be extended using Bootstrap’s table optionally modified categories or custom styles by adding the base category to the HTML tag

.

None of the table styles are inherited in Bootstrap, which means that the nested table styles are independent of the parent table.

Here is what Bootstrap looks like using the most basic tables.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > table demo < / title > < / head > < body > < div class = "container" > < h1 > table demo < / h1 > < table class = "table" > < thead > < tr > < th > serial number < / th > < th > name < / th > < th > gender < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > * * < / td > < td > m < / td > < td > programmer < / td > < / tr > < tr > < th > 2 < / th > < td > and < / td > < td > women < / td > < td > graphic < / td > < / tr > < tr > The < th > 3 < / th > < td > fifty < / td > < td colspan = "2" > I will only play broadsword < / td > < / tr > < / tbody > < / table > < / div > < script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

As you can see, the default simple table simply adds class=”table” to the table tag, which makes it look a lot different from normal HTML tables.

11.2 Color of the form

Color a table column or cell with semantic class. Cousin colors can be set in

,

,
,

, < TD >, etc. If it is added to a table, it is valid for the entire table, for the entire row, and for the entire cell.

So far it seems impossible to add a color to an entire column. To use a color for an entire column, you can only color all cells in it.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > table demo < / title > < / head > < body > < div class = "container" > < table class="table"> <tr><td>Default</td></tr> <tr class="table-primary"><td>table-primary</td></tr> <tr class="table-secondary"><td>table-secondary</td></tr> <tr class="table-success"><td>table-success</td></tr> <tr class="table-danger"><td>table-danger</td></tr> <tr class="table-warning"><td>table-warning</td></tr> <tr class="table-info"><td>table-info</td></tr> <tr class="table-light"><td>table-light</td></tr> <tr class="table-dark"><td>table-dark</td></tr> <tr><td class="table-success">table-success</td></tr> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

But in fact, the last row is set on the cell.

11.3 Table structure – Table header, table tail, and table title

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > table demo < / title > < / head > < body > < div class = "container" > < table Class ="table Caption -top"> <caption class="text-center">< / H5 ></ CAPTION >< thead> <tr> <th> </th> Gender < th > < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > * * < / td > < td > m < / td > < td > police < / td > < / tr > < tr > < th > 2 < / th > < td > and < / td > < td > women < / td > < td > n < / td > < / tr > < tr > < th > 3 < / th > < td > fifty < / td > < td > m < / td > < td > teacher < / td > < / tr > < / tbody > < tfoot > The < th > number < / th > name < / td > < td > < / td > < td > gender career < / td > < td > < / tfoot > < / table > < / div > < script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

According to the effect

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

  • Thead: T is short for table. Head is the head
  • Table tail tfoot: t is the table and foot is the bottom
  • Caption: Only one line. Default is at the bottom of the table. In this demo, I add caption-top to the table. By default, the caption is left aligned. I center the text by adding class=”text-center” to the Caption. The default font is smaller, but I made it bigger with the H3 title.
  • Line TR: A line in which the TD tag must be written in tr.
  • Column TD: one cell, pass<td colspan="2">You can merge two adjacent cells, and the number inside can change, but cannot be greater than all the columns in the row.
  • Table header column TH: with TD only difference is the inside text bold display

For aesthetic purposes, it is common to use or to make light or dark gray. This is the same as the color of the rows in 11.2.1, and the end of the table is rarely used.

11.4 Reactive table

One of the problems with default browser scrollbars that appear when a row is larger than the width of the browser is that they stretch the page wirelessly, severely affecting the appearance of other page elements.

A responsive table is a table placed in a

tag that is responsive, the same width as the container, and when the width of the table is larger than that div tag, the container will have a scroll bar, not on the browser, This ensures that the table does not exceed the page width. 

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > table demo < / title > < style > td {white - space: nowrap; } </style> </head> <body> <div class="container"> <div class="table-responsive"> <table class="table caption-top"> The < thead > < tr > < th > header 1 < / th > < th > header 2 < / th > < th > header 3 < / th > < th > header 4 < / th > < th > header 5 < / th > < th > header 6 < / th > < th > header 7 < / th > < th > header 8 < / th > < th > header 9 < / th > < th > header 10 < / th > < / tr > < thead > < tbody > < tr > < td > I am the first cell < / td > < td > I am a second cell < / td > < td > < / td > I am a third cell < TD > I am the 4th cell </ TD > < TD > I am the 5th cell </ TD > < TD > I am the 6th cell </ TD > < TD > I am the 7th cell </ TD > < TD > I am the 8th cell </ TD > < TD > I am the 9th cell </ TD > < td > I am a 10th cell < / td > < / tr > < / table > < / div > < / div > < script SRC = "bootstrap5 / bootstrap. Bundle. Min. Js" > < / script > < / body > </html>Copy the code

The CSS part of the code is designed to disallow word wrapping, which would otherwise squeeze the cell into many lines.

Response at characteristic breakpoint

Table – responsive {- sm | | – md – lg | – xl | – XXL} said a scroll bar will appear before the breakpoint, starting from the breakpoint, form will run normally and not horizontal scrolling. You can change the above code from table-responsive to table-responsive md to check the effect, I will not demonstrate here.

11.5 Table Borders

Tables default to row borders only, you can add borders to all edges of tables and cells with table-bordered, and change border colors with utility classes that can add border colors (border colors match table colors, just replace the prefix table with border).

<table class="table table-bordered border-primary">... </table>Copy the code

You can also create table-borderless tables.

<table class="table table-borderless">... </table>Copy the code

Now give a composite example.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > table demo < / title > < / head > < body > < div class = "container" > < table Class ="table caption-top table-bordered border-primary"> < H3 > Select class="text-center">< / H5 ></ CAPTION >< thead> < tr > < th > number < / th > < th > name < / th > < th > gender < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > * * < / td > < td > m < / td > Police < / td > < td > < / tr > < tr > < th > 2 < / th > < td > and < / td > < td > women < / td > < td > n < / td > < / tr > < tr > < th > 3 < / th > < td > fifty < / td > < td > m < / td > < TD > Teacher </ TD > </tr> </ Tbody > </table> <table class=" Table Caption - Top table- Borderless" Class = "text - center" > < h3 > without borders form < / h5 > < caption > < thead class = "table - light" > < tr > < th > serial number < / th > < th > name < / th > < th > gender < / th > < th > class < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > * * < / td > < td > m < / td > < td > police < / td > < / tr > < tr > < th > 2 < / th > < / td > < td >, dick, and harry Female < / td > < td > < td > n < / td > < / tr > < tr > < th > 3 < / th > < td > fifty < / td > < td > m < / td > < td > teacher < / td > < / tr > < / tbody > < / table > < / div > < script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

11.6 Compact Tables (Small Tables)

Adding table-sm cuts all cell padding in half, making any table more compact.

<table class="table table-sm">
Copy the code

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

11.7 Vertical Alignment

The table cells of are always aligned vertically to the bottom. The form cells in < tBody > inherit the

alignment and are aligned to the top by default. You can use vertical alignment classes to realign as needed.

Vertically aligned classes have two modifiers:

  • vertical-align: middle; Align center
  • vertical-align: bottom; Align to the bottom

Vertically aligned modifiers can be written to tables, rows, or cells, and apply wherever they are written. You can also use p, div, and other tags.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > column sorting < / title > < style > th {white - space: nowrap; } < / style > < / head > < body > < div class = "container" > < table class = "table" > < thead > < tr > < th > serial number < / th > < th > name < / th > < th > introduction < / th > </tr> </thead> < Tbody > < TR > < TD > < TD > Li Bai (701-762), styled Taibai, styled Qinglian Lay Shi, also known as "Banished Immortal", was a great romantic poet of the Tang Dynasty, known as "The Poet Fairy" by later generations. His representative works include "Looking at lushan Waterfall", "Difficult Journey", "Difficult Road of Shu", "Entering wine", "Liang Fu Yin", "Early departure to The White Emperor City" and many other pieces. < / td > < / tr > < / tbody > < / table > < table class = "table align - middle" > < thead > < tr > < th > serial number < / th > < th > name < / th > < th > introduction < / th > < / tr > </thead> < Tbody > < TR > < TD > < TD > Li Bai (701-762), styled Taibai, styled Qinglian Lay Shi, also known as "Banished Immortal", was a great romantic poet of the Tang Dynasty, known as "The Poet Fairy" by later generations. His representative works include "Looking at lushan Waterfall", "Difficult Journey", "Difficult Road of Shu", "Entering wine", "Liang Fu Yin", "Early departure to The White Emperor City" and many other pieces. </td> </tr> <td class="align-bottom"> < TD > <td> <td> He was a great realist poet of the Tang Dynasty, known collectively as li Du with Li Bai. Du Fu's influence on Chinese classical poetry is so profound that he is called the "Sage of poetry" by later generations, and his poems are called "the history of Poetry". Du Fu created famous works such as Climbing the Heights, Spring Prospect, The North March, The Three Officials and Three Others. </td> </tr> </tr> <td> <td class="align-top"> Bai Juyi is a great realist poet of the Tang Dynasty. His poems have a wide range of themes, various forms, and plain and popular language, so he is known as "poetry demon" and "King of poetry". There is a collection of Bai's Changqing passed down from generation to generation, and the representative poems are Song of Everlasting Sorrow, Selling charcoal Weng and Pipa Player. </td> </tr> </tbody> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

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

11.8 Horizontal alignment

Horizontal alignment is text alignment, using the generic text class that was used in the header section of the previous table structure, with three modifiers:

  • Text-start: left-aligned, default. Sometimes the outer layer is aligned in another way and can be reset with it.
  • Text-center: align-center
  • Text-end: align to the right

As with vertical alignment, vertical alignment modifiers can be written to tables, rows, or cells, and apply wherever they are written. You can use other tags like P, div, H1-H6, SPAN, and even any container with text, much more than vertical alignment. This has been used in many previous examples, but I won’t give you an example.

11.8 nested

Table nesting is the embedding of another table within a cell of the table. Nested tables do not inherit border styles, active styles, and table variables.

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

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > column sorting < / title > < style > th {white - space: nowrap; } </style> </head> <body> <div class="container"> <table class="table caption-top table-bordered border-primary"> < caption class = "text - center" > < h3 > list < / h5 > < caption > < thead > < tr > < th > serial number < / th > < th > name < / th > < th > gender < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > * * < / td > < td > m < / td > < td > police < / td > < / tr > < tr > < th > 2 < / th > < td > and < / td > < td > women < / td > < TD > Nurse </ TD > </tr> < TR > < TD colspan="4"> <table class="table caption-top table-bordered border-primary" Class = "text - center" > < h3 > said to the angel not gender < / h5 > < caption > < thead > < tr > < th > serial number < / th > < th > name < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > gabriel < / td > < td > archangel < / td > < / tr > < tr > < th > 2 < / th > < / td > < td > Sally/angel < / td > < td > months < / tr > < / tbody > < / table > < / td >  </tr> </tbody> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

11.9 Emphasize tables

11.9.1 stripe line

Use. Table-striped to add shade and light stripes to any row in the range, and can be used with colors to make the table look more beautiful.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > table demo < / title > < / head > < body > < div class = "container" > < table Class = "table table - striped" > < thead > < tr > < th > serial number < / th > < th > name < / th > < th > gender < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > * * < / td > < td > m < / td > < td > police < / td > < / tr > < tr > < th > 2 < / th > < td > and < / td > < td > women < / td > < td > n < / td > < / tr > < tr > The < th > 3 < / th > < td > fifty < / td > < td > m < / td > < td > teacher < / td > < / tr > < / tbody > < / table > < table class = "table table - dark table - striped" > The < thead > < tr > < th > number < / th > < th > name < / th > < th > gender < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < / td > < td > zhang SAN Male < / td > < td > < td > police < / td > < / tr > < tr > < th > 2 < / th > < td > and < / td > < td > women < / td > < td > n < / td > < / tr > < tr > < th > 3 < / th > < td > fifty < / td > < TD > male </ TD > < TD > teacher </ TD > </tr> </ Tbody > </table> <table class="table table-success table-striped"> <thead> <tr> < th > number < / th > < th > name < / th > < th > gender < / th > < th > professional < / th > < / tr > < thead > < tbody > < tr > < th > 1 < / th > < td > zhang < / td > < td > m < / td > Police < / td > < td > < / tr > < tr > < th > 2 < / th > < td > and < / td > < td > women < / td > < td > n < / td > < / tr > < tr > < th > 3 < / th > < td > fifty < / td > < td > m < / td > Teachers of < td > < / td > < / tr > < / tbody > < / table > < / div > < script SRC = "bootstrap5 / bootstrap. Bundle. Min. Js" > < / script > < / body > < / HTML >Copy the code

11.9.2 Hoverable row

Add table-hover to the table tag class to enable the hover effect on < tBody > table rows. When the mouse is placed on a row, the special display will be displayed. Change table-striped to table-hover in 11.9.1 above to achieve the hovering effect, and can also be used with table-striped. The usage is very simple and will not be demonstrated here.

11.9.3 active table

Highlight table rows or cells by adding table-active. Note that this modifier can only be added to a row or cell and is used in the same way as vertical alignment. I’m not going to show you any more, but I’m just going to show you the renderings.

That’s all for today’s lecture, and that’s the end of the grid. Please pay attention to me, timely learn my original “Bootstrap5 from zero to master” section 12 Bootstrap on the page typesetting subversive design. If this article is helpful, please feel free to like it!