Styled Table Examples

Demonstration Code

by Jesse Heines, updated October 23, 2022

adapted from Creating a Web Site by Matthew MacDonald, pages 234-236

Version 1

This is a plain table with no embellishments.

<table id="Version1">
City 2022
Population		 2020
Census		 Change
Manchester 116860 109565 6.66
Nashua 92288 86494 6.70
Concord 44232 42695 3.60
Dover 33291 29987 11.02
Rochester 33040 29752 11.05

Version 2

This table has a border attribute with a value of 5 pixels.

<table id="Version2" border="5px">
City 2022
Population		 2020
Census		 Change
Manchester 116860 109565 6.66
Nashua 92288 86494 6.70
Concord 44232 42695 3.60
Dover 33291 29987 11.02
Rochester 33040 29752 11.05

Version 3

This version adds a cellspacing attribute with a value of 10 pixels.

<table id="Version3" border="5px" cellspacing="10px">
City 2022
Population		 2020
Census		 Change
Manchester 116860 109565 6.66
Nashua 92288 86494 6.70
Concord 44232 42695 3.60
Dover 33291 29987 11.02
Rochester 33040 29752 11.05

Version 4

This version adds a cellpadding attribute with a value of 10 pixels.

<table id="Version4" border="5px" cellspacing="10px" cellpadding="10px">
City 2022
Population		 2020
Census		 Change
Manchester 116860 109565 6.66
Nashua 92288 86494 6.70
Concord 44232 42695 3.60
Dover 33291 29987 11.02
Rochester 33040 29752 11.05

Version 5

This version adds attribute style='text-align: right' to the td tags in the last three columns.

<table id="Version5" border="5px" cellspacing="10px" cellpadding="10px">
  <tr>
    <td>Manchester</td>
    <td style='text-align: right'>116860</td>
    <td style='text-align: right'>109565</td>
    <td style='text-align: right'>6.66</td>
  </tr>
City 2022
Population		 2020
Census		 Change
Manchester 116860 109565 6.66
Nashua 92288 86494 6.70
Concord 44232 42695 3.60
Dover 33291 29987 11.02
Rochester 33040 29752 11.05

Version 6

This version adds commas to the values in the second and third columns just to make these numbers easier to read.

<table id="Version6" border="5px" cellspacing="10px" cellpadding="10px">
City 2022
Population		 2020
Census		 Change
Manchester 116,860 109,565 6.66
Nashua 92,288 86,494 6.70
Concord 44,232 42,695 3.60
Dover 33,291 29,987 11.02
Rochester 33,040 29,752 11.05

Version 7

This version demonstrates the use of inline CSS style attributes to make the table more attractive and the use of a CSS class attribute to make the application of those styles more compact.

Important:  Note that style sheet comments are enclosed in /* ... */ while HTML comments are enclosed in <!-- ... -->.

<style>       /* this is an internal style sheet that should go in the <head> section */
  .Version7 {               /* define a class to make the Version 7 code more compact */
    text-align: right ;        /* right-justify text in <td> elements with this class */
    border-bottom: 1px solid black ;      /* add bottom border to those elements, too */
  }
</style>
<!-- remove the border by setting it to "0px" -->
<table id="Version7" border="0px" cellspacing="0px" cellpadding="10px">
  <tr style='background-color: black'>  <!-- set background color of first row to black -->
    <th style='color: white'>City</th>  <!-- set text color of first row cells to white -->
    <th style='color: white'>2022<br>Population</th>
    <th style='color: white'>2020<br>Census</th>
    <th style='color: white'>Change</th>
  </tr>
  <tr>
    <!-- set the bottom border of each cell to 1-pixel solid black -->
    <td style='border-bottom: 1px solid black'>Manchester</td>
    <!-- set the text alignment of cells 2-4 to right-justified -->
    <td style='text-align: right ; border-bottom: 1px solid black'>116,860</td>
    <td style='text-align: right ; border-bottom: 1px solid black'>109,565</td>
    <td style='text-align: right ; border-bottom: 1px solid black'>6.66</td>
  </tr>
  ...
  <tr>
    <!-- set the bottom border of each cell to 1-pixel solid black -->
    <td style='border-bottom: 1px solid black'>Concord</td>
    <!-- do the same as before, but using a class -->
    <td class='Version7'>44,232</td>
    <td class='Version7'>42,695</td>
    <td class='Version7'>3.60</td>
  </tr>
</table>
City 2022
Population		 2020
Census		 Change
Manchester 116,860 109,565 6.66
Nashua 92,288 86,494 6.70
Concord 44,232 42,695 3.60
Dover 33,291 29,987 11.02
Rochester 33,040 29,752 11.05

Version 8

This version demonstrates the use of the CSS nth-child pseudo-class to make the table even more attractive.  (The background colors used here are PeachPuff and Aquamarine.

<style>   /* this is an internal style sheet that should go in the <head> section */
  #Version8 th {
    background-color: black ;       /* setup for reverse video, that is,   */
    color: white ;                  /*    white text on a black background */
  }
  #Version8 tr:nth-child( even ) {  /* format even-numbered rows */
    background-color: PeachPuff ;   /* background color for cells in even-numbered rows */
  }
  #Version8 tr:nth-child( odd ) {   /* format odd-numbered rows */
    background-color: Aquamarine;   /* background color for cells in odd-numbered rows */
  }
  #Version8 td:nth-child( 1n+2 ) {  /* format every column (1n) starting with the 2nd (+2) */
    text-align: right ;             /* make the last three columns right-justified */
  }
</style>
<table id="Version8" border="0px" cellspacing="0px" cellpadding="10px">

Note that there are no inline styles at all in this version.  All formatting is done by the internal style sheet.

City 2022
Population		 2020
Census		 Change
Manchester 116,860 109,565 6.66
Nashua 92,288 86,494 6.70
Concord 44,232 42,695 3.60
Dover 33,291 29,987 11.02
Rochester 33,040 29,752 11.05