• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ROBS WEB DESIGN

Create A Successful Website And Blog

  • About
  • Blog
  • My Toolbox
  • Contact
You are here: Home / Coding / Learning HTML Code Part 5-Coding Tables With HTML

Learning HTML Code Part 5-Coding Tables With HTML

May 25, 2015 By Robin McDonald Leave a Comment

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.

html-tags-table-tag

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.

table-setup-chart

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.

css-advantages-for-tables

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.

The following two tabs change content below.
  • Bio
  • Latest Posts
My Twitter profileMy Facebook profileMy Google+ profile

Robin McDonald

WordPress Web Developer at Robs Web Design
My name is Rob McDonald and I am here to help you start your own Blog or Website. I want to teach you how to design and develop your site so that it is truly unique and awesome, just like you. Then I want to show you how to use SEO, Social Media Marketing and Branding, to make your site successful.
My Twitter profileMy Facebook profileMy Google+ profile

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

Related

Filed Under: Coding, Learning HTML, Web Design, Website Creation Tagged With: Blog Design, blogging, coding, Web Design

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published.

CommentLuv badgeShow more posts

Primary Sidebar

start-building-website-robswebdesign

Sign Up for Free Tips!

Free-WordPress-Blog-Setup

ABOUT ME

My name is Rob McDonald and I am here to help you start your own Blog or Website. Read More…

siteground-banner-larger
WPEdge-Cloud-Hosting-promo-ad-opt

MY MOST POPLAR POSTS

  • How Fast Is Your Web Host? 355 views
  • How To Increase Your Traffic And Build Relationships Using Triberr 322 views
  • How To Increase Your Website Speed With 5 Easy Steps 308 views
  • 10 Of My Favorite WordPress Plugins 232 views
  • 4 Of My Social Media Networks 206 views
  • 11 Things You Must Do Before Re-Designing Your WordPress Website 563 views

SEARCH MY SITE

Buy Me A Coffee

If you like the content of my blog, or if it has helped you in any way, please consider donating any amount.

Footer

Learning WordPress

  • Optimized-Your-WordPress-Images-With-ShortPixel-featureOptimize Your WordPress Images With ShortPixel
  • Keywords-and-Meta-Descriptions-featureHow To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages
  • Uninstall-a-plugin-featureUninstalling a WordPress Plugin And Why Its Important

Learning CSS

  • Coding-Spacing-In-CSS-featureLearning CSS Code Part 8-Coding Spacing with CSS
  • Coding-Fonts-in-CSSLearning CSS Code Part 7-Coding Fonts with CSS
  • Styling-Backgrounds-feature-Learning CSS Code Part 6-Coding Backgrounds with CSS

Twitter Feed

Tweets by @RobsWebDesign

Follow Me

  • Home
  • Blog
  • Subscribe
  • About
  • Contact

Site Designed By Rob McDonald @Robs Web Design! RobsWebDesign · Privacy Policy ·Disclosure Policy