The author chooses”Science and Technology Diversity Fund”As a”Write for the country”Part of the program to receive donations.

Introduction to the

Tables have a long and complicated history on the web. Before CSS, the

element was the only possible way to create a rich design layout on the web. However, using
to create a layout is not its original or ideal use. Now with better layout options, developers can use the
element to render predetermined table data, just like a spreadsheet. This makes it possible to use HTML_ semantically, or to use HTML elements consistent with their intended meaning.

Well-formed HTML provides information to the browser and allows the browser to provide the best interface for the user. While this tutorial will focus on the visual aspects of shaping tables, effective table HTML ensures that all users, including those with good vision, poor vision, and other conditions, can browse and understand table information. Using

elements as specified can greatly increase the accessibility of your CSS design.

In this tutorial, you will run an example of shaping

elements. The first half of this tutorial focuses on a normal table layout that uses the browser’s default style for table elements. Browser default styles are the starting point for using CSS, so it’s important to know what they are. The second half refactors the table to use a unique style in each section. By the end of this tutorial, you will have created a table that provides unique styles for the table headings on the X and Y axes, alternating row colors, providing clear headings for the table, and highlighting data points, as shown in the figure below.

A prerequisite for

  • To learn more about CSS cascading and specificity, you can read how to Apply CSS Styles to HTML using Cascading and Specificity.
  • You can learn about type selectors, combinatorial selectors, and selectors groups in how to Style HTML Elements with CSS.
  • Save an empty HTML file on your local machine, i.eindex.html, which you can access from the text editor and Web browser of your choice. To get started, check out ourHow do YOU set up your HTML project”Tutorial and followHow to Use and understand HTML elementsView your HTML in a browser. If you’re new to HTML, try the entireHow to build a website in HTML”Series.

Set up the<table> HTML

Before you can work for a

, you need a working object. Within a
element, there are many possible elements. The
element is one of the best examples of HTML semantics, because it only works if there are table-related child elements in it. In this step, you will create a
element and populate it with sample data.

To get started, open index.html in your text editor and add HTML to the code block below.

index.html


      
<html>
  <head>
    <title>2019 Fourth Quarter Report</title>
    <link href="styles.css" rel="stylesheet" media="all" />
  </head>
  <body>
    <table>
    </table>
  </body>
</html>
Copy the code

From this step, all the HTML you will add will be placed in the

element. The
element itself defines only the content area of the table, and it must have specific elements inside it to work. The element references the styles.css file that you will add later and loads the CSS onto the page to generate the styles. The media property specifies why the content was created by the device. In this case, you set it to all because this is for all device types.

First, you add a < Caption > element to the

element with the text of the q4 2019 report. In the index.html file in the text editor, add the highlighted HTML in the following code block.

index.html

.<table>
  <caption>2019 Fourth Quarter Report</caption>
</table>.Copy the code

Contains the name or description of the table. Be sure to include this element in your form as it provides useful information for people using assistive technologies such as screen readers. It might be helpful to think of the < Caption > element as

of

.

Next, add , followed by a element, as siblings of the < Caption > element, as shown in the highlighted HTML in the next code block.

index.html

.<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead></thead>
  <tbody></tbody>
</table>
Copy the code

The element is equivalent to

and defines a context for the header information. Elements like

of

, < tBody > define the area where the table content resides. In both cases, they define a region, but they do not display the content themselves. Although not used in this example, the element exists to provide summary information, such as totals.

Tables in HTML are created from rows, not columns. Each cell of the table is contained in a element. These elements are usually descendants of ,, and , but can also be direct descendants of

if the region element is not used.

Go back to index.html in your text editor and add a single header line and three lines of content to the body, as highlighted in the following code block.

index.html

.<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>.Copy the code

The last two elements are functionally similar in that they are the last elements in the

HTML structure, that is, unlike the previous elements, these elements can contain non-table elements.

