Submodule 1.3: CSS on tables

Commonly used style properties in tables

Tables, like any HTML element, can be styled using CSS.
Some commonly used CSS properties for tables are:

• border, which defines the border of the table
• border-collapse, which collapses cell borders
• color, which changes the text color
• width, which defines the width of the table
• height, which defines the height of the table
• padding, which defines the table padding
• text‐align for horizontal text alignment
• vertical‐align for vertical text alignment

An example of a table with 2 cells across 3 rows is:

Let's apply the CSS rules:

<style>
  table, td, th {border:1px solid black; padding:15px}
  td {color:purple}
</style>

View the result:

Let's apply more CSS rules:

<style>
  table {width: 60%;}
  table, td, th {
    border-collapse: collapse;
    border:1px solid black; 
    padding:15px; 
    text-align: center;
    
  }
  td {color:purple}
  th {
    background-color: blue; 
    color: white;
  }
</style>

View the result:

Apply class rules

Similar to every HTML element, you can apply classes to a specific tag of a table.

Pause and think how you could create the table shown in the image:

View source:

For more information:  https://www.w3schools.com/css/css_table.asp

Note the Hoverable and Striped Tables. They are very interesting.

Exercice

Exercise

1. Open the file exersice01.2.01.html in the folder "advanced" in your editor and save it as exersice01.3.01.html in the same folder.
2. Modify and save the file. The browser's output should be as shown in the following image:

Solution: