Easy Table takes your table data and renders it in a table automatically, but the data needs to be set up in the post/page.
In its simplest form, you start with a [table] tag. Then you add your data, one row per line, with the cells in each row being separated by commas. Finally you close the table with the [/table] tag. Note that the first row in the table will be a header by default.
Creating a Simple Table
If you have a simple parish contact table, it might look like this:
[table] Position, Name, Email, Phone Rector, Rev. John Smith, jsmith@example.com, 207-123-4567 Senior Warden, Mr. Bob Jones, bjones@example.com, 207-234-5678 Junior Warden, Ms. Clarabelle Dupree,,207-345-6789 Secretary, Miss Annabelle Fotherington, office@example.com, 207-456-7890 [/table]
Note that Ms. Dupree doesn’t have an email address listed, but we need to take into account the empty table cell, so there is a comma to end the “name” cell, then immediately a comma to end the “Email” cell with no data.
This will produce a basic table that looks like this:
Position | Name | Phone | |
---|---|---|---|
Rector | Rev. John Smith | jsmith@example.com | 207-555-4567 |
Senior Warden | Mr. Bob Jones | bjones@example.com | 207-555-5678 |
Junior Warden | Ms. Clarabelle Dupree | 207-555-6789 | |
Secretary | Miss Annabelle Fotherington | office@example.com | 207-555-7890 |
Table Attributes
Removing the Table Header
If you don’t want the first row to be a header, you would edit the [table] tag like so:
[table th="false"]Table info here[/table]
Table Customization Classes
There are other options that can be added to the table tag to further customize the table, such as:
- class=”table table-hover” – makes the rows highlight when hovered
- class=”table table-striped” – makes the rows striped
- class=”table table-bordered” – adds borders on all sides of the table and cells
- class=”table table-condensed” – tightens the space around the cell data
These classes can be combined (but you must add the class “table” to use them) like so:
[table class="table table-hover table-bordered table-condensed"]Table info here[/table]
Other Table Attributes
There are also attributes you can add to adjust the width of the table
[table width="50%"]Table info here[/table]
the width of the columns
[table colwidth="20%|40%|40%"]Table info here[/table]
or the alignment of the data
[table colalign="left|left|right"]Table info here[/table]
More attributes can be found in the settings for the plugin (Settings->Easy Table).
This example is the same table as above, but using some of the different classes and attributes:
Code:
[table class="table table-hover table-striped" th="false" width="75%" colwidth="20%|20%|30%|30%" colalign="left|center|center|center"] Rector, Rev. John Smith, jsmith@example.com, 207-555-4567 Senior Warden, Mr. Bob Jones, bjones@example.com, 207-555-5678 Junior Warden, Ms. Clarabelle Dupree,,207-555-6789 Secretary, Miss Annabelle Fotherington, office@example.com, 207-555-7890 [/table]
Output:
Rector | Rev. John Smith | jsmith@example.com | 207-555-4567 |
Senior Warden | Mr. Bob Jones | bjones@example.com | 207-555-5678 |
Junior Warden | Ms. Clarabelle Dupree | 207-555-6789 | |
Secretary | Miss Annabelle Fotherington | office@example.com | 207-555-7890 |
Multiple Lines of Data in a Cell
If you need multiple lines of data in a cell you can’t use the “Enter” key. Instead separate each line with two tildes (~~). So, for example, if you have two phone numbers for the rector, you would set it up like this:
Code:
[table class="table table-condensed table-bordered" th="false" colwidth="20%|20%|30%|30%" colalign="left|center|center|center"] Rector, Rev. John Smith, jsmith@example.com, 207-555-4567(office)~~207-555-8901(cell) Senior Warden, Mr. Bob Jones, bjones@example.com, 207-555-5678 Junior Warden, Ms. Clarabelle Dupree,,207-555-6789 Secretary, Miss Annabelle Fotherington, office@example.com, 207-555-7890 [/table]
Output:
Rector | Rev. John Smith | jsmith@example.com | 207-555-4567(office) 207-555-8901(cell) |
Senior Warden | Mr. Bob Jones | bjones@example.com | 207-555-5678 |
Junior Warden | Ms. Clarabelle Dupree | 207-555-6789 | |
Secretary | Miss Annabelle Fotherington | office@example.com | 207-555-7890 |