The < TD > element contains data points for each table. defines the header for a row or column. Table elements are unique to HTML because their markup structure is directly related to visual structure. When you think of a table as a spreadsheet, the and < TD > elements behave like cells. In order to have four columns in this table, each needs to have no more and no less than four < TD > or elements. Depending on the content of the data, this may mean that there is a blank or < TD > element. It may be helpful to use an HTML comment to explain that an element is intentionally left blank.

Add the HTML highlighted in the following code block to your index.html file.

index.html

.<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead>
    <tr>
      <th><! -- Intentionally Blank --></th>
      <th>October</th>
      <th>November</th>
      <th>December</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <th>Projected</th>
      <td>The $820180</td>
      <td>The $841640</td>
      <td>The $732270</td>
    </tr>
    <tr>
      <th>Actual</th>
      <td>The $850730</td>
      <td>The $892580</td>
      <td>The $801240</td>
    </tr>
    <tr>
      <th>Utilization</th>
      <td>83%</td>
      <td>90%</td>
      <td>75%</td>
    </tr>
  </tbody>
</table>.Copy the code

** Note: ** As with spreadsheet software, there may be times when you need to merge cells, such as one cell occupying two columns. It is possible to do this, but you can only use HTML attributes on cells, not CSS. Keep this in mind when working with more complex tables.

Now that you have written your form, save the file. Then, open index.html in your Web browser. The following diagram depicts what the browser default style for this table looks like when loaded in the Firefox web browser.

In this section, you set up the HTML for the table data. You learned how a table can be composed of a series of elements in a different order to create an accessible data set. Next, you’ll start styling the table using the border and border-collapse properties.

useborder 和border-collapseTo create the initial table style

The first step in styling a table is to understand some of the browser’s default styles and behaviors. This section introduces the border and border-collapse properties and shows how to create borders between cells.

To start styling the table, create and open a file called styles.css in a text editor, in the same folder as index.html. Add a set of selectors, including a TH element selector and a TD element selector. Then, in the selector block, add a border property with a value of 1px solid black, as shown in the following code block.

styles.css

th.td {
  border: 1px solid black;
}
Copy the code

Save your changes to styles.css and open index.html in your web browser. Instead of a cohesive grid, there will be several boxes with their own borders. The following image describes how the table appears in a web browser.

To change this default, go back to styles.css in your text editor and add a table element selector at the top of the file. Then, in the selector block, apply the border-collapse property. The default value of this property is separate, but here you will change it to a value collapse. This eliminates spacing between table cells, allowing borders to overlap. In the code block below, the CSS highlighted indicates what you want to add to your styles.css file.

styles.css

table {
  border-collapse: collapse;
}

th.td {
  border: 1px solid black;
}
Copy the code

Open your web browser and refresh index.html. The table will now have a grid defined by multiple intersecting black lines. The following image describes how borders look in your browser.

In this section, you apply a border to each table cell with the border attribute and use th and TD element selectors. You also learned that by default, table cells are separated by a single space. You use the border-collapse property applied to the table element selector and collapse property to remove space between table cells. In the next section, you’ll use the padding and width attributes to define the size of the table.

Set the table size

Next, you’ll add some spacing to the table cells to make the data more readable. To solve the problem of adding white space to table cells and making the table more balanced, this section focuses on the Width and padding attributes.

So far, the content of each cell has been bunched, with the border just above the content. You may also notice that the table is only as wide as its contents.

has its own display property: display: table. To make the table reach the full width of the parent container, add a width: 100% to the table selector.

Since this is a relatively small table, adding a width attribute to the

element is unnecessary. Instead, open styles.css in your text editor and add a combinator selector consisting of Thead TH, which will style the

element. Then, add a width property with a value of 25%, as highlighted in the code block below.
element within the

styles.css

.th.td {
  border: 1px solid black;
}

thead th {
  width: 25%;
}
Copy the code

Since the table has four columns, you can give each column an equal width by applying width: 25%. Only the first cell of each column needs to be set, so thead TH selector. The width of a cell determines the width of all cells in that column.

After saving the changes to styles.css, go back to your browser and refresh index.html. The table will now have four columns of the same width, as shown below.

