Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Defining Styles for Tables

Defining Styles for Tables

In this lesson, we'll define our tables in style.

We'll cover the following...
widget

HTML markups prior to HTML5 defined dozens of attributes for table-related tags that were responsible for setting up the visual properties of tabular data.

For example, the <table> tag had attributes, such as align, bgcolor (background color), cellpadding (space between the cell wall and the cell content), cellspacing (space between cells), summary, and width to let designers style the visual appearance. Other tags had their own styling attributes, too.

HTML5 got rid of these attributes and allows setting up table appearance only through styles. So, when you need to apply table styles, use CSS style sheets. Let’s assume, you would like to add styles to the table defined in Exercise: Extra headers semantic and scope attributes of <th> so that it is rendered as shown in the image below:

One possible solution is the set of style rules in this code snippet:

<style>
  body {
    font-family: Tahoma, Arial, sans-serif;
  }
  table {
    background-color: aliceblue;
    border: 4px solid dimgray;
    border-collapse: collapse;
  }
  td, th {
    padding: 4px 8px;
    text-align: center;
    border: 2px solid dimgray;
  }
  th {
    font-weight: normal;
    background-color: cornflowerblue;
    color: white;
  }
  td {
    color: dimgray;
    font-weight: bold;
  }
  .origin {
    background-color: navy;
    color: lightgoldenrodyellow
  }
</style>

Without going into details about CSS, here are a few things to understand how styling works:

When a part of your HTML document is rendered, ...