403 896 5906

Blog Post: Table HTML & CSS

Red Deer & Blackfalds Web Design Writes:

Utilizing a table in your Small Business Web Design is a great way to organize and show items such as:

  • Services
  • Pricing Table
  • Menus
  • Etc…

Below is a quick and easy rundown of the HTML involved in creating a table, as well as some basic CSS to get your started! Check it out:

<table>
<thead>
<tr><td>Heading 1</td><td>Heading 2</td></tr>
</thead>
<tbody>
<tr><td>Info</td><td>More info</td></tr>
<tr><td>Info 2</td><td>More info 2</td></tr>
<tr><td>Info 3</td><td>More info 3</td></tr>
</tbody>
</table>

It looks like this:

Heading 1 Heading 2
Info More info
Info 2 More info 2
Info 3 More info 3

Now we can add the following CSS:

table thead {background: #353535; color: white;}
table thead tr td {color: white; font-weight: bold; font-size: 17px;}
table tbody tr:nth-child(even) {background: #e4e4e4;}

And it will look like this:

Heading 1 Heading 2
Info More info
Info 2 More info 2
Info 3 More info 3

Thanks for checking out this article! If you have anymore questions feel free to contact us.

Joshua Neufeld

Joshua Neufeld

Web Development & Design are passions of mine, and so is Small Business! I am determined to give my clients the best possible online presence in an affordable and professional manner. Contact Me Today!
Joshua Neufeld

Latest posts by Joshua Neufeld (see all)