** Note: ** If you want each column to have a different width, apply a specific class to each TH in that column. Then, using these classes, set the width you want.

Now that the columns are the same width, the contents of each cell can be left with more space by using the padding property. Unlike the width attribute, applying space within a cell requires that all th and TD cell elements be applied.

Open styles. CSS in a text editor, add a padding property to the th, TD group selector, and give it a value of 8px. The highlighted lines in the following code block indicate the necessary changes.

styles.css

.th.td {
    border: 1px solid black;
    padding: 8px;
}

thead th {
  width: 25%;
}
Copy the code

Save your changes to styles.css and refresh index.html in your browser. 8px padding was added to each side of each cell to provide space and make the table data clearer and easier to read. The following image describes how it looks in the browser.

** Note: ** The box model for table cells is an anomaly of the usual model, which does not recognize the margin attribute.

In this section, you set the width property of each column to be equal, and use the padding property to add spacing to each cell to make the data easier to read. In the next section, you’ll use a class to locate and design a specific table cell.

Locks a specific table cell

In this step, our goal is to visually highlight a cell in the table. You will apply a class name to the HTML, and then use a class selector and background-color property to create the highlighting effect.

First, open index.html in your text editor and add a class attribute to the < TD > element that contains 90% of the text. Make the value of the class attribute cell-highlight, as shown in the HTML highlighted in the code block below.

index.html

<table>.<tr>
    <th>Utilization</th>
    <td>83%</td>
    <td class="cell-highlight">90%</td>
    <td>75%</td>
  </tr>.</table>
Copy the code

Save your changes to index.html and open styles.css in your text editor. Add a class selector at the end of the file:.cell-hightlight. Inside the selector block, add a background-color property with a value of gold. Next, add a font-weight property with the value set to bold. The CSS highlighted in the code block below illustrates this format.

styles.css

.thead th {
  width: 25%;
}

.cell-highlight {
  background-color: gold;
  font-weight: bold;
}
Copy the code

Save your changes to styles.css and then go back to your web browser and refresh index.html. As shown in the figure below, the table cell with content **90%** now has a dark yellow background and a weight in bold type.

You have now used a class selector on a particular table cell, using background-color and font-weight properties to apply highlighting styles. Next, you’ll change the border position, font, and text alignment to make these styles evolve toward the final look of the table.

Sets the font family for the table

To start moving towards the final style of the table, you will move the borders around the entire table, rather than individual cells. You will then set a new default font-family for the page and adjust the default text alignment for each cell.

To update the border, open styles.css in your text editor. Then edit the existing group selector th, tr and delete border: 1px solid black; Properties and values. This will remove the cell borders in the table; In the second stage of the table style, the fill remains the same. Then, on the table type selector, add a border property with a value of 1px solid black. The following code block demonstrates how this will appear in your code.

styles.css

table {
  border-collapse: collapse;
  border: 1px solid black;
}

th.td {
  padding: 8px; }...Copy the code

Save your changes to styles.css and return to your browser to refresh index.html. Instead of a single table cell, the border will now surround the entire table, as shown in the figure below.

To change the font for the entire document, go back to styles.css in the text editor. Before the Table selector block, add a body selector. In the body selector block, add the font family property with a value of sans-serif. This sets the font of the page to the browser’s default sans serif font, such as Helvetica or Arial. The CSS highlighted in the following code block represents the changes to styles.css.

styles.css

body {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 1pxsolid black; }...Copy the code

Save these changes to styles.css and reload index.html in your browser. The font for the entire table will now be the browser’s default sans serif font, as shown below.

Finally, to adjust the alignment of the table’s contents, return styles.css in the text editor. Browsers generally default to content alignment in the upper-left corner. Similar to content alignment in a spreadsheet application, a table aligns content to the middle of a table cell regardless of row height.

To set horizontal center alignment, go to the Table type selector and add the text-align property with a value of Center. Then, to set the vertical center alignment, add the vertical-align property with a value of middle. The highlighted section of the following code block shows how to add it to styles.css.

