“Tables” are bits of HTML code that hold a grid of content together within a web page.
I’ve come across a WordPress plugin that makes tables easy. It’s the TinyMCE Advanced and we’re happy to install it on your website. See the vid below for the table features of the plugin. If after that, you still want to see the underlying table code, then feel free to continue reading below.
The tags are <TABLE> <TR> and <TD>
Like other HTML tags, each table tag has an opening and a closing. Open the table with <TABLE> and close it with </TABLE>. The closing tag is exactly the same as the open tag with a slash in it.
The table is not complete until you add rows and columns. A row is a horizontal area, the column is vertical. An easy way to remember the difference is to think about columns as they pertain to construction. Rows are like seats in a theater. Columns are always up-and-down. Rows go the other way, side-to-side.
Rows are specified with the <TR> tag. Columns are specified with the <TD> tag
So the minimal HTML definition of a table is:
And it looks likes this:
Tags that fit inside of other tags are said to be “nested”. We have indented nested tags by two spaces to make it easy to see. Inside the <TABLE> tag is a set of <TR> tags. Inside the set of <TR> tags is a set of <TD> tags. This HTML above defines a table with one row and one column.
The td is also called a cell. The next example shows a table with two rows and two columns. It is a table with four cells.
And it looks like this:
Looking in the HTML view, we can see some things are starting to repeat. For each row, we add a set of <TR>…</TR> tags. For each cell, we add a set of <TD>…</TD> tags Content goes in between <TD> tags as shown, and can be anything you want.
For each row of table cells, there must be the same number of cells. In the example above each row has two cells.