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.
Company | Contact | Comments |
---|---|---|
ABC | John Doe | Testing this table for length variability |
test | test | test |
test | test | test |