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

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)