Tables

How to use tables in your posts with HyperCode

published 01/01/2025 15:13, updated 04/13/2026 22:37

HyperCode supports some basic table elements. See how to use them.

Tables are important elements for organizing certain types of information. For example, price tables or nutritional information about a food item.

Tables are organized into Rows and Columns. Each intersection between a row and a column is a rectangle called a table "Cell".

The first row of a table normally contains a different format and information, which explains what type of information is in each column and is called the table "header".

Just like in HTML, HyperCode allows you to create tables by inserting rows, with the first normally being the header, and in each row inserting cells.

Each cell contains its own content, which is normally text or numbers. But it can contain other elements, such as links, images, and even other tables.

It is important to note that each table element, including the table itself, must be "opened" with the appropriate tag and then "closed" with the corresponding tag, in reverse order: the first to open is the last to close.

First open the table with [table];
Then open the row with [tr] ;
Then open a cell with [td] or, if it is for the header, you can use [th];
Fill the cell with its content;
Close the cell with [/td] or [/th] or [/];
Go back to step 3 until you finish the row's cells;
After finishing the row's cells, close the row with [/tr] or [/];
Go back to step 2 if you need to create another row;
When the rows are finished, close the table with [/table] or [/].

Like most HyperCode Tags, table, tr, th, and td optionally accept the properties class, style, and id. See Class, Style, id

Example:

[table]
[tr]
   [th]Product[/]
   [th]Stock[/]
   [th]Price[/]
[/tr]
[tr]
   [td]Multimedia keyboard[/]
   [td]12[/]
   [td]50.00[/]
[/tr]
[tr]
   [td]Optical mouse[/]
   [td]8[/]
   [td]40.00[/]
[/tr]
[tr]
   [td]Mouse pad[/]
   [td]12[/]
   [td]10.00[/]
[/tr]
[tr]
   [td]Speaker[/]
   [td]9[/]
   [td]35.00[/]
[/tr]
[/table]

It is displayed as:

Product	Stock	Price
Multimedia keyboard	12	50.00
Optical mouse	8	40.00
Mouse pad	12	10.00
Speaker	9	35.00

Tag [table]

The table tag marks the beginning of a table.

After the table tag you must start inserting rows using tr.

After inserting all the rows you must indicate the end of the table using [/table] or [/].

Tag [tr]

The tr tag marks the beginning of a regular row in the table.

After the tr tag you must start inserting cells using td for normal cells, or th for table header cells.

After inserting all the cells you must indicate the end of the row using [/tr] or [/].

Tag [td]

The td tag marks the beginning of a cell in the table.

After the td tag you must start inserting the cell content, which is normally text but can be or contain various elements such as images and links.

After inserting all the cell content, you must indicate the end of the cell with [/td] or [/].

Tag [th]

The th tag marks the beginning of a cell in a Header row or table header.

After the th tag you must start inserting the cell content, which is normally text but can be or contain various elements such as images and links.

After inserting all the content you must indicate the end of the cell using [/th] or [/].