HTML Table with internal links

As you may know, WordPress.com does not allow the use of javascript coding within our posts.

I wanted to create a searchable table (or a filtered table) and scoured the internet to find a non-javascript code that could deliver on my vision of this searchable function. I found one suggestion involving only CSS and HTML coding, as well as codes for radio buttons to select/filter the table entries. If you have a premium package, you can add CSS coding via the Theme Customizer. However, even with the CSS added, it did not work. An alternative plausible option would be to create a table using the td, tr and table tags. Then, insert the internal links to help the user scroll up and down to the relevant spots on the page itself.

The link button the link button/logo in the edit menu will allow you to create internal links to other posts on your blog, but not on the page itself. So, I contacted our trusted WordPress Happiness Engineers and was advised that it was indeed possible to insert internal links on a page or link. The trick is to use the heading styles, hyperlinks and ID tags to link up with text on your page. Subsequently, you are able to add a ‘scrollable’ navigational function to your post or page. – A useful function, when dealing with a long post. Please see my example here and the code below (fig. 1), if you wish to try it out yourself.

Figure 1: example of table coding with ID tags and a href hyperlinks

You can try out HTML codes on the W3Schools.com TryIt Editor.

W3Schools is an online developer’s tutorial site and a great source for HTML codes.

Table Code with internal hyperlinks:

<br /><a href="#t1">Table 1</a> | <a href="#t2">Table 2</a> |
<h2 id="t1">Table 1</h2>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
</table>
<h2 id="t2">Table 2</h2>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s