styles.css

body {
  font-family: sans-serif;
}

table {
    border-collapse: collapse;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle; }...Copy the code

Save your changes to styles.css and then go back to your web browser and reload index.html. Cell content will now be centered horizontally and vertically. Notice that the spacing of the cells has not changed. This is because the header text is centered by default.

Vertical center does not immediately show up in content, but if one cell’s content is wrapped into the second line, the rest of the line will align its content vertically.

The following figure shows how this happens in the browser.

In this section, you move the border property from the table cell to the entire table. You also set up a new font family for the page and changed the default alignment of the table cell content. In the next section, you’ll add styles to the table’s < Caption > element and learn more about its use.

The style of the table title

The caption> element provides the context of the table for both sighted and non-sighted readers, and appears above the table regardless of where the caption> is placed within the

element. For screen readers and Braille users, the < Caption > provides a clear context for the purpose of a table, especially if there are multiple tables on a page.

Since < Caption > is an element that only appears inside the

element, it can be styled with the Caption type selector. Caption defaults to text centered, with an inherited size, family, and normal weight.

To start changing the style of the < Caption > element, open styles.css in your text editor. Add a Caption selector after the Table selector to keep your CSS flowing properly. Then, using the font-weight,font-size,text-align, and color attributes, create a large, bold, left-aligned, dark gray title. The CSS highlighted in the code block below illustrates this format.

styles.css

table {
  border-collapse: collapse;
}

caption {
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  color: # 333;
}


th.td {
  border: 1px solid black;
  padding: 8px; }...Copy the code

Save your changes to styles.css and reload index.html in your browser. As shown in the figure below, the title content is now much larger and in bold type, creating a title for the table.

Next, we need some space between the caption and the visual part of the table. Add extra spacing to the Caption by returning styles.css in the text editor.

Caption Accepts the spacing properties of margin and padding. Since the spacing only needs to be below the Caption, add a margin-bottom property to the selector block with a value of 16px. The highlighted line of the code block below shows how to apply this.

styles.css

caption {
    font-weight: bold;
    font-size: 24px;
    text-align: left;
    color: # 333;
    margin-bottom: 16px;
}
Copy the code

Save your changes to styles.css and refresh index.html in your web browser. Now caption, with more space between the text and the table, as shown below.

In this section, you create a custom style for the < Caption > element of the table. You also learn that the caption> is an important element that provides context for people reading tables using assistive technology. In the next section, you will style the top header row of the table.

Styles the header cell for the top row

Next, you will apply the style to the title of the top row. The element will contain the top line, so all styles can be applied directly to that element. The aim is to create a dark grey background with white uppercase text.

To get started, open styles.css in your text editor. Create a new theAD type selector. In the selector block, add a background-color property with a value of #333, which will create a dark gray color. Then, add a color property with a value of white.

styles.css

.caption {
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  color: # 333;
  margin-bottom: 16px;
}

thead {
  background-color: # 333;
  color: white; }...Copy the code

Save your changes to styles.css and refresh index.html in your browser. Now, the title line at the top is visually unique, with a solid black background and white bold text. The image below shows how this looks in the browser.

Next, to add some aesthetic to the top title, return styles.css in the text editor. Change the size of the text by adding a font-size attribute with a value of 0.875rem, which lowers the font size a bit. Then, to make all letters uppercase, add a text-transform property with a value of uppercase. Finally, to give some space between the letters, use the letter-spacing property and set its value to 2%. This will create enough space between capital letters to keep them from crowding together, making them easier to read.

The highlighted CSS in the code block below demonstrates how to format these styles.

styles.css

thead {
    background-color: # 333;
    color: white;
    font-size: 0.875 rem;
    text-transform: uppercase;
    letter-spacing: 2%;
}
Copy the code

Save your changes to styles.css and then go back to the browser to refresh index.html. As you can see in the figure below, the text is now in uppercase letters, a little smaller than the size of the cell content, but clearly layered as a header.

