HTML table formatting – Today a small basic from the practice. Many customers wanted to create their own texts with their employees in WordPress. So that the text is also optimized for search engines, various small features are added. These can be photos from the media library or Youtube video embeddings. Inserting tables simply with Copy & Paste brings with it a lot of HTML snippets that you don’t want in your own content management system. Let’s take a look at the example of a simple HTML table today, which anyone can generate and modify themselves.

Problem: Simply copying HTML tables is dirty

For employees in companies it is important not to copy tables, otherwise we have, as described, a lot of “trash” in our HTML code. The HTML code is not visible in the “visual” area of the editor. To edit it you should click on “Text” in WordPress Editor. When code is simply copied, it takes small snippets with it that we don’t want. Here is a direct example from practice:

Example – Bad HTML of a table

There are still many things copied here that you can’t see:

<th class=”headerSort” tabindex=”0″ title=”Aufsteigend sortieren” role=”columnheader button”>Nr.</th>
<th class=”headerSort” tabindex=”0″ title=”Aufsteigend sortieren” role=”columnheader button”>City</th>
<th class=”headerSort” tabindex=”0″ title=”Aufsteigend sortieren” role=”columnheader button”>Street</th>

So we see that Copy & Paste takes a lot with it.

Example – Good HTML of a table

This would make it clean:

<th>Nr.</th>
<th>City</th>
<th>Street</th>

Solution: HTML table template

A little HTML you have to use or get to know. It is best to save it briefly and then copy or edit it:

  • Tip1 : <table> and <tbody> are only at the beginning </table> </tbody> only at the end
  • Tip 2: <th> only use in the first line and close it again (th means “Table Headline)
  • Tip 3: <tr> opens a line and closes it (tr means “Table Row”)
  • Tip 4: <td> opens a value or a box and closes it (td means “Table Data”)

Here is a table with 3 columns and 3 rows:

<table>
<tbody>
<tr>
<th>Headline 1</th>
<th>Headline 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</tbody>
</table>

This is how your table looks now:

Headline 1 Headline 2 Headline 3
Text 1 Text 2 Text 3
Text 1 Text 2 Text 3

Another example with 2 columns and 2 rows

<table>
<tbody>
<tr>
<th>Headline 1</th>
<th>Headline 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>

Another example with 4 columns and 5 rows

<table>
<tbody>
<tr>
<th>Headline 1</th>
<th>Headline 2</th>
<th>Headline 3</th>
<th>Headline 4</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr></tbody>
</table>

Add more columns and rows

You get more lines by starting and closing a new “Table Row” within your “Table” <table>…</table>. This one looks like it:

<tr>

</td>

Depending on the number of columns the “Table Data” have to be inserted.

<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>