Page 3

Lets try Tables

I find creating appealing custom tables in WordPress quite difficult. The basic table construct in HTML is quite unappealing. This exclusively uses the <table><tbody><tr><td>Text</td> construct. This is very similar to the basic “Table” block available in WordPress (see bottom Table) Note: WordPress does not like the basic HTML table construct and adds the <tbody></tbody> tags when it asks you to repair the HTML block after submitting it. This is just a minor issue.

Label-1 Label-2 Label-3
Text R1 C1 Text R1 C2 Text R1 C3
Text R2 C1 Text R2 C2 Text R2 C3
<table>
 <tbody>
  <tr>
    <th>Label-1</th>
    <th>Label-2</th>
    <th>Label-3</th>
  </tr>
  <tr>
    <td>Text R1 C1</td>
    <td>Text R1 C2</td>
    <td>Text R1 C3</td>
  </tr>
  <tr>
    <td>Text R2 C1</td>
    <td>Text R2 C2</td>
    <td>Text R2 C3</td>
  </tr>
 </tbody>
</table>

Below is a more “adorned” table where I added attributes to the individual tags. For example, to create a strong black border around the table. I had to embed the “style” attributes to the individual tag. This is very hard to do in WordPress tables with the custom CSS (cascading style sheet) option in the advanced block section. WordPress has many style sheets embedded in its Theme that interfere. As a last resort you have to put the style information inside each tag. For example the first table tag looks now like <table style=”border:4px solid #000000″>. To get large black fonts in the table headers I had to put style information inside the <th> tags. For example <th style=”boder:2px solid #000000; background-color:#b4a7d6;color:black;font-size:18px”> This is quite onerous but the only way to do this in WordPress, as far as I have been able to figure it out.

Company Contact Phone
ABC Corp John Doe 403-123-4567
Leipert Industries John Mack 403-987-6543
XYZ Corp Yioty Varshinda 209-452-1639

Below is a somewhat more fancy table using CSS. I took the idea from W3Schools and modified it a bit. First I copied the code and ran it through a great (free) online testing environment called JSBin. It ran perfectly, and I was able to add or alter CSS style elements in the “Style Preamble”. However when I copied the code it into a WordPress HTML block, it only partially worked. WordPress Theme embedded CSS style sheets interfered with a number of “Style” components. The solution was to embed the CSS style elements in the actual table tags in order to get what I wanted. The result is quite pleasing I think.

A somewhat more Fancy Table

Company Contact Country
Johns Feedbox Fred Anders Canada
Berglunds Funbox John Berglund Canada
Centro comercial Francisco Pango Mexico
Friedrich Handel Wilfried Mendel Austria
Trading IsUs John Bennett UK
Gutes Essen Philip Braten Germany
Smiling Bacchus Wine Frank Johnson Canada
Pasta Alimentari Giovanni Boccaccio Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France

Contrast the table above with the WordPress table block below. It seems quite basic to me. It will do the job in a pinch though, and is very easy to create.

CompanyContactComments
ABCJohn DoeTesting this table for length variability
testtesttest
testtesttest

Leave a Reply

Your email address will not be published. Required fields are marked *

Optionally add an image (JPEG only)