HTML Table code, easy create table on your website
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 |
 |
 |
 |
 |
| 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 |
|
|
|
| Cool HTML codes | Make anchor link | Mobile friendly site |
| (leave open space) | ||
| Tutorial 4 | Tutorial 5 | Tutorial 6 |
|
 |
 |
| 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.
Loes Knetsch © An awesome free image gallery for your website. You can make it yourself with an HTML table code. But it can be very Read more...
Here is an easy way to add an HTML code for a text box to your website. I will also show you how you can Read more...
