Ok, let's create a table consisting of a main header, two sub-headers and, eventually, four data cells, by adding some table tags.

First, we need to tell your page or post that this is a table, so we use the table tag <table></table>

Each individual area within the table is known as a Cell. Now we need to decide how many cells in the table are needed, so, second, to establish how many rows, or cells, you require we use the table row tag <tr></tr>

All rows must start with an opening and closing tr tag, which will become obvious as you progress through this tutorial.

Third is the table header tag <th></ th>. This defines the table header(s) cells.

Finally, the table data tag <td></td>. These are the cells where data, or information is placed.

There is also the table body tag <tbody></tbody>. This is normally placed automatically after the table tag.

Now we need to place these tags in the text editor (providing your using the classic editor). For this tutorial, to start, we'll use 3 rows x 4 columns to illustrate how headings (th) and data (td) cells are built up. You can use as many columns as you like providing they are within the allocated width for your content.

To help members who aren't familiar with how HTML and CSS coding works, this tutorial is mainly for them, so we'll take each tag individually before combining them to make a 7 x 4 table. Below are the tags to create the header cells.

<table>
<tbody>
<tr>
<th></th>
</tr><tr>
<th></th>
<th></th>
</tr>
</tbody>
</table>

Now click on preview and you should see this

Next, we’ll add the table data tags



Join the Discussion
Write something…
Top