Play around with Tables

Ever fancied playing around with tables on your website?

The basic tables that you can easily insert can be done by a little bit of code or using an html editor which results in a basic table like this.

Your header can go here     A second header goes here
Whilst the information in your table goes here and here as well.

 

But with a bit of effort and a lot of reading of the ins and outs of CSS over at W3schools you can add all sorts of effects to your tables.

The same Table, but with a "w3" shadow effect

Your header can go here     A second header goes here
Whilst the information in your table goes here

and here as well.

 

 

The code to add to make this effect is as follows:

<div class="w3-container">
<table  class="w3-table-all w3-card-4" >

Add the line with w3-container before you deine the table, and add the table classes to your table.

The css code is found in w3.css file and you should copy this into your template css folder (if using Joomla for example).