Tables

How can I add a table to my WordPress created website?

Chapter 1: Tables
Chapter 2: Sortable tables

Chapter 1: Tables

Here's an example of a table:

Table titlecolumn titlecolumn title
row titlecell1.1cell2.1
row titlecell1.2cell2.2
row titlecell1.3cell2.3

The code of the above table is:

<style type="text/css">
table {width:450px;
font-family: Helvetica;
font-size: 14px;
color:#fff;
background-color:#ccc;
border-spacing: 5px 5px;
border:3px solid #ccc;
}
th {width:150px;
height:35px;
color:#000;
background-color: #fff;
border:1px solid #fff;
}
td {color:#000;
font-style:italic;
text-align:center;
background-color: #fff;
border:1px solid #fff;
}
</style>
<table>
<tr><th>Table title</th><th>column title</th><th>column title</th></tr>
<tr><th>row title</th><td>cell1.1</td><td>cell2.1</td></tr>
<tr><th>row title</th><td>cell1.2</td><td>cell2.2</td></tr>
<tr><th>row title</th><td>cell1.3</td><td>cell2.3</td></tr>
</table>

and it's pretty easy to use. From top to bottom you first enter the width of the table, the font, font-size, the color of the text. Of course you can also set a particular styling for a particular cell by using a <span> as explained in the Basic HTML Codes knowledge base. The background color is used to define the color of the background of the table. Under border-spacing the first value defines the space between cells horizontally and the second value vertically. Under border you define the border around the entire table.

Under th you define the parameters for the title-cells. The width equals the width of the table divided by the number of columns. Height defines the height of the cells. Color defines the color of the text in these cells. Of course you could also add other parameters to define the font or font size. You can also set a background color for the title-cells if you want them to have a different color than the other ones. Border defines the border displaying around the title cells.

Under td you define the parameters for the normal cells. Same as for th. Under text-align you could have the text aligned to left, right or justify instead of center.

The rest is pretty self explanatory I think. The first row

<tr><th>Table title</th><th>column title</th><th>column title</th></tr>

is for the title of the table and the columns. If you need more columns add more <th>column title</th>

The second and third rows

<tr><th>row title</th><td>cell1.2</td><td>cell2.2</td></tr>

first you have the title of the row and then the cells. If you need more rows add more lines like the one above. If you added more columns in the first line remember to add the appropriate cells <td>cell2.2</td> in the other rows.

Once you're done with editing the code paste it into your WordPress page or post. That's it.

Another way to add tables to your website would be using Google Docs to embed an excel spreadsheet on your page as you can read here.

Chapter 2: Sortable tables

What is a sortable table? A sortable table is a table where you can click on a title or criteria to sort the elements in the table after that criteria. Here's an example of a sortable table where you can click on Name, Price or Rating to change the order in which the elements display:

NamePrice ($)Rating (1-10)
* where 10 is best
Name 13001
Name 2203.8
Name 31000010
Name 462.309
Name 545007.8
Name 653.9
Name 7120004.7
Name 820.508

This uses a script written by Stuart Langridge you find here: http://www.kryogenix.org/code/browser/sorttable/ you may want to read that page for further customizations. I will only discuss the basics here.

1. Click here to download a file called sorttable.js and upload it to the root of your server (If you don't know what the root is or how this is done read it here)
2. The code of the table is pretty much the same as the one you find in Chapter 1 of this page. I just changed the <th> tags of the first column to <td>, added <script src="/sorttable.js"></script> to call the script, added the class to the table to make it sortable by replacing <table> with <table class="sortable"> and added some more rows. So in the end this is the code I get for the above sample table is:

<script src="/sorttable.js"></script>
<center><style type="text/css">
table {width:450px;
font-family: Helvetica;
font-size: 14px;
color:#fff;
background-color:#ccc;
border-spacing: 5px 5px;
border:3px solid #ccc;
}
th {width: 150px;
height:35px;
color:#000;
background-color: #fff;
border:1px solid #fff;
}
td {color:#000;
font-style:italic;
text-align:center;
background-color: #fff;
border:1px solid #fff;
}
</style>
<table class="sortable">
<tr><th>Name</th><th>Price ($)</th><th>Rating (1-10)<br><span style="font-size:8px;">* where 10 is best</span></th></tr>
<tr><td>Name 1</td><td>300</td><td>1</td></tr>
<tr><td>Name 2</td><td>20</td><td>3.8</td></tr>
<tr><td>Name 3</td><td>10000</td><td>10</td></tr>
<tr><td>Name 4</td><td>62.30</td><td>9</td></tr>
<tr><td>Name 5</td><td>4500</td><td>7.8</td></tr>
<tr><td>Name 6</td><td>5</td><td>3.9</td></tr>
<tr><td>Name 7</td><td>12000</td><td>4.7</td></tr>
<tr><td>Name 8</td><td>20.50</td><td>8</td></tr>
</table></center>

3. Have a look at the instructions in Chapter 1 on this page to know how to customize the appearance of the table.


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.