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 275 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account 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>