In this step, you use several properties to provide a recognizable style for the header line at the top. The HTML in this section of the table is already available to non-sighted technical users. Now, visual styles provide more context. Next, you will continue to work with visual AIDS by adding alternating line colors.

Adds a striped row style to the table

Next, to create alternate stripe colors, you will need to use what is called a pseudo-class selector. There are various types of pseudo-classes, in which case you would use: nth-Child () pseudo-class. The parentheses following nth-child can accept various number and word values to create an alternate style, including the values of odd and even.

To get started, open styles.css in your text editor. The: nth-Child () pseudo-class is used to apply it to sibling elements. In this case, this would be a element within . To create the first value, write a tBody TR combinator selector, followed by: nTH-Child (odd) pseudo-class. In this selector block, set the background-color property to # FFF, the white hexadecimal shorthand symbol. Then create another selector in the same format, but with even instead of odd, and set the background-color property to a light gray #eee value.

The CSS highlighted in the following code block shows how this will appear in your text editor.

styles.css

..cell-highlight {
  background-color: gold;
  font-weight: bold;
}

tbody tr:nth-child(odd) {
  background-color: #fff;
}

tbody tr:nth-child(even) {
  background-color: #eee;
}
Copy the code

Save your changes to styles.css and go back to index.html in your browser and refresh the page. The second line will now have a light gray background, although it looks no different, but the odd line now has a defined white background instead of the default transparent background. As you add rows, these styles will alternate from white to light gray. The following image illustrates how this will look in the browser.

In this section, you use the: nth-Child () pseudo-class to create alternate row colors in the body of the table. In the final section of this tutorial, you will put together what you learned in the previous two sections to create a custom style for the row headings on the left side of the table.

The style of the left header cell

The final style for this table is to add a blue background to the Y-axis headings on the left side of the table. This will be done in two parts: The first part will be similar to the top heading line styling section, for the TH cell of each line. You will then create a color transform using the same methods as in the previous section: the nth-Child () pseudo-class.

To apply the blue main background, open your styles.css file in a text editor. You need to target the element in < tBody > so that the element in doesn’t get these styles. Create a combinator selector for TBody TH and give it a background-color property and a value of # 36C. Apply a color attribute with a value of # FFF or white. Finally, to set the text to left-aligned, add a text-align property with the value left.

styles.css

. tbody tr:nth-child(even) { background-color:#eee;
}

tbody th {
  background-color: #36c;
  color: #fff;
  text-align: left;
}
Copy the code

Save your changes to styles.css and refresh index. HTML in your browser. As shown in the figure below, row headings are now distinctive blue and white text.

Finally, to continue the alternate line colors into the line headers, return to styles.css in the text editor. To achieve the same effect as data rows, you will need one: nth-Child () pseudo-class selector. Since the blue background is already set on the TBody TH combinator selector, all you need to do is: nth-Child (even), set it to a darker blue. However, due to the way the: nth-Child () pseudo-class selector works, you still need to apply it to elements, not elements, because the line (TR) count is how the effect is achieved. This would require a more complex combinator selector, namely tbody tr: nth-Child (even) th, and setting the background-color property to # 25C.

The following code block highlights the format of this CSS.

styles.css

.tbody th {
  background-color: #36c;
  color: #fff;
  text-align: left;
}

tbody tr:nth-child(even) th {
  background-color: #25c;
}
Copy the code

Save your changes to styles.css, then go back to your browser one last time and refresh index.html. Now that the styling is complete, the colors of the wardrobe and data alternate, as shown below.

In this section, you expand the scope of styles to line headers and continue what you learned in the previous sections to determine exactly the alternate background colors.

conclusion

You have now successfully created a table and learned several useful CSS properties and selector types to apply to table data. Going forward, you can make more complex tables to push these concepts further. You can also use the NTH-Child selector to create alternate styles on bullet lists or navigation links. HTML tables are useful for displaying a wide variety of table data, and the capabilities of HTML and CSS allow for a large number of table types.

If you want to read more CSS tutorials, check out the other tutorials in the how to Style HTML with CSS series.