Next

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:

CAPTION
Header 1Header 2
Content 1 of row 2 Content 2 of row 2
Content 1 of row 3 Content 2 of row 3
Footer 1 of row 4 Footer 2 of row 4

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:

Next