Submodule 5.2: 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;
    padding: 8px;
  }
  td {color:purple}
  th {
    background-color: blue; 
    color: white;
  }
</style>

View the result: