This is the 28th day of my participation in the August Text Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the 26th article in the “Learn from the Front End” series – “Tables in HTML and processing of table Styles”.

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

In this article, we will learn about tables in HTML and how to style them using CSS. This article will look like this:

What is a form

In real life, the form is a relatively common form, such as the application form, resume and so on. A set of table-related elements is also provided in THE HTML page to achieve the effect of the table in the HTML page.

What is a form

A table is a structured set of rows and columns that can be combined into a table to show a relationship between different types of data, as shown in the following figure:

As mentioned above, there are some concepts in the table, as follows:

  • Row: a horizontal group of data, usually about a topic, such as a person in the figure above.

  • Column: A vertical group of data, usually a single item of data, such as the name column in the figure above.

  • Cell: A square in a table that displays an item of data.

What are table elements

HTML provides a series of table elements in order to achieve the effect of tables in HTML pages. Based on some of the table concepts, the table elements provided in the HTML page are as follows:

  • element: represents a table as a container for the table.

  • element: represents rows in a table.

  • < TD > element: represents a cell in a table.

The following example code shows a basic table in an HTML page:

<table>
    <tr><th>The name</th><th>area</th></tr>
    <tr><td>The Vatican yunfei</td><td>In western regions in the west</td></tr>
    <tr><td>Huan fall</td><td>austral</td></tr>
</table>
Copy the code

The CSS style of the above code is as follows:

