WordPress Website Tutorials for Beginners

How to create a table on your site, what do you have to do to enter columns and lines.

Use HTML Table code

This is a table with 3 columns and 1 line

<table style=”width:100%”>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

If you want more ore less columns add or remove <td></td>

This HTML table code has 4 columns and 3 lines

<table style=”width:100%”>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>

<tr>
<td>Line1</td>
<td>Line1</td>
<td>Line1</td>
<td>Line1</td>
</tr>

<tr>
<td>Line2</td>
<td>Line2</td>
<td>Line2</td>
<td>Line2</td>
</tr>
</table>

This is the result from the HTML Table code you see above.

Column Column Column Column
Line1 Line1 Line1 Line1
Line2 Line2 Line2 Line2

Now I am going to fill my table with the data I want in it.

p.e. You want to make a page with links to something, I use for that my tutorials.

Tutorial 1 Tutorial 2 Tutorial 3 Tutorial 4
html code anchor mobile friendly SEO
Cool HTML codes Create anchor link Mobile friendly site Free SEO Course

We are going to add a link to all tutorials by selecting the picture and using the link button.

Adding images to your site in a table, prevents you from ” jumping up and down” pictures.

I am now going to change the HMTL table code into 3 columns and 6 lines.

<table style=”width:100%”>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>

<tr>
<td>Line1</td>
<td>Line1</td>
<td>Line1</td>
</tr>

<tr>
<td>Line2</td>
<td>Line2</td>
<td>Line2</td>

<tr>
<td>Line3</td>
<td>Line3</td>
<td>Line3</td>

<tr>
<td>Line4</td>
<td>Line4</td>
<td>Line4</td>

<tr>
<td>Line5</td>
<td>Line5</td>
<td>Line5</td>

<tr>
<td>Line6</td>
<td>Line6</td>
<td>Line6</td>
</tr>
</table>

 And fill in my table

Tutorial 1 Tutorial 2 Tutorial 3
html code anchor mobile friendly
Cool HTML codes Make anchor link Mobile friendly site
(leave open space)
Tutorial 4 Tutorial 5 Tutorial 6
SEO Wordpress Toolbar Training wordpress plugin tutorial
Free SEO Course WP toolbar training Add notification bar

 This tables where without headers and borders, when you want to have one with a header and border, here are 2 codes to use.

The first:

<table style=”border: 5px solid red;”>
<tbody>
<tr>
<th style=”border: 1px solid black;”>Table header</th>
<th style=”border: 1px solid black;”>Table header</th>
</tr>
<tr>
<td style=”border: 1px solid black;”>Table cell 1</td>
<td style=”border: 1px solid black;”>Table cell 2</td>
</tr>
</tbody>
</table>

Table header Table header
Table cell 1 Table cell 2

and the second:

<table style=”border: 10px solid red; border-collapse: collapse;”>
<tbody>
<tr>
<th style=”border: 5px solid black;”>Table header</th>
<th style=”border: 5px solid black;”>Table header</th>
</tr>
<tr>
<td style=”border: 5px solid black;”>Table cell 1</td>
<td style=”border: 5px solid black;”>Table cell 2</td>
</tr>
</tbody>
</table>

Table header Table header
Table cell 1 Table cell 2

 

When you enjoyed this tutorial, please leave a comment below, I would appreciate that 🙂

“HTML Table code” Tutorial

I was able to write these tutorials for you, because of the great course I am following on the

Wealthy Affiliate University.

HTML Table Code
visit my profile page

affiliate disclosure

(Visited 180 times, 1 visits today)
  1. Glenn says:

    Hey there, love your style of affiliate marketing and I also learned so much just from browsing through, keep on teaching the latest innovations in affiliate marketing and enjoy success

    • Loes says:

      Hi Glenn, everything I learn about website development and affiliate marketing I will share here, so I cordially invite you to come again:)Greets Loes

  2. Mayuri says:

    Wow Loes I was going to give up on this, because it looks so complicated. But when I started doing it it was not that hard. Thank you very much for doing all the hard work for making it simple for us. Thanks again.TC

  3. MissSJ says:

    Hi Loes,

    I will be using the code above for the “header and the cell” table code, the one with the 2 columns. How do I add the code so I could have many rows? The one starting with “”

    Just a feedback that I have copied the whole table code with the coloured text (your last 2 illustrations) for testing purpose but it was not successful. The coloured text would disappear and be excluded from the code when I switched back from text to visual. Maybe my theme didn’t support it.

    As usual, you have very helpful articles!

    Thanks a million! 🙂

    • Loes says:

      Hi Shirline, You copy the part from tr to tr again and again, and stay between the both, body and table, Greetings Loes

      • MissSJ says:

        Hi Loes! I have tried your method above and it works for me perfectly. 🙂 I will definitely be swinging by your site often for useful information. Thanks for your fast response to help me solve my problem!!!!!! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>