In this article we are going to learn about coding tables in HTML. Tables can be a little tricky and confusing at first but I promise I will get you through this and you will be coding tables in no time.
Today we are going to be talking about the table tag.
<table></table>
Some people would refer to these as charts, but I like to refer to them as rows and columns. This is one of the most common tags that I use in my web designs as I use this to organize my content into columns. Whether its images, pictures or links, you can put anything you want into tables.
For example some of the things you could put into tables is a row of buttons, or you could put a row of images that have links in them.
If you wanted to create more of magazine type layout on your blog, you could use the table tag for that, to create those nice even columns across the page.
Coding Tables In HTML
Tables are really useful for organizing your information within your blog posts. Use tables to create rows and columns. You can put any content into a table.
To code a table you need 3 tags:
<table>
We are going to open and close the full table with the <table> and </table> tag.
The next tag that we need is the <tr> We open and close each row with the <tr> and </tr> tag.
The next tag is the <td> tag. We open and close each CELL with the <td> and </td> tag.
The <td> stands for Table Data and holds all the content of the data cell. A <td> tag can contain text, links, images, lists, forms, other table, etc! So, any content that you want in the table will be placed in this <td> tag.
Let’s Create A Table
So now that we have learned the 3 different tags that make up a table, let’s create one!
The Code:
<table>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 3</td>
<td>row 2 cell 4</td>
</tr>
</table>
So, we opened the table (<table>) first, then we opened our first table row (<tr>). Then we added two columns (<td></td>) in the first row. Then we closed the table row (</tr>) and we opened the second row (<tr>). We then added two columns to the second row with the (<td></td>) tag again. You can have as many (td’s) within a (tr) As you want.
The Outcome:
| row 1 cell 1 | row 1 cell 2 |
| row 2 cell 3 | row 2 cell 4 |
Are You Still With Me?
I would suggest playing with this code for a little bit so you can see how it’s used. Just remember, there are only 3 different tags that make up the table. You have rows and columns in your table, and you can have as many rows and columns as you want, depending on your site.
The easiest way, I think to understand this is that you have to start the table with the table tag, then you have to start the row with a table row tag, then you have to put the content in a table data tag. All of these tags have to open and close for the table to work correctly.
This seems a little confusing at first because you can have a lot of tags going on here, but with practice, I believe it will be easier.
It took me a little while to wrap my head around using all the tags, but once I understood it, I started using tables in my sites more often. It helps organize the content and makes it look better than trying to add it straight to a page.
Using CSS Styling With Our Tables
You can also use CSS to style your table once they are set up on your site. You can add borders, change the height and width of the table, row or cell….control the cell spacing, or even align the cell contents.
So, you can really play around a lot with your CSS styling within your tables. I am not going to go into this in this article but I will talk about it in future one. I just wanted to mention here that it is possible. For now, the goal is to understand how to set the table up.
Using Table Plug-ins
I will tell you now, that there are plug-ins out there that we make the table setup easier for you, and you will not have to use the code. I have tried a few of these plug-ins myself, and I always go back to using the code to set my table up.
I find, that when I use the plug-ins, they will sometimes put code out there that make the table hard to change later. I like having full control over the table, so I always stick to the code, when it comes to tables, instead of using the plug-in. I love plug-ins, and I use them all the time, but for tables, I stick to the code.
Creating Tables in HTML Wrap-up
Once you get it, understanding the table tag, it really is quiet easy to use. Remember those 3 tags that you are going to need and you just make sure you open and close them in the right places. And the only way you are going to learn how to do this, is just get in there and play with it.
So pop open a new blog post, and just add in those 3 tags, add in some content, whether it be text or images, whatever is easiest for you. Probably just some simple text is easiest to get started with. And just play around with it and you will get it. And it really will organize you information in your blog post.
The next article in the series is Learning HTML Code Part 6-Coding Links With HTML. I will show you how easy it is to code links in HTML. Whether it is for outbound or inbound links, they are very important to web design.
Robin McDonald
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017
Leave a Reply