td.th.table { border: 1px solid # 284; }

Copy the code

The code running result is as follows:

Tips: The above code will be explained later

The basic structure of a table

The HTML page provides a set of table elements, the most basic structure of which is shown in the sample code below:

<table>  
    <tr>  
        <td>The cell</td>  
    </tr>  
 </table>
Copy the code

The most basic structure of a table element is:

  1. element: Represents a table in an HTML page as a container for the table.

  2. element: Rows that represent a table in an HTML page. A table can have one or more rows.

  3. < TD > element: Represents a row of cells in a table in an HTML page. A row can have one or more cells.

An analysis of the basic structure of a table in a general table application case is shown below:

Title cell

The element in HTML is used to define the title of a set of cells. This element is used in the same way as the < TD > element and is defined in the element.

The following example code shows the use of the element:

<table>
    <tr>
        <th>The name</th>
        <th>area</th>
    </tr>
    <tr>
        <td>The Vatican yunfei</td>
        <td>In western regions in the west</td>
    </tr>
    <tr>
        <td>Huan fall</td>
        <td>austral</td>
    </tr>
</table>
Copy the code

The code running result is as follows:

As shown in the figure above, we can see that the text content in the element is automatically bold and centered when the browser runs.

The scope attribute of the element, which defines the cell associated with the header cell, is an enumeration type with the following values:

  • Row: indicates that the current heading cell is associated with all cells in a row.

  • Col: indicates that the current heading cell is associated with all cells in a column.

  • Rowgroup: indicates that the current header cell belongs to a rowgroup and is associated with all cells in it.

  • Colgroup: indicates that the current header cell belongs to a column group and is associated with all cells in it.

  • Auto: automatically assigned by the browser.

The following example code shows the use of the scope attribute for the element:

<table>
    <tr>
        <th>The name</th>
        <th>area</th>
    </tr>
    <tr>
        <th scope="row">The Vatican yunfei</th>
        <td>In western regions in the west</td>
    </tr>
    <tr>
        <th scope="row">Huan fall</th>
        <td>austral</td>
    </tr>
</table>
Copy the code

The code running result is as follows:

It is worth noting that even if there is nothing in a cell, the < TD > element or the element still needs to be defined to indicate the presence of an empty cell.

Table title

The < Caption > element in HTML is used to define the title of the table in the HTML page. This element typically appears as the first child of the

element, is first in the table content, and is horizontally centered.

The following example code shows the use of the element:

<table>
    <caption>Fuchsbau little matchmaker</caption>
    <tr>
        <th>The name</th>
        <th>area</th>
    </tr>
    <tr>
        <td>The Vatican yunfei</td>
        <td>In western regions in the west</td>
    </tr>
    <tr>
        <td>Huan fall</td>
        <td>austral</td>
    </tr>
</table>
Copy the code

The code running result is as follows:

Cross row and cross column

Tables in AN HTML page can span rows or columns in addition to the regular ones. The implementation is achieved through the following attributes:

  • Colspan property: Specifies the number of columns that a table cell can span.

  • The RowSPAN property: Specifies the number of rows that a table cell can span.

The following example code shows the cross-line effect:

<table>
    <tr>
        <! -- Two cells -->
        <th colspan="2">Fuchsbau little matchmaker</th>
    </tr>
    <tr>
        <! -- 4 vertical cells -->
        <th rowspan="4">Four big demon emperor</th>
        <td>TuShanHong red</td>
    </tr>
    <tr>
        <td>The Vatican yunfei</td>
    </tr>
    <tr>
        <td>Shi Kuan</td>
    </tr>
    <tr>
        <td>Huan are giant</td>
    </tr>
</table>
Copy the code

The code running result is as follows:

The complete structure of the table

The complete structure of a table in HTML also includes the following three elements

  • element: The row that defines the header cell of a table in an HTML page.

  • < tBody > element: Used to define the body of the table (the actual data content of the table) in the HTML page.

  • element: A summary row that defines the columns of a set of tables in an HTML page.

The following example code shows the use of the element, the element, and the element:

<table>
    <thead>
        <tr>
            <th colspan="2">Fuchsbau little matchmaker</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="4">Four big demon emperor</th>
            <td>TuShanHong red</td>
        </tr>
        <tr>
            <td>The Vatican yunfei</td>
        </tr>
        <tr>
            <td>Shi Kuan</td>
        </tr>
        <tr>
            <td>Huan are giant</td>
        </tr>
    </tbody>
</table>
Copy the code

As shown above, the element, the element, and the element do not make the table more accessible to screen reader users, nor do they cause any visual changes. However, they play a role in applying styles and layouts that make it easier to apply CSS to tables.

Table style manipulation

Table layout

The table-layout property of the CSS is used to layout cells and calculate rows and columns in a table. This property has the following two values:

  • Auto: The default value. The browser uses an automatic table layout algorithm so that the width of the table and its cells is adjusted to fit the content.

  • Fixed: The width of columns in a table or table is determined by the width of cells in the first row of the table. Cells in subsequent rows do not affect the width of columns in the table.

The above two values may yield different results, but the biggest difference between them is mainly in speed. The speed is faster than that of fixed, while that of Auto is slightly slower, for the following reasons:

  • Fixed: The main reason for this speed is that once the browser has resolved the width of the first row of cells in the table, it can render the entire table, regardless of the contents of the cells in the table.

  • Auto: This method is triggered when the width property of the table is auto, regardless of the value of the table-layout property. The main reason this approach is slow is that each rendering of a new cell completes the layout of the entire table.

The table header

The Caption -side property of the CSS sets the position of the element of an HTML page. This property should be used together with the property. The value of this attribute has the following two values:

  • Top: default value, indicating that the table title is displayed at the top of the table.

  • Bottom: indicates that the table title appears at the bottom of the table.

The following code shows what happens when the Caption -side property is set to bottom:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>caption-side</title>
        <style>
            td.th.table {
                border: 1px solid # 284;
            }
            caption {
                caption-side: bottom;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>Fuchsbau little matchmaker</caption>
            <tr>
                <th>The name</th>
                <th>area</th>
            </tr>
            <tr>
                <td>The Vatican yunfei</td>
                <td>In western regions in the west</td>
            </tr>
            <tr>
                <td>Huan fall</td>
                <td>austral</td>
            </tr>
        </table>
    </body>
</html>

Copy the code

The code running result is as follows:

Process empty cells

The empty-Cells property in the CSS sets whether the borders and backgrounds of cells with no visible content in the table of an HTML page are shown or hidden. The value of this attribute has the following two values:

  • Show: Default, border and background render normally, just like normal elements.

  • Hide: The border and background are hidden.

The following example code shows the empty-cells attribute in use:

table {
    empty-cells: show;
}
Copy the code

The differences between the two are shown in the figure below:

Cell border

The border-collapse property in CSS sets whether the borders of tables in HTML pages are separated or merged. This property has the following two values:

  • Separate: Default, with separate borders for each cell.

  • Collapse: Adjacent cells sharing the same border.

The border-callapse attribute value separate is called _separated, which is the traditional HTML table mode. In this mode, adjacent cells have different borders. The spacing between borders is set using the BORDER-spacing property of the CSS.

The border-spacing property in the CSS is used to set the spacing between adjacent cell borders of tables in HTML pages. The value of this property can be set in either of the following ways:

  • Single-value: Sets the horizontal and vertical distances between cells.

  • Double values: The first value sets the horizontal distance between cells in two adjacent columns, and the second value sets the vertical distance between cells in two adjacent rows.

The following example code shows how to use the border-spacing property when the border-callapse property is collapse:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Border processing</title>
        <style>
            td.th.table {
                border: 1px solid # 284;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>The name</th>
                <th>area</th>
            </tr>
            <tr>
                <td>The Vatican yunfei</td>
                <td>In western regions in the west</td>
            </tr>
            <tr>
                <td>Huan fall</td>
                <td>austral</td>
            </tr>
        </table>
    </body>
</html>

Copy the code

The code running result is as follows:

conclusion

Preview: In the next article we’ll look at structural pseudo-class selectors in CSS